@import url('root.css');

/* Nav items use width:100% together with their own padding (e.g. the mobile
   menu's "a, button { display:block; width:100%; padding:14px 15px; }" rule
   below) - without border-box, that padding adds on top of the 100% width
   instead of being carved out of it, so every row renders wider than its
   container and spills past the right edge. Scoped to .site-nav so it can't
   affect box-sizing anywhere else on the site. */
.site-nav,
.site-nav * {
    box-sizing: border-box;
}

body {
    background-color: var(--10);
    color: var(--8);
    font-family: var(--poppins);
    margin: 0;
    padding: 0;
    z-index: 999;
}

/* Header / Navigation styles */
.site-header {
    background-color: var(--10);
    color: var(--8);
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
    height: 90px;
    position: relative;
    z-index: 500;
}

.site-header .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
}

.site-nav .nav-links li a{
    color: var(--8);
}

.site-logo img {
    height: 68px;
    width: auto;
    border-radius: 6px;
}

.site-nav .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
}

.site-nav .nav-links a {
    color: var(--8);
    text-decoration: none;
    font-family: var(--poppins);
    font-weight: 600;
    font-size: 21px;
}

.site-nav .nav-links button{
    font-family: var(--poppins);
    font-weight: 600;
    font-size: 21px;
}

.site-nav .nav-links .nav-cart {
    align-items: center;
    background: transparent;
    border: 0;
    color: #1C1F21;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
    position: relative;
    text-decoration: none;
}

/* Wraps just the icon so the count badge (absolutely positioned) always
   anchors to the icon itself, not to .nav-cart - which on mobile stretches
   into a full-width row (padding + width:100% from the generic nav-links
   a/button rule), pulling a badge positioned via .nav-cart into the far
   corner of that row instead of sitting on the icon. */
.nav-cart-icon-wrap {
    display: inline-flex;
    position: relative;
}

.nav-cart-icon {
    display: block;
    height: 34px;
    object-fit: contain;
    width: 34px;
}

.nav-cart-count {
    align-items: center;
    background: var(--14);
    border: 2px solid var(--hard-white);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--hard-white);
    display: inline-flex;
    font-family: var(--poppins);
    font-size: 0.8rem;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    left: auto;
    right: -9px;
    min-width: 24px;
    padding: 0 6px;
    position: absolute;
    top: -9px;
    z-index: 2;
}

.nav-cart-count.is-empty {
    background: var(--silver);
}

.site-nav .nav-links a:hover {
    opacity: 0.9;
}

.site-nav .nav-links .btn-florist {
    /* !important on background specifically: the screenshot from testing shows
       this rendering white/cream at rest, not red - meaning something with
       equal-or-higher specificity than this 3-class selector is winning
       somewhere I don't have visibility into (another stylesheet loaded on
       that particular page, most likely). !important forces this to win
       regardless of what that turns out to be. */
    background: var(--2) !important;
    color: var(--10);
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 21px;
    /* A dark outline instead of picking black vs. white: whichever color the
       background glitches to (red, pink, white, transparent), white text with
       this outline stays legible against all of them, so there's no longer a
       "wrong" text color to chase depending on background state. */
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.55);
}

.site-nav .nav-links .nav-dropdown-toggle.btn-florist {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    white-space: nowrap;
}

.nav-toggle {
    background: transparent;
    border: 0;
    display: none;
    z-index: 40;
    margin-left: auto;
    padding-right:4px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background .15s ease, box-shadow .15s ease;
}

/* :focus-visible instead of :focus - a tap/click still counts as "focused" but
   isn't keyboard navigation, so :focus alone was showing this ring on every
   phone tap. :focus-visible keeps the ring for real keyboard users without
   painting it on touch/mouse activation. */
.nav-toggle:focus {
    outline: none;
}

.nav-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(28,152,237,0.08);
}

.nav-toggle:hover {
    background: rgba(6,10,14,0.03);
}

.nav-toggle .hamburger {
    width: 30px;
    height: 3px;
    background: #1c1f21;
    display: block;
    position: relative;
    border-radius: 3px;
    transition: background .18s ease, transform .22s cubic-bezier(.4,0,.2,1);
}

