/*
Theme Name: Aycu Block Theme
Theme URI: https://example.com/aycu-theme
Author: folksdev
Author URI: https://example.com
Description: A premium, minimal, modern Gutenberg Full Site Editing (FSE) block theme designed for high performance, featuring beautiful typography, dark mode compatibility, and smooth transitions.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aycu-theme
*/

/* Load Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=IBM+Plex+Sans:wght@400;600&family=JetBrains+Mono:wght@600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

body {
    background-color: #f8f8f8;
    color: #131313;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Custom premium scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #d31011;
}
::-webkit-scrollbar-thumb:hover {
    background: #930005;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.nav-active {
    color: #d31011;
    font-weight: 700;
    border-bottom: 2px solid #d31011;
}

/* Hard Shadows */
.hard-shadow {
    box-shadow: 8px 8px 0px 0px rgba(211, 10, 17, 1) !important;
}

.bento-border {
    border: 1px solid #d8c2bf !important;
}

/* Form Styles Fallbacks & Contact Form 7 integration */
input[type="text"], input[type="email"], select, textarea,
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
    width: 100% !important;
    background-color: #f7f7f7 !important;
    border: 1px solid #d8c2bf !important;
    color: #131313 !important;
    padding: 1rem !important;
    outline: none !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease !important;
    display: block !important;
    box-sizing: border-box !important;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus,
.wpcf7-form-control:focus {
    border-color: #d31011 !important;
    box-shadow: 0 0 0 2px rgba(211, 10, 17, 0.2) !important;
}
.wpcf7-form-control-wrap {
    display: block !important;
}
.wpcf7-submit {
    width: 100% !important;
    background-color: #d31011 !important;
    color: #ffffff !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 1.25rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
}
.wpcf7-submit:hover {
    filter: brightness(1.1) !important;
}
label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Contact Form 7 2-column grid layout alignment overrides */
.wpcf7 form {
    display: grid !important;
    gap: 2rem !important;
    width: 100% !important;
}


.wpcf7 form > p {
    margin: 0 !important; /* Reset margin but keep visible */
}

/* Make full-span wrappers span both columns */
.wpcf7 form .md\:col-span-2,
.wpcf7 form .md\\:col-span-2,
.wpcf7 form .md-col-span-2,
.wpcf7 form > div > div:nth-child(5),
.wpcf7 form > div > div:nth-child(6),
.wpcf7 form > p:nth-child(5),
.wpcf7 form > p:nth-child(6),
.wpcf7 form p:has(textarea),
.wpcf7 form p:has(input[type="submit"]),
.wpcf7 form p:has(.wpcf7-submit) {
    grid-column: span 2 / span 2 !important;
}

@media (max-width: 768px) {
    .wpcf7 form {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .wpcf7 form .md\:col-span-2,
    .wpcf7 form .md\\:col-span-2,
    .wpcf7 form .md-col-span-2,
    .wpcf7 form > div > div:nth-child(5),
    .wpcf7 form > div > div:nth-child(6),
    .wpcf7 form > p:nth-child(5),
    .wpcf7 form > p:nth-child(6),
    .wpcf7 form p:has(textarea),
    .wpcf7 form p:has(input[type="submit"]),
    .wpcf7 form p:has(.wpcf7-submit) {
        grid-column: span 1 / span 1 !important;
    }
}





/* Bento Card Overlays */
.bento-card-gradient {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(19, 19, 19, 0.85) 100%) !important;
}

/* Smooth transitions */
a, button, .wp-block-button__link, img {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
    color: #d31011;
}

/* Bento Grid targeting both outer and inner containers */
.bento-grid, 
.bento-grid > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-gap: 24px !important;
}

.bento-col-2 {
    grid-column: span 2 !important;
}
.bento-col-3 {
    grid-column: span 3 !important;
}
.bento-row-2 {
    grid-row: span 2 !important;
}

