/*
Theme Name: Die Akker Custom Theme
Author: FJ Chaffey
Description: A bespoke WordPress block theme inspired by a custom design.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: figma-canvas
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&family=Montserrat:wght@200;300;400&display=swap');

/* ==========================================================================
   1. Base Sticky Header Configuration
   ========================================================================== */
.custom-sticky-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff; 
    
    /* NEW: Realistic ambient drop shadow to elevate the header */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 
                0 10px 15px -3px rgba(0, 0, 0, 0.05);
    
    /* Keep your smooth transition engine intact */
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    
    padding-left: clamp(15px, 5vw, 60px) !important;
    padding-right: clamp(15px, 5vw, 60px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/* FIX: Strip away default WordPress margins from internal components 
   that are pushing the header boundaries open from the inside */
.custom-sticky-header *, 
.custom-sticky-header .wp-block-group,
.custom-sticky-header .wp-block-columns {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Ensure your logo scales cleanly */
.custom-sticky-header .header-logo img {
    height: 60px; /* Base desktop logo height */
    width: auto;
    display: block; /* FIX: Prevents inline images from adding small bottom gaps */
}

/* ==========================================================================
   2. Active Scroll State Overrides (Triggered via JS)
   ========================================================================== */
.custom-sticky-header.is-scrolled {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px); 

    /* NEW: Deeper shadow on scroll to maximize the physical depth illusion */
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1), 
                0 6px 6px -5px rgba(0, 0, 0, 0.04);
}

/* Shrink the logo size when scrolling down */
.custom-sticky-header.is-scrolled .header-logo img {
    height: 40px; 
}

/* ==========================================================================
   3. Early Mobile Breakpoint Forced Override
   ========================================================================== */
@media screen and (max-width: 1100px) {
    .custom-sticky-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    
    .custom-sticky-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
}


.wp-block-button.is-style-glass .wp-block-button__link {
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transition: all 0.3s ease;
}

.wp-block-button.is-style-glass .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.fit-cover-image img.wp-block-cover__image-background {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Card Hover Effect */
.akker-card-hover {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.akker-card-hover:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-5px);
}


/* Footer Quick Links Hover */
.akker-footer-links {
    list-style: none;
    padding-left: 0;
}
.akker-footer-links li {
    margin-bottom: 8px;
}
.akker-footer-links a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}
.akker-footer-links a:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* Footer Social Icons Hover */
.akker-footer-social .wp-block-social-link a {
    transition: color 0.3s ease, transform 0.3s ease;
}
.akker-footer-social .wp-block-social-link a:hover {
    color: var(--wp--preset--color--primary) !important;
    transform: translateY(-3px);
}


/* Default layout for desktop / landscape screens */
.mobile-2x2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns next to each other */
    gap: 20px; /* Adjust spacing between your 4 grid items */
}

/* Mobile responsive override (Triggers on screens 767px wide or smaller) */
@media screen and (max-width: 767px) {
    .mobile-2x2-grid {
        /* Force the grid into exactly 2 columns. The 4 items will naturally wrap into 2 rows */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px; /* Slightly tighter spacing for small mobile screens */
    }
}

/* -------------------------------------------------------------
   Stage 1: Desktop Layout (4 Columns)
   Triggers on all large screens by default
------------------------------------------------------------- */
.responsive-step-columns {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
}
/* Strip native WordPress width restrictions on the nested columns */
.responsive-step-columns >= .wp-block-column {
    flex-basis: unset !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* -------------------------------------------------------------
   Stage 2: Tablet / Landscape Mobile Layout (2x2 Grid)
   Triggers on screens between 600px and 1024px wide
------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .responsive-step-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
}

/* -------------------------------------------------------------
   Stage 3: Mobile Layout (1 Column Stacked)
   Triggers on small screens 599px wide or smaller
------------------------------------------------------------- */
@media screen and (max-width: 599px) {
    .responsive-step-columns {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 15px; /* Tighter vertical spacing for mobile */
    }
}

/* ==========================================================================
   4. Mobile Overlay Navigation Styles (Triggered When Menu Opens)
   ========================================================================== */

