element is told to grow and fill any leftover vertical space, pushing the footer down to the bottom. ----------------------------------------------------------------------- */ body { display: flex; flex-direction: column; min-height: 100%; } .site-main { flex: 1 0 auto; /* grow to fill available space, don't shrink below content size */ } /* ----------------------------------------------------------------------- SITE HEADER Sticks to the top of the viewport while scrolling ("position: sticky") so the navigation/cart/search icons are always reachable -- important on long technical articles where a reader may want to jump to search or the cart without scrolling all the way back up. ----------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; /* sits above page content but below the mobile nav overlay/mini-cart flyout, which use a higher z-index -- see components.css for those values */ background-color: var(--color-white); /* A soft drop shadow reads as a cleaner, more "lifted" edge than a flat 1px border -- reusing the same --shadow-card token already used on post/product cards (tokens.css), rather than inventing a one-off shadow value, so the header's elevation matches the rest of the site's visual language. */ box-shadow: var(--shadow-card); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); position: relative; /* gives the absolutely-positioned .header-search-form dropdown below a reference point to anchor to */ } /* ----------------------------------------------------------------------- SITE BRANDING (logo / site title fallback) IMPORTANT BUG FIX: the_custom_logo() (see template-parts/header/ site-branding.php) prints whatever size image was uploaded in Appearance > Customize > Site Identity, completely unconstrained -- without a rule like the one below, a large uploaded logo file renders at its full raw pixel size and can dwarf the entire header. Capping its height (and letting width scale proportionally) is what keeps the header a consistent, sane size no matter what gets uploaded. ----------------------------------------------------------------------- */ .site-branding { display: flex; align-items: center; flex-shrink: 0; /* never let the logo get squeezed by a long nav menu on a narrower screen */ } .site-branding img { max-height: 44px; width: auto; /* scale width proportionally as height is capped, so the logo never looks stretched */ display: block; } /* Plain-text fallback, only shown if no logo has been uploaded yet (see the has_custom_logo() check in site-branding.php) -- styled to look like an intentional wordmark rather than default browser text. */ .site-title { font-size: var(--text-h4); margin-bottom: 0; line-height: 1; } .site-title a { color: var(--color-black); text-decoration: none; } .site-description { font-size: var(--text-caption); /* tagline = meta text, per the theme's font-size rule */ color: var(--color-gray-600); margin-bottom: 0; } .header-actions { display: flex; align-items: center; gap: var(--space-3); } .header-actions button { background: none; border: none; border-radius: 50%; padding: var(--space-2); cursor: pointer; position: relative; /* anchors the .cart-count badge, positioned below */ transition: background-color 0.15s ease; } /* A soft circular hover/focus background -- previously these buttons had no hover feedback at all, which read as unfinished/unpolished next to the rest of the site's interactive elements. */ .header-actions button:hover, .header-actions button:focus-visible { background-color: var(--color-blue-100); } .header-actions svg { width: 22px; height: 22px; } .cart-count { position: absolute; top: -2px; right: -2px; background-color: var(--color-blue-600); color: var(--color-white); font-size: 0.65rem; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } /* The expandable header search form (see header-actions.php and nav-toggle.js) drops down below the header as a small floating panel, rather than permanently taking up space in the header row. */ .header-search-form { position: absolute; top: 100%; right: 0; left: 0; background-color: var(--color-white); border-bottom: 1px solid var(--color-gray-200); padding: var(--space-4); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); } /* ----------------------------------------------------------------------- PRIMARY NAVIGATION Mobile: the