/*
* Feast and Find, Header Styles
* Stitch 2.0 brand kit: frosted glass nav, Plus Jakarta Sans
*/
/* ── Sticky header, frosted glass ─────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: var(--ff-z-sticky);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--ff-shadow-nav);
transition: box-shadow var(--ff-ease-normal);
/* Breathing room around the larger logo + nav. Astra's Header-Builder
padding stacks with this; total vertical whitespace = Astra padding
+ 14 px × 2 from here. Shrinks on mobile where space is tight. */
padding-block: 14px;
}
@media (max-width: 768px) {
.site-header { padding-block: 10px; }
}
/* ── Site logo (CSS image replacement on Astra's .site-title) ──────
*
* Astra's Header Builder renders the site title as:
* Feast and Find
*
* Astra bypasses the WordPress custom-logo filter pipeline (it validates
* theme_mod_custom_logo as a real attachment ID), so we swap the logo at
* the CSS layer instead of via PHP filters. The inner becomes a
* sized background-image pointing at the live SVG; the text content stays
* in the DOM for screen readers and SEO but is pushed off-screen visually
* via text-indent + overflow:hidden.
*
* If a future dev uploads a logo via WP Customizer instead, these rules
* won't conflict, Astra renders the custom-logo wrapper (.custom-logo-link)
* rather than .site-title, so a different element entirely is styled.
*/
.site-header .site-title {
/* Reset Astra's text typography, the child will paint the SVG. */
margin: 0;
line-height: 1;
}
.site-header .site-title a {
display: inline-block;
/* Fixed visual size + flexible content: width + height define the
background-image's rendered box; background-size:contain preserves
the SVG's intrinsic aspect inside that box. 320×76 is 1.6× the
original 200×48, clearly larger than the launch size but shrunk
from the 400×96 "2× pass" which was pushing Contact off the nav
row at 1280-px viewports. Still reads as a premium-sized mark. */
width: 320px;
max-width: 100%;
height: 76px;
background-image: url('../img/feast-and-find-logo.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
/* Accessible text hiding: content stays in the DOM (screen readers
still read "Feast and Find", search engines still see the wordmark
in the ), but text is pushed 100% to the right and clipped so
it's never visible. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
text-decoration: none;
}
/* When a future Customizer-uploaded logo is set, Astra emits a
.custom-logo-link wrapper, vertical-center it against the
sticky header height. Defensive; inert until a real logo is set. */
.ast-site-identity .custom-logo-link,
.site-header .custom-logo-link {
display: inline-flex;
align-items: center;
}
@media (max-width: 768px) {
.site-header .site-title a {
width: 280px;
height: 66px;
}
}
@media (max-width: 480px) {
.site-header .site-title a {
width: 220px;
height: 52px;
}
}
/* ── Primary navigation ────────────────────────────────── */
/* Force the menu to stay on one row at every desktop width. The flex-wrap
+ white-space pair is defense-in-depth: the individual item widths are
sized to fit, and these rules catch any browser font-metric variance
that would otherwise push Contact to a second line. */
.main-header-menu {
flex-wrap: nowrap;
}
.main-header-menu .menu-item > a {
font-family: var(--wp--preset--font-family--primary);
/* 17 px, clearly larger than the launch size, still fits all 7 items
on one row alongside the 320-px logo at 1200-px+ viewports. */
font-size: 17px;
font-weight: 500;
color: var(--ff-stone);
letter-spacing: 0.35px;
text-decoration: none;
/* Tightened horizontal padding (was 1 rem, now 0.625 rem), reclaims
~84 px across 7 items so the full menu fits on one row without
dropping the 17-px text size. Vertical padding unchanged. */
padding: 0.625rem 0.625rem;
border-radius: var(--ff-radius);
/* Prevent multi-word items like "Ship Guides" / "Cruise Essentials"
from wrapping internally if the parent container ever pinches. */
white-space: nowrap;
transition: color var(--ff-ease-fast), background var(--ff-ease-fast);
}
.main-header-menu .menu-item > a:hover {
color: var(--ff-ocean);
background: var(--ff-slate);
}
/* Active-state highlighting. The `nav_menu_css_class` filter in
* inc/navigation.php marks the menu item matching the current URL as
* `current-menu-item`, and marks any prefix-match (e.g. /essentials/ when
* viewing /essentials/cabin-selection-guide/) as `current-menu-ancestor`.
* Styling both lets the nav highlight stay visible on child URLs too. */
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a,
.main-header-menu .current-menu-parent > a {
color: var(--ff-ocean);
font-weight: 600;
}
/* Subtle underline so the active state is visible in brand contexts where
* ocean is already the default nav color (e.g. on a pale hero background).
* Keeps the link text stable, the stroke is drawn below the baseline. */
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a {
position: relative;
}
.main-header-menu .current-menu-item > a::after,
.main-header-menu .current-menu-ancestor > a::after {
content: "";
position: absolute;
left: 0.625rem;
right: 0.625rem;
bottom: 2px;
height: 2px;
background: var(--ff-coral);
border-radius: 1px;
}
/* ── CTA button in nav ─────────────────────────────────── */
.main-header-menu .ff-nav-cta > a {
background: var(--ff-coral);
color: var(--ff-white) !important;
border-radius: 9999px;
padding: 0.5rem 1.25rem;
font-weight: 600;
}
.main-header-menu .ff-nav-cta > a:hover {
background: var(--ff-coral-dark);
}
/* ── Mobile header ─────────────────────────────────────── */
@media (max-width: 921px) {
.site-header {
position: sticky;
}
.main-header-menu .menu-item > a {
padding: 0.875rem 1.25rem;
border-bottom: 1px solid var(--ff-border);
border-radius: 0;
}
.main-header-menu .menu-item:last-child > a {
border-bottom: none;
}
}