/* Target the fullscreen overlay container when it is active */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open {
    /* Center the list items horizontally and vertically */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Center text alignment inside individual item boundaries */
    text-align: center !important;
    
    /* Modern semi-transparent background with a subtle frosted glass effect */
    background-color: rgba(255, 255, 255, 0.2) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* Safari compatibility */
    
    /* Ensure the overlay takes up the full browser screen window */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 100000 !important;
    clip-path: none !important; /* Prevent header bounds from clipping */
}

/* Ensure the inner list structure itself expands cleanly to allow centering */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 25px !important; /* Generous spacing between mobile navigation links */
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Optional: Clean up the individual mobile link sizing and fonts */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    font-size: 24px !important; /* Slightly larger text size for mobile touch targets */
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* ==========================================================================
   5. Mobile Overlay Layout Realignment & Center Correctives
   ========================================================================== */

/* Force the inner text and flex layouts to sit perfectly in the dead center */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding-left: 0 !important; /* Strip any browser or theme indent offsets */
    padding-right: 0 !important;
}

/* Ensure individual links drop block tracking handles for accurate centering */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* Ensure raw link anchors do not float or lean toward edges */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    text-align: center !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   6. Close Toggle Button Position Adjustments
   ========================================================================== */

/* Target the wrapper housing the mobile menu's 'X' close graphic */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 20px !important;     /* Distance away from the top edge of screen */
    right: 0 !important;      /* Anchors to right zone boundary */
    
    /* ADD SPACING TO THE RIGHT: Adjust this pixel size to push it further left */
    padding-right: clamp(15px, 5vw, 40px) !important; 
    
    /* Center layout normalization inside toggle zone handle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 9999;
    cursor: pointer;
}
.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top-btn:hover {
    background-color: #a65317; /* Darker primary */
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}
.back-to-top-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


/* Force WP inner dialog background to be transparent so the blur is visible */
.custom-sticky-header .wp-block-navigation__responsive-dialog {
    background-color: transparent !important;
}

/* ==========================================================================
   7. WordPress Admin Bar Layout & Scroll Adjustments
   ========================================================================== */

/* Standard Desktop View (Logged-in admin) */
.admin-bar .custom-sticky-header {
    top: 32px !important; 
}

/* Tablet / Landscape Phone View */
@media screen and (max-width: 782px) {
    .admin-bar .custom-sticky-header {
        top: 46px !important; 
    }
}

/* Small Mobile Screen Fix (< 600px) */
@media screen and (max-width: 600px) {
    /* INITIAL STATE: Anchored below the mobile admin bar */
    .admin-bar .custom-sticky-header {
        position: absolute !important; /* Forces header to roll up alongside the admin bar */
        top: 46px !important;
    }
    
    /* SCROLLED STATE: Once the page moves, re-lock the header to the very top edge */
    .admin-bar .custom-sticky-header.is-scrolled {
        position: fixed !important; /* Snaps header down to the viewport frame */
        top: 0 !important;          /* Eliminates the empty 46px whitespace gap */
    }
}


/* Ensure html/body don't scroll when menu is open and don't restrict fixed overlays */
body:has(.is-menu-open) {
    overflow: hidden !important;
}

/* ==========================================================================
   Viewport Pseudo-Element Backdrop Blur
   ========================================================================== */

/* Inject a full-width background pane beneath the open menu container links */
.custom-sticky-header .wp-block-navigation__responsive-container.is-menu-open::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important; /* Positions it below the link text layers */
    
    /* Mix a soft tint with a deep screen blur */
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important; /* Safari layout engine */
    
    pointer-events: none !important;
}


/* FIX: Prevent scrolled header backdrop-filter from trapping fixed children */
.custom-sticky-header:has(.is-menu-open) {
    backdrop-filter: none !important;
    transform: none !important;
    /* We make the header background transparent so the fullscreen overlay handles all the blur */
    background-color: transparent !important;
    box-shadow: none !important;
}


/* Navigation Menu Link Hover Effect */
.wp-block-navigation .wp-block-navigation-item > a:hover,
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary) !important;
    transition: color 0.3s ease;
}

/* ==========================================================================
   All-In-One Fix: Expand and Center Columns inside a Stack
   ========================================================================== */

/* 1. Force the row to take full width and center itself inside the Cover block */
.expanded-columns-row {
    width: 70% !important;
    max-width: 70% !important;
    flex-grow: 1 !important; 
    justify-content: center !important; 
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Center all content (and buttons) horizontally inside each individual column */
.expanded-columns-row .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* Centers the buttons horizontally */
    justify-content: center !important;  /* Centers everything vertically */
    text-align: center !important;       
}

