/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==========================================================================
   1. GLOBAL COLOR VARIABLES
   ========================================================================== */
:root {
    --fanta-pink: #DF7D72;  /* Main Accent */
    --fanta-green: #004E4C; /* Alt Accent */
    --fanta-brown: #513D3A; /* Main Text */
    --fanta-white: #F5ECD9; /* Alt Text / Backgrounds */
}

/* ==========================================================================
   2. DYNAMIC HEADER (TRANSPARENT TO SOLID)
   ========================================================================== */

/* --- Base Setup & Admin Bar Override --- */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    background-color: transparent !important;
    box-shadow: none;
    pointer-events: none;
}
body.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px !important; }
}
.site-header .inside-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Layout: logo left, items centred, Reserve right (desktop) --- */
@media (min-width: 769px) {
    .site-header .inside-header { display: flex; align-items: center; }
    .site-header .main-navigation { flex: 1; }
    .site-header .inside-navigation.grid-container {
        max-width: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0;
    }
    .site-header .main-nav { flex: 1; }
    .site-header .main-nav > ul {
        display: flex;
        align-items: center;
        width: 100%;
    }
    .site-header .main-nav > ul > li:first-child { margin-left: auto; }
    .site-header .main-nav > ul > li.nav-btn-solid { margin-left: auto; }
}