@media (max-width: 768px) {
    .bento-grid, 
    .bento-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr !important;
    }
    .bento-col-2, .bento-col-3, .bento-row-2 {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* Fix image height and sizing to stay exactly like local HTML */
.wp-block-image img {
    width: 100% !important;
    height: auto !important;
}
.wp-block-columns {
    align-items: center;
}

/* Override px-margin-desktop padding on mobile ONLY for the contact page */
@media (max-width: 1024px) {
    .page-template-default.page-id-205 .px-margin-desktop,
    .page-template-default.page-id-18 .px-margin-desktop,
    .page-template-default.page-id-38 .px-margin-desktop,
    .page-template-default.page-id-189 .px-margin-desktop,
    .page-template-default.page-id-190 .px-margin-desktop,
    .page-template-default.page-id-191 .px-margin-desktop,
    .page-template-default.page-id-192 .px-margin-desktop,
    .page-template-default.page-id-207 .px-margin-desktop,
    .page-template-default.page-id-208 .px-margin-desktop,
    .page-template-default.page-id-209 .px-margin-desktop,
    .page-template-default.page-id-210 .px-margin-desktop,
    .page-template-default.page-id-211 .px-margin-desktop,
    .page-template-default.page-id-212 .px-margin-desktop,
    .page-template-default.page-id-213 .px-margin-desktop,
    .page-template-default.page-id-214 .px-margin-desktop,
    .page-template-default.page-id-215 .px-margin-desktop,
    .page-template-default.page-id-216 .px-margin-desktop,
    .page-template-default.page-id-217 .px-margin-desktop,
    .page-template-default.page-id-218 .px-margin-desktop,
    .page-template-default.page-id-219 .px-margin-desktop,
    .page-template-default.page-id-220 .px-margin-desktop,
    .page-template-default.page-id-221 .px-margin-desktop,
    .page-template-default.page-id-222 .px-margin-desktop,
    .page-template-default.page-id-223 .px-margin-desktop,
    .page-template-default.page-id-224 .px-margin-desktop,
    .page-template-default.page-id-225 .px-margin-desktop,
    .page-template-default.page-id-226 .px-margin-desktop,
    .page-template-default.page-id-227 .px-margin-desktop,
    .page-template-default.page-id-228 .px-margin-desktop,
    .page-template-default.page-id-229 .px-margin-desktop,
    .page-template-default.page-id-230 .px-margin-desktop,
    .page-template-default.page-id-231 .px-margin-desktop,
    .page-template-default.page-id-232 .px-margin-desktop,
    .page-template-default.page-id-233 .px-margin-desktop,
    .page-template-default.page-id-234 .px-margin-desktop,
    .page-template-default.page-id-235 .px-margin-desktop,
    .page-template-default.page-id-236 .px-margin-desktop,
    .page-template-default.page-id-237 .px-margin-desktop,
    .page-template-default.page-id-238 .px-margin-desktop,
    .page-template-default.page-id-239 .px-margin-desktop,
    .page-template-default.page-id-240 .px-margin-desktop,
    .page-template-default.page-id-241 .px-margin-desktop,
    .page-template-default.page-id-242 .px-margin-desktop,
    .page-template-default.page-id-243 .px-margin-desktop,
    .page-template-default.page-id-244 .px-margin-desktop,
    .page-template-default.page-id-245 .px-margin-desktop,
    .page-template-default.page-id-246 .px-margin-desktop,
    .page-template-default.page-id-247 .px-margin-desktop,
    .page-template-default.page-id-248 .px-margin-desktop,
    .page-template-default.page-id-249 .px-margin-desktop,
    .page-template-default.page-id-250 .px-margin-desktop,
    .page-template-default.page-id-251 .px-margin-desktop,
    .page-template-default.page-id-252 .px-margin-desktop,
    .page-template-default.page-id-253 .px-margin-desktop,
    .page-template-default.page-id-254 .px-margin-desktop,
    .page-template-default.page-id-255 .px-margin-desktop,
    .page-template-default.page-id-256 .px-margin-desktop,
    .page-template-default.page-id-257 .px-margin-desktop,
    .page-template-default.page-id-258 .px-margin-desktop,
    .page-template-default.page-id-259 .px-margin-desktop,
    .page-template-default.page-id-260 .px-margin-desktop,
    .page-template-default.page-id-261 .px-margin-desktop,
    .page-template-default.page-id-262 .px-margin-desktop,
    .page-template-default.page-id-263 .px-margin-desktop,
    .page-template-default.page-id-264 .px-margin-desktop,
    .page-template-default.page-id-265 .px-margin-desktop,
    .page-template-default.page-id-266 .px-margin-desktop,
    .page-template-default.page-id-267 .px-margin-desktop,
    .page-template-default.page-id-268 .px-margin-desktop,
    .page-template-default.page-id-269 .px-margin-desktop,
    .page-template-default.page-id-270 .px-margin-desktop,
    .page-template-default.page-id-271 .px-margin-desktop,
    .page-template-default.page-id-272 .px-margin-desktop,
    .page-template-default.page-id-273 .px-margin-desktop,
    .page-template-default.page-id-274 .px-margin-desktop,
    .page-template-default.page-id-275 .px-margin-desktop,
    .page-template-default.page-id-276 .px-margin-desktop,
    .page-template-default.page-id-277 .px-margin-desktop,
    .page-template-default.page-id-278 .px-margin-desktop,
    .page-template-default.page-id-279 .px-margin-desktop,
    .page-template-default.page-id-280 .px-margin-desktop,
    .page-template-default.page-id-281 .px-margin-desktop,
    .page-template-default.page-id-282 .px-margin-desktop,
    .page-template-default.page-id-283 .px-margin-desktop,
    .page-template-default.page-id-284 .px-margin-desktop,
    .page-template-default.page-id-285 .px-margin-desktop,
    .page-template-default.page-id-286 .px-margin-desktop,
    .page-template-default.page-id-287 .px-margin-desktop,
    .page-template-default.page-id-288 .px-margin-desktop,
    .page-template-default.page-id-289 .px-margin-desktop,
    .page-template-default.page-id-290 .px-margin-desktop,
    .page-template-default.page-id-291 .px-margin-desktop,
    .page-template-default.page-id-292 .px-margin-desktop,
    .page-template-default.page-id-293 .px-margin-desktop,
    .page-template-default.page-id-294 .px-margin-desktop,
    .page-template-default.page-id-295 .px-margin-desktop,
    .page-template-default.page-id-296 .px-margin-desktop,
    .page-template-default.page-id-297 .px-margin-desktop,
    .page-template-default.page-id-298 .px-margin-desktop,
    .page-template-default.page-id-299 .px-margin-desktop,
    .page-template-default.page-id-300 .px-margin-desktop,
    .page-template-default.page-id-301 .px-margin-desktop,
    .page-template-default.page-id-302 .px-margin-desktop,
    .page-template-default.page-id-303 .px-margin-desktop,
    .page-template-default.page-id-304 .px-margin-desktop,
    .page-template-default.page-id-305 .px-margin-desktop,
    .page-template-default.page-id-306 .px-margin-desktop,
    .page-template-default.page-id-307 .px-margin-desktop,
    .page-template-default.page-id-308 .px-margin-desktop,
    .page-template-default.page-id-309 .px-margin-desktop,
    .page-template-default.page-id-310 .px-margin-desktop,
    .body-md.overflow-x-hidden:has(form#contactForm) .px-margin-desktop,
    .body-md:has(form#contactForm) .px-margin-desktop,
    body:has(#contactForm) .px-margin-desktop,
    body[class*="contact"] .px-margin-desktop,
    .contact .px-margin-desktop {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}