/* 3. Force the buttons to keep their text on a single line (no messy wrapping) */
.expanded-columns-row .wp-block-button__link {
    white-space: nowrap !important; 
}

/* 4. Ensure the button wrapper block lines up correctly in the center */
.expanded-columns-row .wp-block-button {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}


/* ==========================================================================
   Custom Button Styles
   ========================================================================== */

/* 1. White Background, Orange Text */
.wp-block-button.is-style-white-orange .wp-block-button__link {
    background-color: #ffffff;
    color: var(--wp--preset--color--primary);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.wp-block-button.is-style-white-orange .wp-block-button__link:hover {
    font-weight: bold;
    border-color: var(--wp--preset--color--primary);
}

/* 2. Black Glass Blur */
.wp-block-button.is-style-black-glass .wp-block-button__link {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transition: all 0.3s ease;
}
.wp-block-button.is-style-black-glass .wp-block-button__link:hover {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}


/* ==========================================================================
   Tighter Columns Row (expanded-columns-row2)
   ========================================================================== */

.expanded-columns-row2 {
    width: 50% !important; /* Reduced from 70% to bring columns closer */
    max-width: 50% !important;
    flex-grow: 1 !important; 
    justify-content: center !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 15px !important; /* Explicitly tightening the gap between columns */
}

.expanded-columns-row2 .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.expanded-columns-row2 .wp-block-button__link {
    white-space: nowrap !important; 
}

.expanded-columns-row2 .wp-block-button {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ==========================================================================
   Tab items for menu categories.
   ========================================================================== */

/* Container Alignment (Desktop View) */
.menu-tab-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 15px; /* Spaces out the tabs evenly */
    width: 100%;
    margin-bottom: 20px;
}
   
/* Base Tab Styling */
.menu-tab-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 25px;
    border-radius: 12px;
    border: none;
    background-color: #f9f9f9; /* Very slight grey */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    /* Margin removed; relying on container gap instead */
    margin: 0 !important; 
    flex-grow: 0;
}

/* Hover State */
.menu-tab-item:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

.menu-tab-item:hover .tab-text {
    color: var(--wp--preset--color--primary);
}

/* Active/Selected State */
.menu-tab-item.is-active {
    background-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 6px 12px rgba(210, 105, 30, 0.3);
}

.menu-tab-item.is-active .tab-text {
    color: #ffffff !important;
}

.menu-tab-item.is-active img {
    filter: brightness(0) invert(1); /* Turns icon white if it's a dark PNG/SVG */
}