/* --- Fade-in nav items --- */
.site-header .main-nav > ul > li,
.site-header .site-logo,
.site-header .mobile-menu-control-wrapper {
    opacity: 0;
    transform: translateY(-25px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}
.site-header.is-at-top .main-nav > ul > li,
.site-header.nav-active .main-nav > ul > li,
.site-header.nav-active .site-logo,
.site-header.nav-active .mobile-menu-control-wrapper {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.site-header.nav-active { pointer-events: auto; }

/* --- Solid background on scroll / mobile open --- */
.mobile-menu-open .site-header,
.site-header.is-scrolled.nav-active {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* --- Logo --- */
.site-header .site-logo img {
    width: 145px;
    transition: height 0.4s ease;
}

/* --- Nav text colour (white) + link transitions --- */
.main-navigation .main-nav ul li a {
    color: var(--fanta-white);
}
.site-header .main-nav > ul > li > a {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}
.main-navigation a,
.main-navigation .menu-item,
.main-navigation .menu-toggle { cursor: pointer !important; }

/* --- Nav buttons: pill shape (Reserve Now, etc.) --- */
.site-header .main-nav > ul > li.nav-btn-solid,
.site-header .main-nav > ul > li.nav-btn-outline {
    display: flex;
    align-items: center;
}
.site-header .main-nav > ul > li.nav-btn-solid > a,
.site-header .main-nav > ul > li.nav-btn-outline > a {
    border-radius: 999px;
    padding: 10px 22px;
    line-height: 1;
}
.site-header .main-nav > ul > li.nav-btn-solid > a {
    background-color: var(--fanta-white);
    color: var(--fanta-pink);
}
.site-header .main-nav > ul > li.nav-btn-outline > a {
    border: 2px solid var(--fanta-white);
    color: var(--fanta-white);
}
.site-header .main-nav > ul > li.nav-btn-solid > a:hover {
    background-color: var(--fanta-pink);
    color: var(--fanta-white);
}

/* Outline button recolour on scroll (on the pink bar) */
.site-header.is-scrolled .main-nav > ul > li.nav-btn-outline a {
    border-color: var(--fanta-brown) !important;
    color: var(--fanta-brown) !important;
}
.site-header.is-scrolled .main-nav > ul > li.nav-btn-outline a:hover {
    background-color: var(--fanta-brown) !important;
    color: var(--fanta-white) !important;
}

/* --- Sub-navigation dropdown: coral card (desktop only, no border) --- */
@media (min-width: 769px) {
    .main-navigation .main-nav > ul > li > ul {
        background-color: var(--fanta-pink);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(0,0,0,0.18);
        left: 50%;
        transform: translateX(-50%);
    }
    .main-navigation .main-nav > ul > li:hover > ul,
    .main-navigation .main-nav > ul > li:focus-within > ul {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- Mobile menu toggle (hamburger) --- */
body #masthead button.menu-toggle,
body #mobile-header button.menu-toggle {
    color: var(--fanta-white);
    font-size: 24px;
    padding: 0;
}
body #masthead.is-scrolled button.menu-toggle,
body #mobile-header.is-scrolled button.menu-toggle { color: var(--fanta-brown); }
body #masthead button.menu-toggle:hover,
body #mobile-header button.menu-toggle:hover { color: #ffffff; }

/* --- Mobile panel: centring, colour, caret & spacing --- */
@media (max-width: 768px) {
    /* Centre all items, tighter vertical rhythm */
    .main-navigation .main-nav ul li a {
        text-align: center;
        padding: 10px 20px;
    }
    /* White text on the menu items (not the pill) */
    .main-navigation .main-nav ul li:not(.nav-btn-solid):not(.nav-btn-outline) a {
        color: var(--fanta-white) !important;
    }
    /* Parent item: centre the label + caret together (flex, not text-align) */
    .main-navigation .menu-item-has-children {
        display: flex;
        justify-content: center;
        align-items: center;
		flex-direction: column;
    }
    .main-navigation .menu-item-has-children > a {
        display: inline-block;
        width: auto;
        padding-right: 6px;
    }
    .main-navigation .dropdown-menu-toggle {
        position: static !important;
        display: inline-block;
        width: auto;
        padding: 0 4px;
        vertical-align: middle;
    }
    /* Sub-menu: centred white rounded box, compact */
    .main-navigation .sub-menu {
        max-width: 80%;
        margin: 8px auto;
        padding: 6px 0;
		border: 2px solid var(--fanta-white) !important;
    	border-radius: 15px;
    }
    .main-navigation .sub-menu a { padding: 8px 20px; }
    /* Reserve pill: centred + spacing above */
    .main-navigation .main-nav ul li.nav-btn-solid {
        justify-content: center;
        margin-top: 12px;
    }
    /* Let the menu scroll so Reserve is always reachable */
    .main-navigation .main-nav {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-bottom: 30px;
    }
}

/* ==========================================================================
   3. JS GALLERY SCROLL & PARALLAX
   ========================================================================== */

#gallery-row-1, 
#gallery-row-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    transition: none !important; 
    will-change: transform;
}

/* Note: Consider replacing the auto-generated .gb-element- class with a custom class like .gallery-wrapper in your block settings! */
.gb-element-46f2346f {
    overflow: hidden !important;
    width: 100%;
    position: relative;
}

#gallery-row-1 img, 
#gallery-row-2 img {
    flex-shrink: 0 !important;
    width: 25vw !important; 
    height: auto;
}

.parallax-bg {
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
    pointer-events: none;
}

/* ==========================================================================
   4. FANTA MASONRY GRID (CSS GRID VERSION)
   ========================================================================== */

.fanta-masonry-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(200px, 22vw, 320px);
    gap: 5px;
    width: 100%;
}

.fanta-masonry-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}

.fanta-masonry-grid img.masonry-span-2 {
    grid-column: span 2;
}

.fanta-masonry-grid img.masonry-span-v2 {
    grid-row: span 2;
}

@media (max-width: 1024px) {
    .fanta-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fanta-masonry-grid img.masonry-span-v2 {
        grid-row: span 1;
    }
}

@media (max-width: 767px) {
    .fanta-masonry-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 260px;
    }
    .fanta-masonry-grid img.masonry-span-2 {
        grid-column: span 1;
    }
}

/* ==========================================================================
   5. PAGE-SPECIFIC HEADER OVERRIDES (COMMENTED OUT)
   ========================================================================== */