.nav-toggle .hamburger:before,
.nav-toggle .hamburger:after {
    content: '';
    position: absolute;
    left: 0;
    width: 30px;
    height: 3px;
    background: #1c1f21;
    border-radius: 3px;
    transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
    transform-origin: center;
}

.nav-toggle .hamburger:before {
    transform: translateY(-10px);
}

.nav-toggle .hamburger:after {
    transform: translateY(10px);
}

.nav-toggle[aria-expanded="true"] .hamburger {
    background: transparent;
}
.nav-toggle[aria-expanded="true"] .hamburger:before {
    transform: translateY(0) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger:after {
    transform: translateY(0) rotate(-45deg);
}

/* Both children are display:none on desktop already; display:contents just
   keeps this wrapper from adding an empty box of its own to the header-inner
   flex row. */
.mobile-header-actions {
    display: contents;
}

/* Floating cart icon. Hidden at rest on desktop, where the cart stays inline
   inside .nav-links - the mobile-only "visible at rest" state is set inside
   the max-width:767px media query below. On every viewport, though, this
   becomes a fixed bottom-right button once the page scrolls past the
   threshold in header2.php (desktop's header isn't sticky, so without this
   the inline cart icon would just scroll out of view and stay gone). */
.mobile-header-cart {
    display: none;
}

.mobile-header-cart.is-fixed {
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    bottom: 20px;
    box-shadow: 0 10px 24px rgba(6, 10, 14, 0.3);
    display: inline-flex;
    justify-content: center;
    padding: 10px;
    position: fixed;
    right: 18px;
    z-index: 600;
}

@media (max-width: 767px) {
    .site-header {
        height: 72px;
        position: sticky;
        top: 0;
        z-index: 500;
        /* backdrop-filter removed: it's a well-known trigger for Android Chrome
           mis-painting nearby content whenever something under/near it reflows -
           which is exactly when the Join The Foundry button's background/text
           was glitching (any dropdown open/close reflows the whole nav-links
           panel this header contains). Losing the frosted-glass blur is the
           trade-off for the header no longer corrupting paint on Android. */
        box-shadow: 0 10px 24px rgba(6, 10, 14, 0.08);
    }

    .site-header .header-inner {
        padding: 10px 12px;
    }

    .site-logo img {
        height: 52px;
    }

    .nav-toggle {
        display: block;
        z-index: 40;
        margin-left: 0;
        padding: 8px 0px 8px 8px;
    }

    /* Holds the margin-left:auto that pins the cart+hamburger pair to the right
       edge of the header. Keeping it on this wrapper (rather than on
       .mobile-header-cart) means the push stays put even once the cart is taken
       out of the flow by .is-fixed on scroll - only the wrapper's own width
       shrinks to just the hamburger, its right edge doesn't move. */
    .mobile-header-actions {
        align-items: center;
        display: flex;
        gap: 10px;
        margin-left: auto;
    }

    .mobile-header-cart {
        align-items: center;
        color: #1C1F21;
        display: inline-flex;
        justify-content: center;
        opacity: 1;
        position: relative;
        text-decoration: none;
        transition: opacity .15s ease;
        z-index: 40;
    }

    /* Phone view only: fixed cart sits higher up the screen (20vh from top)
       instead of bottom-anchored, so it doesn't collide with thumb-reach UI
       or a mobile browser's own bottom bar. */
    .mobile-header-cart.is-fixed {
        /* top: 100vh; */
        bottom: 15px;
    }

    /* Hidden instead of removed while the full-screen mobile menu is open, so it
       can't visually collide with (or sit on top of) that panel. */
    .mobile-header-cart.is-menu-open {
        opacity: 0;
        pointer-events: none;
    }

    /* Mobile full-screen menu panel */
    .site-nav .nav-links {
        position: fixed;
        left: 10px;
        right: 10px;
        top: 76px;
        max-height: 0;
        height: auto;
        background: linear-gradient(180deg, #ffffff 0%, #fdf8f2 100%);
        padding: 0 10px;
        border-radius: 20px;
        border: 1px solid rgba(6, 10, 14, 0.08);
        flex-direction: column;
        display: flex;
        align-items: stretch;
        gap: 10px;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 20px 50px rgba(6,10,14,0.22);
        transition: max-height .3s ease, transform .22s ease, opacity .18s ease;
        transform: translateY(-8px);
        opacity: 0;
        z-index: 120;
    }

    .site-nav .nav-links.open {
        max-height: calc(100vh - 92px);
        padding: 14px 10px 16px;
        overflow-y: auto;
        transform: translateY(0);
        opacity: 1;
    }

    .site-nav .nav-links li {
        margin: 0;
        width: 100%;
    }

    .site-nav .nav-links a,
    .site-nav .nav-links button {
        display: block;
        width: 100%;
        padding: 14px 15px;
        border-radius: 14px;
        text-align: left;
        color: var(--dusty-charcoal);
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(6, 10, 14, 0.05);
        font-size: 17px;
        font-weight: 700;
    }

    .site-nav .nav-links a:hover,
    .site-nav .nav-links button:hover {
        background: rgba(255, 255, 255, 0.98);
    }

    /* Moved to .mobile-header-cart in the header bar on phone view - hidden here
       so it doesn't also show up inside the dropdown menu. */
    .site-nav .nav-links .nav-cart {
        display: none;
    }

    .nav-cart-icon {
        height: 28px;
        width: 28px;
    }

    .site-nav .nav-links .btn-florist {
        font-size: 17px;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }

    /* The generic ".site-nav .nav-links button" rule above forces display:block and
       doesn't touch the toggle's inline-flex layout, so the arrow pseudo-element and
       label text end up sharing cramped, unwrapped space. Applies to every dropdown
       toggle (Join The Foundry AND Login) so both arrows line up the same way. */
    .site-nav .nav-links .nav-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        white-space: normal;
        text-align: left;
    }

    /* Ensure dropdowns expand full-width inside mobile menu. Scoped with the extra
       ".site-nav .nav-links" ancestry (instead of the bare ".nav-dropdown-menu" used
       further down for the desktop/absolute version) purely so this in-flow mobile
       layout always outranks that later rule regardless of source order - without
       it, the desktop position:absolute/top:calc(100% + 0.75rem) version was winning
       on mobile too, which is why the dropdown panel floated over the toggle/next
       menu item instead of pushing them down in place. */
    .site-nav .nav-links .nav-dropdown-menu {
        position: relative;
        z-index: 1;
        right: auto;
        left: 0;
        top: 0;
        min-width: 100%;
        margin-top: 3px;
        box-shadow: none;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .site-nav .nav-links .nav-dropdown-menu a {
        padding-left: 14px;
        padding-right: 14px;
        background: rgba(6, 10, 14, 0.04);
    }
}

 .nav-dropdown {
    position: relative;
  }

  .nav-dropdown-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.45rem;
    padding: 0;
  }

  .nav-dropdown-toggle::after {
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
  }

    .nav-dropdown-toggle.btn-florist::after {
        border-top-color: var(--hard-white);
    }

  .nav-dropdown.is-open .nav-dropdown-toggle::after {
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.14);
    display: none;
    min-width: 220px;
    padding: 0.5rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 25;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    border-radius: 8px;
    color: #1f1f1f;
    display: block;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus {
    background: #f5f1eb;
  }

  .nav-dropdown-label {
    color: #7a6d5d;
    display: block;
    font-size: 0.8rem;
  }

  @media (max-width: 768px) {
    .header-image {
        filter: invert(100%);
        margin-top: -10px !important;
    }
}

.arrow-indicator-image img{
    position: absolute;
    margin-top: 18px;
}

@media (max-width: 767px) {
    .arrow-indicator-image {
        display: none;
    }
}

@media (min-width: 1400px){
    .arrow-indicator-image img{
    position: absolute;
    left: 70%;
    transform: translateX(-70%);
}
}