/* Margin resets for WP blocks inside the tab group */
.menu-tab-item figure,
.menu-tab-item p,
.menu-tab-item p.tab-text {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix the alignment in the WordPress Editor */
.editor-styles-wrapper .menu-tab-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* Prevent the Tab Button from taking up 100% width in the backend */
.editor-styles-wrapper .menu-tab-item {
    width: auto !important;
    display: flex !important;
}

/* Mobile Expandable Toggle Button (Hidden on Desktop) */
.mobile-category-toggle {
    display: none;
}

/* Mobile Responsiveness: Expandable Menu Dropdown */
@media (max-width: 768px) {
    /* Reveal the mobile toggle button */
    .mobile-category-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 15px 25px;
        background-color: #ffffff;
        color: var(--wp--preset--color--primary);
        border-radius: 12px;
        border: 1px solid var(--wp--preset--color--primary);
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
        margin-bottom: 15px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

    /* Transform the container into a hidden vertical stack */
    .menu-tab-container {
        flex-direction: column !important;
        align-items: stretch !important;
        display: none !important; /* Hidden until toggled */
        gap: 10px !important;
    }
    
    /* When toggled open via JS */
    .menu-tab-container.is-expanded {
        display: flex !important;
        animation: slideDownFade 0.3s ease forwards;
    }

    /* Reset width for mobile items to stretch fully */
    .menu-tab-item {
        width: 100% !important;
        justify-content: center !important; /* Center contents inside the mobile button */
    }
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Menu Category Content Animation & Layout
   ========================================================================== */

/* The parent container that holds all categories */
.menu-content-wrapper {
    position: relative !important;
    display: block !important;
    margin-top: 40px;
    width: 100%;
}

/* Base style for every category section */
.menu-category-group {
    width: 100%;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;
}

/* When the group is hidden (Handled by JS class removal) */
.menu-category-group:not(.is-active-category) {
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Prevent interaction with hidden elements stacked on top */
    transform: translateY(10px) !important; /* Slight slide down effect when fading out */
    z-index: 0 !important;
}

/* When the group is shown (Handled by JS class injection) */
.menu-category-group.is-active-category {
    position: relative !important; /* Returns it to the document flow so wrapper adopts its height */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 10 !important; /* Bring active layer forward */
}

/* ==========================================================================
   Menu Item Card (Patterns)
   ========================================================================== */
.menu-item-card {
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    margin-bottom: 20px;
}

.menu-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* Fixed width image wrapper so empty space remains if image block is deleted */
.menu-item-image-wrapper {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-height: 80px !important;
    display: flex;
    justify-content: center;
}

.menu-item-card-image img {
    border-radius: 8px;
    object-fit: cover;
}

.menu-item-card-content {
    flex-grow: 1 !important;
    width: 100% !important;
}

.menu-item-header-row {
    width: 100% !important;
    align-items: flex-start !important;
}

.menu-item-card-title {
    margin: 0 !important;
    /* Force inherit to allow WP Editor font choices, defaults to content font */
    font-family: inherit; 
    line-height: 1.2;
}

.menu-item-card-price {
    margin: 0 !important;
    white-space: nowrap; /* Prevent price from wrapping to next line */
    text-align: right;
}

.menu-item-card-desc {
    color: #555555;
    margin: 0 !important;
    line-height: 1.5;
}

/* ==========================================================================
   Menu Items Grid Layout (2 Columns -> 1 Column)
   ========================================================================== */
.menu-items-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important; /* Space between cards */
    padding-left: 20px !important; /* Side padding */
    padding-right: 20px !important;
    width: 100%;
    align-items: stretch; /* Makes cards in the same row equal height */
    padding-bottom: 30px; /* Buffer at bottom of category */
}

/* Force any non-card element (like category titles or empty paragraphs) to span full width 
   so they don't break the 2-column layout */
.menu-items-grid > :not(.menu-item-card) {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Remove margins inside grid since gap handles it, and stretch height. 
   CRITICAL: Strip top margin to prevent WordPress blockGap from pushing down the second column! */
.menu-items-grid .menu-item-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important; 
}

/* Mobile & Tablet view - switch to 1 column */
@media screen and (max-width: 850px) {
    .menu-items-grid {
        grid-template-columns: 1fr !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        gap: 15px !important;
    }
}


/* ==========================================================================
   Contact Form
   ========================================================================== */
.akker-contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: #fdfdfd;
    border-radius: 16px;
    box-shadow: var(--wp--preset--shadow--card-shadow);
    font-family: 'Montserrat', sans-serif !important;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1c1917;
    font-family: 'Montserrat', sans-serif !important;
}

.form-field input, 
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif !important;
    transition: border-color 0.3s ease;
    background-color: #ffffff;
    box-sizing: border-box !important; /* CRITICAL: Prevents padding from causing width overflow/overlap */
}

.form-field input:focus, 
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary);
}

#akker-contact-form button,
.akker-modal-content button[type="submit"] {
    cursor: pointer;
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    width: 100%;
    transition: transform 0.2s ease;
    font-family: 'Montserrat', sans-serif !important;
}

#akker-contact-form button:hover,
.akker-modal-content button[type="submit"]:hover {
    transform: scale(1.02);
}

/* ==========================================================================
   Global Booking Modal
   ========================================================================== */
