/*
Theme Name: Foran Pet Care 2026
Description: Block theme proof-of-concept for foranpetcare.ie — full Site Editor support, theme.json design system, Block Bindings and Interactivity API. Successor to the classic Foran Pet Care theme.
Author: Connolly's Red Mills
Version: 0.4.2
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: foranpetcare-2026
*/

/* Sticky nav — the header sticks as a whole with a negative top offset
   (--foran-nav-offset, measured by assets/header.js) so the utility bar
   slides away naturally and only the nav row stays pinned. Everything
   remains in document flow, so engaging is seamless — no jump, no
   height compensation. The admin-bar var keeps the pinned nav clear of
   the toolbar when logged in; is-sticky only carries the shadow. */
.site-header {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--foran-nav-offset, 0px));
    z-index: 99;
}

/* Below 600px core makes the admin bar position:absolute — it scrolls
   away with the page — so the pinned nav belongs at the very top. */
@media screen and (max-width: 600px) {
    .site-header {
        top: calc(0px - var(--foran-nav-offset, 0px));
    }
}

.is-sticky .site-nav-row {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* CVE dashboard sidebar: the Page List is auto-generated from the page
   tree; show only the dashboard's direct children */
.fp-cve-sidebar .wp-block-page-list ul {
    display: none;
}

.fp-cve-sidebar .wp-block-page-list {
    list-style: none;
    padding-left: 0;
}

.fp-cve-sidebar .wp-block-page-list > li {
    margin-bottom: 0.5rem;
    font-weight: 700;
}

/* Header polish: keep the nav row on one line at desktop widths and
   give the search box sane proportions */
@media (min-width: 1100px) {
    .site-nav-row > .wp-block-group {
        flex-wrap: nowrap;
    }

    .site-nav-row .wp-block-navigation {
        flex-wrap: nowrap;
    }
}

.site-nav-row .wp-block-search__inside-wrapper {
    background: #fff;
    border: 0;
    border-radius: 999px;
    padding: 3px 3px 3px 14px;
    align-items: center;
}

.site-nav-row .wp-block-search__input {
    border: 0;
    outline: none;
    background: transparent;
    padding: 0.3em 0.4em 0.3em 0;
    font: inherit;
    font-size: 0.95rem;
    min-width: 0;
    color: var(--wp--preset--color--ink);
}

.site-nav-row .wp-block-search__button {
    border: 0;
    background: var(--wp--preset--color--brand-pink);
    color: #fff;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.site-nav-row .wp-block-search__button svg {
    fill: currentColor;
    width: 18px;
    height: 18px;
}

.site-nav-row .wp-block-search__button:hover {
    background: var(--wp--preset--color--brand-pink-dark);
}

/* Nav icons — the classic theme's foran-pet-care icon font; the
   fp-nav-dog/fp-nav-cat classes come from the foran/mega-menu items.
   Glyphs and colours match the classic theme (style.css:4282-4313). */
@font-face {
    font-family: 'foran-pet-care';
    src: url('./fonts/foran-pet-care.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.fp-nav-dog > .wp-block-navigation-item__content::before,
.fp-nav-cat > .wp-block-navigation-item__content::before {
    font-family: 'foran-pet-care';
    font-weight: 400;
    color: #f8afbb;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35em;
    line-height: 1;
}

.fp-nav-dog > .wp-block-navigation-item__content::before {
    content: "\e91f";
    font-size: 33px;
}

.fp-nav-cat > .wp-block-navigation-item__content::before {
    content: "\e91e";
    font-size: 27px;
}

/* Top-level nav items: prod-style separators, even padding, no wrap.
   Sizes tuned so the eight items plus the search box fit the 1266px
   row on one line. */
.site-nav-row .wp-block-navigation__container {
    gap: 0;
}

.site-nav-row .wp-block-navigation__container > .wp-block-navigation-item {
    padding: 0.3em 0.85em;
    font-size: 0.95rem;
    white-space: nowrap;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.site-nav-row .wp-block-navigation__container > .wp-block-navigation-item:first-child {
    border-left: 0;
    padding-left: 0;
}

/* Mega menu panels are positioned against the nav row and span its
   full content width (panel mechanics live in the blocks plugin).
   Core puts position:relative on the navigation list; neutralise it
   here so the nav row is the panels' containing block (core submenus
   are unaffected — they position against their own list item). */
.site-nav-row {
    position: relative;
}

.site-nav-row .wp-block-navigation,
.site-nav-row .wp-block-navigation__container,
.site-nav-row .wp-block-navigation__responsive-container:not(.is-menu-open),
.site-nav-row .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.site-nav-row .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
    position: static;
}

.fp-mega__panel {
    width: min(1266px, 100vw);
}

/* Panel content wraps normally (the nav items above set nowrap). */
.fp-mega__panel {
    white-space: normal;
}

/* Breadcrumbs (Yoast block) on the product templates. */
.yoast-breadcrumb {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.yoast-breadcrumb a {
    text-decoration: none;
}

/* Pod images are the classic theme originals; prod served them through
   a resizer at 183px, so constrain them the same here. */
.fp-mega__pods .wp-block-image img {
    max-width: 183px;
    height: auto;
}