/* body.single-post .site-header.nav-active,
body.blog .site-header.nav-active,
body.archive .site-header.nav-active,
body.page-id-XXX .site-header.nav-active {
    background-color: var(--fanta-white) !important; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
}

body.single-post .site-header .main-nav > ul > li:not(.nav-btn-solid):not(.nav-btn-outline) > a,
body.blog .site-header .main-nav > ul > li:not(.nav-btn-solid):not(.nav-btn-outline) > a,
body.archive .site-header .main-nav > ul > li:not(.nav-btn-solid):not(.nav-btn-outline) > a,
body.page-id-XXX .site-header .main-nav > ul > li:not(.nav-btn-solid):not(.nav-btn-outline) > a {
    color: var(--fanta-brown) !important;
}

body.single-post .site-header .main-nav > ul > li.nav-btn-outline a,
body.blog .site-header .main-nav > ul > li.nav-btn-outline a,
body.archive .site-header .main-nav > ul > li.nav-btn-outline a,
body.page-id-XXX .site-header .main-nav > ul > li.nav-btn-outline a {
    border-color: var(--fanta-brown) !important;
    color: var(--fanta-brown) !important;
}
*/

.page-id-21791 .main-navigation .main-nav ul li a {
	color: var(--fanta-brown) !important;
}

/* ==========================================================================
   6. MENU OPTIONS ICON STYLES
   ========================================================================== */

.menu-badge-container {
    display: flex;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.menu-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: bold;
    color: #444;
    text-transform: uppercase;
}

.menu-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

.menu-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-legend-label {
    font-size: 14px;
    color: #444;
}

.vo  { background-color: #e5c396; }
.gf  { background-color: #f2d1d1; }
.v   { background-color: #a9d9a9; }
.gfo { background-color: #add8e6; }

/* ==========================================================================
   7. Custom CSS
   ========================================================================== */

/* Private Dining & Catering Page */

.catering-cta a {
  color: #DC6F5E;
}
.catering-cta a:hover,
.catering-cta a:focus {
  color: #BE5645;
}

/* accordion */

.fanta-accordion {
    border-bottom: 1px solid #838383 !important; 
    padding:20px !important; 
}

.fanta-accordion p {
	margin: 20px 0 0;
}

.fanta-accordion summary {
    list-style: none !important; list-style-type: none !important;
    font-size: 1.1rem !important; 
    font-weight: 500 !important;
    cursor: pointer !important; display: flex !important;
    justify-content: space-between !important; align-items: center !important;
}

.fanta-accordion ul {
	margin: 1rem 0 1.5em 2em;
}

@media (min-width: 769px) {
    .fanta-accordion { padding: 20px 0 !important }
    .fanta-accordion summary { font-size: 1.25rem !important; } 
}

.fanta-accordion summary::-webkit-details-marker { 
    display: none !important; 
}

.fanta-inquiry {
  --fanta-brown: #4a3633;
  --fanta-coral: #d97a72;
  --fanta-muted: #7a6a66;
  color: var(--fanta-brown);
}

.fanta-inquiry .nf-form-fields-required { display: none; }

.fanta-inquiry .fanta-form-heading,
.fanta-inquiry .fanta-form-subheading {
  margin: 0;
  text-align: center;
  color: var(--fanta-brown);
}
.fanta-inquiry .fanta-form-heading { font-size: clamp(32px, 4vw, 46px); margin-bottom: 16px; }
.fanta-inquiry .fanta-form-subheading { font-size: clamp(22px, 2.6vw, 28px); margin: 28px 0 8px; }

.fanta-inquiry .nf-field-container { margin-bottom: 28px; }

.fanta-inquiry .nf-field-label label {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--fanta-brown);
}
.fanta-inquiry .ninja-forms-req-symbol { color: var(--fanta-brown); }
.fanta-inquiry .nf-field-description,
.fanta-inquiry .nf-field-description p {
  font-size: 12px;
  font-style: italic;
  color: var(--fanta-muted);
  margin: 0 0 8px;
}

.fanta-inquiry .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.fanta-inquiry .nf-form-content select {
  height: 40px;
  padding: 0 2px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fanta-brown) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fanta-brown);
  font-size: 15px;
}
.fanta-inquiry .nf-form-content input:focus,
.fanta-inquiry .nf-form-content select:focus,
.fanta-inquiry .nf-form-content textarea:focus {
  outline: none;
  border-color: var(--fanta-coral) !important;
}

.fanta-inquiry .nf-form-content textarea {
  height: 120px;
  padding: 12px;
  background: transparent !important;
  border: 1px solid var(--fanta-brown) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 15px;
  resize: vertical;
}

.fanta-inquiry .listradio-wrap ul li,
.fanta-inquiry .listcheckbox-wrap ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px !important;
}
.fanta-inquiry .listradio-wrap li label,
.fanta-inquiry .listcheckbox-wrap li label {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 400;
  color: var(--fanta-brown);
}
.fanta-inquiry .listradio-wrap li label::before,
.fanta-inquiry .listradio-wrap li label::after,
.fanta-inquiry .listcheckbox-wrap li label::before,
.fanta-inquiry .listcheckbox-wrap li label::after {
  display: none !important;
}