.akker-modal-overlay {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.akker-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.akker-modal-content {
    background: #fdfdfd;
    width: 90%;
    max-width: 750px; /* Widened for better landscape view */
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important; /* CRITICAL: Prevents padding from causing width overflow on mobile */
}

.akker-modal-overlay.is-open .akker-modal-content {
    transform: translateY(0);
}

.akker-modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.akker-modal-close:hover {
    color: var(--wp--preset--color--primary);
}

/* Two-column layout inside modal */
.form-row-split {
    display: flex;
    gap: 20px; /* Increased gap slightly for wider modal */
}
.form-row-split .form-field {
    flex: 1;
}

/* Date and Time Picker Beautification */
.form-field input[type="date"],
.form-field input[type="time"] {
    position: relative;
    cursor: text;
}

/* Customizing the picker indicator icons */
.form-field input[type="date"]::-webkit-calendar-picker-indicator,
.form-field input[type="time"]::-webkit-calendar-picker-indicator {
    background-color: transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    padding: 5px;
    filter: invert(0.4) sepia(1) saturate(5) hue-rotate(350deg); /* Gives it a slight orange tint */
}

.form-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-field input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Mobile Responsiveness for Modal and Split Rows */
@media screen and (max-width: 768px) {
    .akker-modal-content {
        padding: 30px 20px; /* Less padding on small screens */
    }

    .form-row-split {
        flex-direction: column; /* Stack columns on mobile */
        gap: 0; /* Remove horizontal gap, rely on form-field bottom margin */
    }
}


/* ==========================================================================
   Gallery Items
   ========================================================================== */
/* Gallery Layout Grid Setup */
.gallery-main-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100%;
}

/* Mobile Responsiveness for Gallery */
@media screen and (max-width: 900px) {
    .gallery-main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media screen and (max-width: 600px) {
    .gallery-main-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Card Visual Aesthetics */
.custom-gallery-card {
    border-radius: 12px !important;
    overflow: hidden !important; /* masks the scaling background image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative;
    cursor: pointer;
    margin: 0 !important; 
    min-height: 350px !important; /* Explicitly enforce minimum height */
    height: 100% !important;
}

/* Elevate card depth on hover */
.custom-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* Dark Gradient Overlay - Only visible on Hover */
.custom-gallery-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}
.custom-gallery-card:hover::after {
    opacity: 1;
}

/* Dynamic background scale effect */
.custom-gallery-card .wp-block-cover__image-background {
    transition: transform 0.5s ease !important;
    z-index: 0;
}
.custom-gallery-card:hover .wp-block-cover__image-background {
    transform: scale(1.08);
}

/* Force inner container layout to snap text strictly to the bottom-left */
.custom-gallery-card .wp-block-cover__inner-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Pushes content to the bottom */
    align-items: flex-start !important; /* Pushes content to the left */
    padding: 0 !important;
    z-index: 2; /* Sits above the gradient overlay */
}

/* Remove old structural styling from the content wrapper */
.custom-gallery-content {
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Text Element Hidden Defaults */
.custom-gallery-title, 
.custom-gallery-subtitle {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: left !important;
}

.custom-gallery-subtitle {
    font-size: 0.9rem !important;
    margin-top: 4px !important;
    transition-delay: 0.05s !important;
}

/* Interactive Reveal Action on Hover */
.custom-gallery-card:hover .custom-gallery-title,
.custom-gallery-card:hover .custom-gallery-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Fix Editor View - Force WP to display the grid correctly while editing */
.editor-styles-wrapper .gallery-main-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
/* Gutenberg injects div.wp-block around patterns, we must strip its native width limits */
.editor-styles-wrapper .gallery-main-grid > .wp-block {
    max-width: none !important;
    width: 100% !important;
}
/* Keep text visible inside WP-Admin for easier composition */
.editor-styles-wrapper .custom-gallery-card .custom-gallery-title,
.editor-styles-wrapper .custom-gallery-card .custom-gallery-subtitle {
    opacity: 0.7;
    transform: none;
}
/* Show gradient overlay permanently in editor so text is readable */
.editor-styles-wrapper .custom-gallery-card::after {
    opacity: 1 !important;
}

/* Empty State Handling Style */
/* ==========================================================================
   FAQ Accordion / Cards
   ========================================================================== */
.akker-faq-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 20px 25px;
    margin-bottom: 15px !important;
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.akker-faq-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.akker-faq-card summary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1c1917;
    cursor: pointer;
    outline: none;
    list-style: none; /* Hide default browser arrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hide default browser arrow specifically for Webkit */
.akker-faq-card summary::-webkit-details-marker {
    display: none; 
}

/* Custom Animated Plus/Cross Icon */
.akker-faq-card summary::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: var(--wp--preset--color--primary);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Rotate to an 'X' when the accordion is open */
.akker-faq-card[open] summary::after {
    transform: rotate(45deg);
    color: #666666;
}

.akker-faq-card p {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    color: #555555;
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}