.fanta-inquiry .nf-form-content input[type="radio"],
.fanta-inquiry .nf-form-content input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 12px !important;
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--fanta-brown) !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer;
}
.fanta-inquiry .nf-form-content input[type="radio"]:checked,
.fanta-inquiry .nf-form-content input[type="checkbox"]:checked {
  background: var(--fanta-coral) !important;
  border-color: var(--fanta-coral) !important;
  box-shadow: inset 0 0 0 2px #f5ebdc;
}

.fanta-inquiry .fanta-pills ul { display: flex; gap: 8px; }
.fanta-inquiry .fanta-pills .nf-form-content input[type="radio"],
.fanta-inquiry .fanta-pills input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
}
.fanta-inquiry .fanta-pills li label {
  padding: 6px 16px;
  border: 1px solid var(--fanta-brown);
  border-radius: 999px;
  font-size: 13px !important;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.fanta-inquiry .fanta-pills input:checked + label {
  background: var(--fanta-brown);
  color: #f5ebdc;
}

.fanta-inquiry .fanta-form-label {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
}
.fanta-inquiry .fanta-consent { margin-top: -14px; }
.fanta-inquiry .fanta-consent .field-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px;
}
.fanta-inquiry .fanta-consent .nf-field-element {
  order: 1;
  flex: 0 0 auto;
  width: auto !important;
}
.fanta-inquiry .fanta-consent .nf-field-label {
  order: 2;
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
}
.fanta-inquiry .fanta-consent .nf-field-label label {
  margin: 0;
  padding: 0 !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: var(--fanta-muted);
}
.fanta-inquiry .fanta-consent .nf-field-label label::before,
.fanta-inquiry .fanta-consent .nf-field-label label::after {
  display: none !important;
}
.fanta-inquiry .fanta-consent .ninja-forms-req-symbol { display: none; }
.fanta-inquiry .fanta-consent .nf-form-content input[type="checkbox"],
.fanta-inquiry .fanta-consent input[type="checkbox"] {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 11px !important;
  width: 11px !important;
  min-width: 11px !important;
  height: 11px !important;
  margin: 5px 0 0 !important;
  border-radius: 2px !important;
}

.fanta-inquiry .fanta-submit .nf-field-element { text-align: center; }
.fanta-inquiry .fanta-submit input[type="submit"],
.fanta-inquiry .fanta-submit input[type="button"] {
  height: auto;
  padding: 14px 34px !important;
  background: var(--fanta-coral) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s;
}
.fanta-inquiry .fanta-submit input[type="submit"]:hover,
.fanta-inquiry .fanta-submit input[type="button"]:hover {
  opacity: .85;
}

@media (max-width: 600px) {
  .fanta-inquiry .nf-field-container.one-half {
    width: 100%;
    margin-left: 0;
    float: none;
  }
}

.fanta-inquiry .fanta-recaptcha .nf-field-element {
  display: flex;
  justify-content: center;
}