/* ============================================================
   TGWS Media — Main Stylesheet
   Base styles live in style.css (theme header + reset + utilities).
   This file: components, layout, header, footer, cards, sections.
   ============================================================ */

/* Ensure [hidden] always wins over any display:flex/block rules below */
[hidden] { display: none !important; }

/* ── Site Header ─────────────────────────────────────────── */
.site-header {
    position:      sticky;
    top:           0;
    z-index:       900;
    background:    var(--nav-bg, #ffffff);
    box-shadow:    0 1px 0 rgba(255,255,255,.06);
}
.site-header .container { height: 72px; }

.site-header__logo a,
.site-header__logo-text {
    font-family:     var(--font-heading);
    font-size:       1.5rem;
    font-weight:     700;
    color:           var(--nav-text, #d0d9e3);
    text-decoration: none;
    letter-spacing:  -.01em;
}
.site-header__logo img { max-height: 52px; width: auto; }

/* Nav Menu */
.nav-menu {
    display:     flex;
    align-items: center;
    gap:         .15rem;
}
.nav-menu li { position: relative; }
.nav-menu a {
    padding:     .5rem 1rem;
    font-family: var(--nav-font-family, 'Inter', sans-serif);
    font-size:   var(--nav-font-size, 15px);
    font-weight: 600;
    color:       var(--nav-text, #d0d9e3);
    border-radius: var(--radius-sm);
    transition:  background var(--transition), color var(--transition);
    letter-spacing: .01em;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
    background: rgba(255,255,255,.08);
    color:      var(--nav-active, #c8a96e);
}

/* Dropdown */
.nav-menu .sub-menu {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    min-width:     180px;
    background:    var(--nav-bg, #0d1b2e);
    border:        1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-md);
    padding:       .5rem 0;
    z-index:       100;
}
.nav-menu li:hover > .sub-menu { display: block; }
.nav-menu .sub-menu a {
    display:       block;
    padding:       .6rem 1.25rem;
    border-radius: 0;
    white-space:   nowrap;
}

/* Header actions */
.site-header__actions { display: flex; align-items: center; gap: .75rem; }

.site-header__search-toggle,
.site-header__cart {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--nav-text, #d0d9e3);
    padding:       .4rem;
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    transition:    color var(--transition);
}
.site-header__search-toggle:hover,
.site-header__cart:hover { color: var(--nav-active, #c8a96e); }

.cart-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           18px;
    height:          18px;
    background:      var(--nav-active, #c8a96e);
    color:           var(--color-white);
    font-size:       .65rem;
    font-weight:     600;
    border-radius:   50%;
    margin-left:     -6px;
    margin-top:      -10px;
}

/* Hamburger */
.site-header__hamburger {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        .5rem;
}
.site-header__hamburger span {
    display:        block;
    width:          22px;
    height:         2px;
    background:     var(--nav-text, #d0d9e3);
    border-radius:  2px;
    transition:     transform var(--transition), opacity var(--transition);
}
.site-header__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__hamburger.is-open span:nth-child(2) { opacity: 0; }
.site-header__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search bar */
.site-header__search-bar {
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.08);
    padding:    1rem 0;
}
.site-header__search-bar form {
    display: flex;
    gap:     .5rem;
}
.site-header__search-bar input {
    flex:          1;
    padding:       .6rem 1rem;
    border:        1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    font-family:   var(--font-body);
    font-size:     .95rem;
    background:    rgba(255,255,255,.08);
    color:         var(--nav-text, #d0d9e3);
    outline:       none;
    transition:    border-color var(--transition);
}
.site-header__search-bar input::placeholder { color: rgba(255,255,255,.4); }
.site-header__search-bar input:focus { border-color: var(--nav-active, #c8a96e); }
.site-header__search-bar button {
    padding:       .6rem 1.25rem;
    background:    var(--nav-active, #c8a96e);
    color:         var(--color-white);
    border:        none;
    border-radius: var(--radius-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
}
.site-header__search-bar button:hover { background: var(--color-accent-dark); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
    position:            relative;
    min-height:          430px;
    display:             flex;
    align-items:         center;
    background-color:    var(--color-primary);
    background-image:    linear-gradient(135deg, #1a1a1a 0%, #2e2012 50%, #1a1a1a 100%);
    background-size:     cover;
    background-position: center;
}
.hero__overlay {
    position:   absolute;
    inset:      0;
}
.hero__bg-picture {
    position: absolute;
    inset:    0;
    display:  block;
    width:    100%;
    height:   100%;
}
.hero__bg-img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
}
.hero__content {
    position:   relative;
    z-index:    1;
    color:      var(--color-white);
    max-width:  640px;
    padding:    4rem 1.5rem;
}
.hero__heading-img-wrap {
    margin-bottom: 1.25rem;
}
.hero__heading-img {
    display:   block;
    max-width: 100%;
    height:    auto;
}
.hero__subtext {
    font-size:     1.2rem;
    opacity:       .9;
    margin-bottom: 2rem;
}
.hero__cta { font-size: 1rem; }

/* ── Featured Cards ─────────────────────────────────────── */
.featured-cards { background: var(--color-bg); }

.featured-card {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    padding:          2rem;
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background:       var(--color-bg);
    transition:       transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    text-decoration:  none;
}
.featured-card:hover {
    transform:    translateY(-4px);
    box-shadow:   var(--shadow-md);
    border-color: var(--color-accent);
}
.featured-card__icon {
    color:         var(--color-accent);
    margin-bottom: 1rem;
}
.featured-card__title {
    font-size:     1.3rem;
    margin-bottom: .5rem;
}
.featured-card__desc {
    color:         var(--color-text-muted);
    font-size:     .9rem;
    flex:          1;
    margin-bottom: 1.25rem;
    line-height:   1.6;
}
.featured-card__link {
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--color-accent);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Cards (Video & Recipe shared) ──────────────────────── */
.card {
    display:          flex;
    flex-direction:   column;
    border-radius:    var(--radius-md);
    overflow:         hidden;
    background:       var(--color-bg);
    border:           none;
    transition:       transform var(--transition), box-shadow var(--transition);
}
.card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card__media {
    display:       block;
    position:      relative;
    overflow:      hidden;
    background:    var(--color-secondary);
    border-radius: var(--radius-md);
}
.card__media img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform .4s ease;
}
.card:hover .card__media img { transform: scale(1.04); }

.card__media-placeholder {
    width:            100%;
    height:           100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       var(--color-secondary);
    color:            var(--color-text-muted);
}

/* Play icon overlay on video and show cards */
.card__play-icon {
    position:    absolute;
    inset:       0;
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  rgba(0,0,0,0);
    color:       var(--color-white);
    transition:  background var(--transition);
    opacity:     0;
}
.card--video:hover .card__play-icon,
.card--show:hover .card__play-icon {
    opacity:    1;
    background: rgba(0,0,0,.35);
}
.card__play-icon svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

.card__duration {
    position:      absolute;
    bottom:        .5rem;
    right:         .5rem;
    background:    rgba(0,0,0,.75);
    color:         var(--color-white);
    font-size:     .75rem;
    padding:       .15rem .45rem;
    border-radius: var(--radius-sm);
    font-weight:   600;
}

.card__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; text-align: center; }

.card__tag {
    display:        inline-block;
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-accent);
    margin-bottom:  .5rem;
}

.card__title {
    font-size:     1.05rem;
    margin-bottom: .5rem;
    flex:          1;
    line-height:   1.35;
}
.card__title a:hover { color: var(--color-accent); }

.card__meta {
    font-size: .8rem;
    color:     var(--color-text-muted);
}

.card__excerpt {
    font-size:     .88rem;
    color:         var(--color-text-muted);
    margin-bottom: .75rem;
    line-height:   1.55;
    display:       -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.card__stats {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
    margin-top: .75rem;
}
.card__stats li {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    font-size:   .78rem;
    color:       var(--color-text-muted);
}

/* ── Section Shared ──────────────────────────────────────── */
.section-header { margin-bottom: 1.5rem; }
.section-footer { margin-top: 1.5rem; }

/* ── Newsletter Form (shared base) ──────────────────────── */
.newsletter-form { position: relative; }

/* ── Newsletter Strip ────────────────────────────────────── */
.newsletter-strip__heading {
    font-size:     2.25rem;
    color:         var(--color-white);
    margin-bottom: .75rem;
}
.newsletter-strip__sub {
    color:         rgba(255,255,255,.75);
    margin-bottom: 2rem;
    font-size:     1.05rem;
}

.newsletter-form__row {
    display:      flex;
    gap:          .75rem;
    flex-wrap:    wrap;
    justify-content: center;
    max-width:    640px;
    margin:       0 auto;
}
.newsletter-form__row input {
    flex:          1;
    min-width:     200px;
    padding:       .75rem 1rem;
    border:        1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-sm);
    background:    rgba(255,255,255,.1);
    color:         var(--color-white);
    font-family:   var(--font-body);
    font-size:     .95rem;
    outline:       none;
    transition:    border-color var(--transition);
}
.newsletter-form__row input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-form__row input:focus { border-color: var(--color-accent); }

.newsletter-form--footer .newsletter-form__row input,
.newsletter-form--popup .newsletter-form__row input {
    background: var(--color-bg);
    color:      var(--color-text);
    border-color: var(--color-border);
}
.newsletter-form--footer .newsletter-form__row input::placeholder,
.newsletter-form--popup .newsletter-form__row input::placeholder {
    color: var(--color-text-muted);
}

/* Honeypot — off-screen so real users never see it */
.newsletter-form__hp {
    position:       absolute;
    left:           -9999px;
    width:          1px;
    height:         1px;
    overflow:       hidden;
    opacity:        0;
    pointer-events: none;
}

.newsletter-form__message {
    margin-top: .75rem;
    font-size:  .88rem;
    color:      rgba(255,255,255,.85);
}
.newsletter-form__message.is-error { color: #f87171; }

/* ── Popup Banner ────────────────────────────────────────── */
.popup-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    z-index:         9999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem;
    backdrop-filter: blur(4px);
}

/* Split panel container */
.popup {
    display:       flex;
    max-width:     860px;
    width:         100%;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    0 20px 60px rgba(0,0,0,.3);
}

/* Left: white form panel */
.popup__left {
    flex:           1;
    background:     #fff;
    padding:        3.5rem 3rem 3rem;
    display:        flex;
    flex-direction: column;
    position:       relative;
    min-width:      0;
}

/* Close X — top-right of left panel */
.popup__close {
    position:      absolute;
    top:           1rem;
    right:         1rem;
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--color-text-muted);
    padding:       .35rem;
    border-radius: var(--radius-sm);
    transition:    color var(--transition);
    line-height:   1;
}
.popup__close:hover { color: var(--color-primary); }

.popup__heading {
    font-size:     2.2rem;
    font-weight:   800;
    line-height:   1.15;
    color:         var(--color-primary);
    margin-bottom: 1rem;
    margin-top:    1.5rem;
}
.popup__body {
    font-size:     .95rem;
    color:         var(--color-text-muted);
    line-height:   1.65;
    margin-bottom: 2rem;
}

/* Form: stacked full-width inputs + dark button */
.popup .newsletter-form__row {
    flex-direction: column;
    gap:            .85rem;
    max-width:      none;
    margin:         0;
}
.popup .newsletter-form__row input {
    width:         100%;
    padding:       .9rem 1rem;
    background:    #fff;
    color:         var(--color-text);
    border:        1.5px solid #d4d4d4;
    border-radius: var(--radius-sm);
    font-size:     1rem;
    font-family:   var(--font-body);
    transition:    border-color var(--transition);
}
.popup .newsletter-form__row input::placeholder { color: #aaa; }
.popup .newsletter-form__row input:focus {
    border-color: var(--color-primary);
    outline:      none;
}
.popup .newsletter-form__row .btn {
    width:          100%;
    padding:        1rem;
    background:     var(--color-primary);
    color:          #fff;
    border:         none;
    border-radius:  var(--radius-sm);
    font-size:      .82rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background var(--transition);
}
.popup .newsletter-form__row .btn:hover { background: #000; }
.popup .newsletter-form__message { color: var(--color-text-muted); margin-top: .5rem; }
/* Must come after the rule above so it wins the cascade at equal specificity */
.popup .newsletter-form__message.is-error { color: #e53e3e; }

/* "No Thanks." dismiss link */
.popup__no-thanks {
    display:         block;
    width:           100%;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      center;
    margin-top:      1.25rem;
    font-size:       .88rem;
    color:           var(--color-text-muted);
    font-family:     var(--font-body);
    transition:      color var(--transition);
}
.popup__no-thanks:hover { color: var(--color-primary); }

/* Right: image panel */
.popup__right {
    flex:                1;
    background-color:    var(--color-secondary);
    background-size:     cover;
    background-position: center;
    min-height:          480px;
}

/* ── Archive / Taxonomy / Page Banner ───────────────────────── */
.archive-banner {
    position:        relative;
    min-height:      420px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    background:      #0d1b2e;
}
.archive-banner__bg {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
}
.archive-banner__content {
    position:       relative;
    z-index:        1;
    text-align:     center;
    padding-top:    3rem;
    padding-bottom: 3rem;
}
.archive-banner__title {
    font-family:        var(--font-heading);
    font-size:          clamp(3.5rem, 11vw, 7.5rem);
    font-weight:        800;
    line-height:        1;
    color:              #fff;
    text-transform:     uppercase;
    letter-spacing:     .04em;
    text-shadow:        4px 4px 24px rgba(0,0,0,.55);
    -webkit-text-stroke: 2px var(--color-accent, #c8a96e);
}
.archive-banner__desc {
    margin-top:    1rem;
    font-size:     1.1rem;
    color:         rgba(255,255,255,.85);
    max-width:     600px;
    margin-left:   auto;
    margin-right:  auto;
}
.archive-banner--no-image {
    min-height:  auto;
    background:  var(--nav-bg, #0d1b2e);
}
.archive-banner--no-image .archive-banner__title {
    font-size:           clamp(2rem, 6vw, 3.5rem);
    -webkit-text-stroke: 0;
    text-shadow:         none;
}
.archive-banner--no-image .archive-banner__desc {
    color: rgba(255,255,255,.75);
}
@media (max-width: 768px) {
    .archive-banner            { min-height: 150px; }
    .archive-banner__content   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .archive-banner__title     { font-size: clamp(1.75rem, 8vw, 3rem); -webkit-text-stroke: 1px var(--color-accent, #c8a96e); }
    .archive-banner__desc      { font-size: .95rem; }
}

.no-results {
    text-align:  center;
    color:       var(--color-text-muted);
    padding:     4rem 0;
    font-size:   1.1rem;
}

/* ── Single Post ─────────────────────────────────────────── */
.single-post { width: 100%; }

/* Full-width hero banner */
.single-post__hero {
    width:    100%;
    height:   480px;
    overflow: hidden;
}
.single-post__hero-img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
}

/* Two-column layout */
.single-post__layout {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   3rem;
    padding:               2.5rem 0 4rem;
    align-items:           start;
}

.single-post__sidebar {
    position: sticky;
    top:      calc(72px + 1.5rem);
}

.single-post__header { margin-bottom: 2rem; }
.single-post__title  { font-size: 2.5rem; margin: .75rem 0 .5rem; }
.single-post__meta   { color: var(--color-text-muted); font-size: .9rem; }

.single-post__video-embed {
    position:      relative;
    padding-top:   56.25%;
    margin-bottom: 2.5rem;
    border-radius: var(--radius-md);
    overflow:      hidden;
}
.single-post__video-embed iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}

.single-post__thumbnail {
    border-radius: var(--radius-md);
    overflow:      hidden;
    margin-bottom: 2.5rem;
}
.single-post__thumbnail img { width: 100%; height: auto; }

.single-post__content {
    font-size:   1.05rem;
    line-height: 1.75;
}
.single-post__content h2,
.single-post__content h3 { margin: 2rem 0 .75rem; }
.single-post__content p  { margin-bottom: 1.25rem; }
.single-post__content ul,
.single-post__content ol {
    margin-left:   1.5rem;
    margin-bottom: 1.25rem;
}
.single-post__content ul li { list-style: disc; }
.single-post__content ol li { list-style: decimal; }
.single-post__content img  {
    border-radius: var(--radius-md);
    margin:        1.5rem 0;
}

/* Responsive YouTube / video embeds inserted via the block editor */
.entry-content .wp-block-embed { margin: 1.5rem 0; }
.entry-content .wp-block-embed__wrapper {
    position:    relative;
    padding-top: 56.25%; /* 16:9 */
    overflow:    hidden;
    border-radius: var(--radius-md);
}
.entry-content .wp-block-embed__wrapper iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}

/* Related posts sidebar */
.related-posts__heading {
    font-size:      1.2rem;
    font-weight:    700;
    color:          var(--color-accent);
    margin-bottom:  1.25rem;
    padding-bottom: .75rem;
    border-bottom:  2px solid var(--color-border);
}

.related-post-card {
    display:        block;
    margin-bottom:  1.5rem;
    color:          var(--color-text);
    transition:     opacity var(--transition);
}
.related-post-card:last-child { margin-bottom: 0; }
.related-post-card:hover      { opacity: .8; }

.related-post-card__thumb {
    border-radius: var(--radius-md);
    overflow:      hidden;
    margin-bottom: .6rem;
}
.related-post-card__thumb img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform var(--transition);
}
.related-post-card:hover .related-post-card__thumb img { transform: scale(1.03); }

.related-post-card__title {
    font-size:   .92rem;
    font-weight: 700;
    line-height: 1.4;
    color:       var(--color-primary);
    text-align: center;
}

/* Recipe stats bar */
.recipe-stats {
    display:       flex;
    gap:           1.5rem;
    flex-wrap:     wrap;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       1.25rem 1.75rem;
    margin-bottom: 2rem;
}
.recipe-stats__item { text-align: center; }
.recipe-stats__label {
    display:   block;
    font-size: .75rem;
    color:     var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .2rem;
}
.recipe-stats__value {
    font-size:   1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

/* ── Recipe Sidebar (archive, taxonomy, single) ──────────── */

/* Archive two-column layout */
.archive-with-sidebar {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   3rem;
    align-items:           start;
}
.archive-with-sidebar__aside {
    position: sticky;
    top:      calc(72px + 1.5rem);
}

/* Sidebar shell */
.recipe-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}
.recipe-sidebar__body {
    display:        flex;
    flex-direction: column;
    gap:            1.75rem;
}

/* Mobile sidebar toggle (hidden on desktop) */
.recipe-sidebar__mobile-toggle {
    display:        none;
    width:          100%;
    align-items:    center;
    gap:            .6rem;
    padding:        .8rem 1rem;
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    font-family:    var(--font-body);
    font-size:      .95rem;
    font-weight:    600;
    color:          var(--color-white, #d0d9e3);
    cursor:         pointer;
    transition:     background var(--transition), border-color var(--transition), color var(--transition);
    text-align:     left;
    margin-top: 15px;
}
.recipe-sidebar__mobile-toggle:hover {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        var(--color-white);
}
.recipe-sidebar__toggle-chevron {
    margin-left: auto;
    transition:  transform .25s ease;
    flex-shrink: 0;
}
.recipe-sidebar__mobile-toggle[aria-expanded="true"] .recipe-sidebar__toggle-chevron {
    transform: rotate(180deg);
}
.recipe-sidebar__mobile-toggle[aria-expanded="true"] {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        var(--color-white);
}

.recipe-sidebar__widget {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       1.25rem 1.5rem;
}

.recipe-sidebar__title {
    font-size:      .85rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
    margin-bottom:  1rem;
    padding-bottom: .6rem;
    border-bottom:  1px solid var(--color-border);
}

/* Search form */
.recipe-search-form {
    display: flex;
    gap:     .5rem;
}
.recipe-search-form__input {
    flex:          1;
    min-width:     0;
    padding:       .55rem .85rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family:   var(--font-body);
    font-size:     .9rem;
    background:    var(--color-bg);
    color:         var(--color-text);
    outline:       none;
    transition:    border-color var(--transition);
}
.recipe-search-form__input::placeholder { color: var(--color-text-muted); }
.recipe-search-form__input:focus        { border-color: var(--color-accent); }
.recipe-search-form__btn {
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       .55rem .75rem;
    background:    var(--color-accent);
    color:         var(--color-white);
    border:        none;
    border-radius: var(--radius-sm);
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background var(--transition);
}
.recipe-search-form__btn:hover { background: var(--color-accent-dark); }

/* Category list — scrollable for any number of categories */
.recipe-cat-list-wrap {
    max-height:      260px;
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
    margin:          0 -.25rem;
    padding:         .1rem .25rem;
}
.recipe-cat-list-wrap::-webkit-scrollbar       { width: 4px; }
.recipe-cat-list-wrap::-webkit-scrollbar-track { background: transparent; }
.recipe-cat-list-wrap::-webkit-scrollbar-thumb {
    background:    rgba(255,255,255,.2);
    border-radius: 4px;
}

.recipe-cat-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        2px;
}

/* Use --nav-text so names are always readable on the dark surface */
.recipe-cat-list__link {
    display:         flex;
    align-items:     center;
    gap:             .6rem;
    padding:         .5rem .65rem;
    border-radius:   var(--radius-sm);
    font-size:       .9rem;
    font-weight:     500;
    color:           var(--color-white, #d0d9e3);
    transition:      background var(--transition), color var(--transition);
    text-decoration: none;
}
.recipe-cat-list__link:hover {
    background: rgba(255,255,255,.07);
    color:      var(--color-accent);
}
.recipe-cat-list__item--active .recipe-cat-list__link {
    background:  var(--color-accent);
    color:       #fff;
    font-weight: 700;
}
.recipe-cat-list__dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(255,255,255,.3);
    flex-shrink:   0;
    transition:    background var(--transition);
}
.recipe-cat-list__link:hover .recipe-cat-list__dot {
    background: var(--color-accent);
}
.recipe-cat-list__item--active .recipe-cat-list__dot {
    background: rgba(255,255,255,.8);
}
.recipe-cat-list__name {
    flex:          1;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.recipe-cat-list__count {
    font-size:     .72rem;
    font-weight:   700;
    color:         inherit;
    flex-shrink:   0;
    background:    rgba(255,255,255,.12);
    padding:       .1rem .45rem;
    border-radius: 999px;
    line-height:   1.5;
    opacity:       .85;
}
.recipe-cat-list__item--active .recipe-cat-list__count,
.recipe-cat-list__link:hover   .recipe-cat-list__count {
    background: rgba(255,255,255,.2);
    opacity:    1;
}
.recipe-cat-list__item--hidden { display: none; }

/* Category filter input */
.cat-filter {
    position:      relative;
    margin-bottom: .85rem;
}
.cat-filter__icon {
    position:      absolute;
    left:          .7rem;
    top:           50%;
    transform:     translateY(-50%);
    color:         var(--color-text-muted);
    pointer-events: none;
    flex-shrink:   0;
}
.cat-filter__input {
    width:       100%;
    padding:     .5rem .85rem .5rem 2.1rem;
    border:      1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size:   .875rem;
    background:  var(--color-bg);
    color:       var(--color-text);
    outline:     none;
    transition:  border-color var(--transition), box-shadow var(--transition);
    box-sizing:  border-box;
}
.cat-filter__input::placeholder { color: var(--color-text-muted); }
.cat-filter__input:focus {
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.cat-filter__no-results {
    font-size:  .85rem;
    color:      var(--color-text-muted);
    text-align: center;
    padding:    .5rem 0 .25rem;
    margin:     0;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination { margin-top: 3rem; }
.pagination__list {
    display:         flex;
    justify-content: center;
    gap:             .4rem;
    flex-wrap:       wrap;
}
.pagination__item a,
.pagination__item span {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-width:        40px;
    height:           40px;
    padding:          0 .75rem;
    border-radius:    var(--radius-sm);
    border:           1px solid var(--color-border);
    font-size:        .9rem;
    font-weight:      500;
    transition:       background var(--transition), color var(--transition), border-color var(--transition);
    background:       var(--color-bg);
}
.pagination__item a:hover,
.pagination__item .current {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        var(--color-white);
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg, #0d1b2e); color: var(--footer-text, #d0d9e3); }

/* Newsletter strip */
.site-footer__strip {
    background: var(--footer-strip-bg, #c8a96e);
    padding:    1.5rem 0;
}
.site-footer__strip-inner {
    display:     flex;
    align-items: center;
    gap:         2rem;
    flex-wrap:   wrap;
}
.site-footer__strip-label {
    font-size:      20px;
    font-weight:    600;
    color:          var(#ffffff);
    white-space:    nowrap;
    flex-shrink:    0;
}
.site-footer__strip .newsletter-form { flex: 1; }
.site-footer__strip .newsletter-form__row { justify-content: flex-start; flex-wrap: nowrap; }

/* Remove the base centred max-width so the row and message share the same left edge */
.newsletter-form--footer-strip .newsletter-form__row { max-width: none; margin: 0; }

/* Message colours on the gold strip background */
.newsletter-form--footer-strip .newsletter-form__message {
    color:       #fff;
    font-weight: 500;
}
.newsletter-form--footer-strip .newsletter-form__message.is-error {
    color:       var(--color-primary, #0d1b2e);
    font-weight: 700;
}

/* Strip form inputs — outlined on coloured background */
.newsletter-form--footer-strip .newsletter-form__row input {
    background:   transparent;
    border:       1.5px solid #ffffff;
    color:        var(--color-primary, #ffffff);
    min-width:    0;
}
.newsletter-form--footer-strip .newsletter-form__row input::placeholder {
    color: rgba(0,0,0,.45);
}
.newsletter-form--footer-strip .newsletter-form__row input:focus {
    border-color: var(--color-primary, #0d1b2e);
    outline: none;
}
.newsletter-form--footer-strip .btn {
    background:   var(--color-primary, #0d1b2e);
    color:        #fff;
    border-color: var(--color-primary, #0d1b2e);
    white-space:  nowrap;
    flex-shrink:  0;
}
.newsletter-form--footer-strip .btn:hover {
    background:   rgba(0,0,0,.75);
}

/* Main body */
.site-footer__main { padding: 4rem 0 3rem; }

/* Brand centered */
.site-footer__brand-top {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    margin-bottom:  3rem;
}
.site-footer__logo-text {
    font-family:    var(--font-heading);
    font-size:      1.8rem;
    font-weight:    700;
    color:          var(--color-white);
    display:        block;
    margin-bottom:  1rem;
    letter-spacing: -.01em;
}
/* flex wrapper so the block-level <img> centers correctly */
.site-footer__logo {
    display:         flex;
    justify-content: center;
    margin-bottom:   1.25rem;
}
.site-footer__logo img { max-height: 64px; width: auto; filter: brightness(0) invert(1); }
.site-footer__tagline {
    font-size:   1rem;
    line-height: 1.75;
    color:       rgba(255,255,255,.65);
    max-width:   600px;
    margin:      0 auto;
}

/* 2-col grid */
.site-footer__cols {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   3rem;
    max-width:             800px;
    margin:                0 auto;
}
.site-footer__col-title {
    font-size:      1rem;
    font-weight:    700;
    color:          var(--color-white);
    margin-bottom:  1.25rem;
}

/* Social list: icon + label */
.site-footer__social-list { list-style: none; }
.site-footer__social-list li + li { margin-top: .75rem; }
.site-footer__social-list a {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    color:           rgba(255,255,255,.8);
    font-size:       25px;
    font-weight:     400;
    transition:      color var(--transition);
    text-decoration: none;
}
.site-footer__social-list a svg {
    flex-shrink: 0;
    width:       30px;
    height:      30px;
    transition:  color var(--transition);
}
.site-footer__social-list a:hover { color: var(--color-white); }

/* Quick links list */
.footer-nav-list li { border-bottom: 1px dashed #dddddd; }
.footer-nav-list li:first-child { border-top: 1px dashed #dddddd; }
.footer-nav-list a {
    display:     block;
    padding:     .6rem 0;
    font-size:   25px;
    color:       rgba(255,255,255,.7);
    transition:  color var(--transition);
    font-weight: bold;
}
.footer-nav-list a:hover { color: var(--color-white); }

/* Bottom bar */
.site-footer__bottom {
    border-top: 1px dashed #dddddd;
    padding:    1.5rem 0;
}
.site-footer__bottom-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .25rem;
    text-align:      center;
}
.site-footer__bottom-inner p {
    font-size: .82rem;
    color:     rgba(255,255,255,.4);
    margin:    0;
}

.legal-nav-list {
    display: flex;
    gap:     1.5rem;
}
.legal-nav-list a {
    font-size:  .82rem;
    color:      rgba(255,255,255,.45);
    transition: color var(--transition);
}
.legal-nav-list a:hover { color: rgba(255,255,255,.8); }

/* ── Search Results ──────────────────────────────────────── */
.search-results-header { padding: 3rem 0 2rem; }
.search-results-header h1 { font-size: 2rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero__heading-img { max-width: 90%; }
}

@media (max-width: 768px) {
    .site-header__hamburger { display: flex; }

    .site-header__nav {
        display:       none;
        position:      absolute;
        top:           72px;
        left:          0;
        right:         0;
        background:    var(--nav-bg, #0d1b2e);
        border-bottom: 1px solid rgba(255,255,255,.08);
        box-shadow:    var(--shadow-md);
        padding:       1rem 1.5rem;
        z-index:       800;
    }
    .site-header__nav.is-open { display: block; }

    .nav-menu { flex-direction: column; align-items: flex-start; gap: .25rem; }
    .nav-menu a { padding: .65rem .5rem; width: 100%; }
    .nav-menu .sub-menu {
        position:  static;
        box-shadow: none;
        border:     none;
        padding:    0 0 0 1rem;
        display:    block;
    }

    .hero {
        display:    block;
        position:   relative;
        min-height: 280px;
    }
    .hero__bg-picture {
        position: absolute;
        inset:    0;
        width:    100%;
        height:   100%;
    }
    .hero__bg-img {
        position:        absolute;
        inset:           0;
        width:           100%;
        height:          100%;
        object-fit:      cover;
        object-position: center;
    }
    .hero__overlay {
        position: absolute;
        inset:    0;
    }
    .hero__content {
        position:        absolute;
        inset:           0;
        display:         flex;
        flex-direction:  column;
        justify-content: center;
        max-width:       none;
        padding:         0rem 5rem;
        z-index:         2;
    }
    .hero__heading-img {
        max-width: 80%;
        height:    auto;
    }
    .hero__subtext { font-size: 1rem; }
    .site-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer__strip-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .site-footer__strip .newsletter-form__row { flex-wrap: wrap; }
    /* Popup: image on top, form below on mobile */
    .popup { flex-direction: column; max-height: 90vh; overflow-y: auto; }
    .popup__right { min-height: 200px; order: -1; }
    .popup__left { padding: 2rem 1.5rem 1.5rem; }
    .newsletter-strip__heading { font-size: 1.75rem; }
    .newsletter-strip .newsletter-form__row { display: block; max-width: 100%; }
    .newsletter-strip .newsletter-form__row input,
    .newsletter-strip .newsletter-form__row .btn {
        display:      block;
        width:        100%;
        margin-top:   .75rem;
        margin-left:  auto;
        margin-right: auto;
    }
    .single-post__hero         { height: 260px; }
    .single-post__layout       { grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem 0 3rem; }
    .single-post__sidebar      { position: static; }
    .single-post__title        { font-size: 1.75rem; }
    .recipe-stats { gap: 1rem; }
    .archive-with-sidebar      { grid-template-columns: 1fr; }
    .archive-with-sidebar__aside {
        position: static;
        order:    -1;
    }
    .recipe-sidebar__mobile-toggle { display: flex; }
    .recipe-sidebar__body          { display: none; }
    .recipe-sidebar__body.is-open  { display: flex; }

    .newsletter-form--footer-strip .newsletter-form__row input {
        min-width: 100%;
    }
    .newsletter-form--footer-strip .btn {
        margin: 0px auto;
    }
}

@media (max-width: 480px) {
    .hero__heading-img { max-width: 100%; }
}

/* ── Featured Post Block (after hero, mirrors featrmedia.com) ── */
.fp-block {
    padding:    4rem 0;
    background: var(--color-bg);
}

.fp-block__grid {
    display:               grid;
    grid-template-columns: 65% 1fr;
    gap:                   3.5rem;
    align-items:           start;
}

/* Main large post */
.fp-main__img-link {
    display:       block;
    border-radius: var(--radius-md);
    overflow:      hidden;
    margin-bottom: 1.5rem;
}

.fp-main__img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform .4s ease;
}

.fp-main__img-link:hover .fp-main__img { transform: scale(1.02); }

.fp-main__img-placeholder {
    width:         100%;
    height:        240px;
    background:    var(--color-secondary);
    border-radius: var(--radius-md);
}

.fp-main__title {
    font-size:     1.6rem;
    font-weight:   700;
    line-height:   1.3;
    margin-bottom: .5rem;
}

.fp-main__title a:hover { color: var(--color-accent); }

.fp-main__date {
    font-size:     .82rem;
    color:         var(--color-text-muted);
    margin-bottom: .75rem;
}

.fp-main__excerpt {
    font-size:     .95rem;
    color:         var(--color-text-muted);
    line-height:   1.65;
    margin-bottom: 1rem;
}

.fp-main__read-more {
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--color-accent);
    transition:  color var(--transition);
}

.fp-main__read-more:hover { color: var(--color-accent-dark); }

/* Side cards */
.fp-block__side {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.fp-side-card {
    background:    #ffffff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    transition:    box-shadow var(--transition);
}

.fp-side-card:hover { box-shadow: var(--shadow-md); }

.fp-side-card__img-link {
    display:  block;
    overflow: hidden;
    padding: 10px;
}

.fp-side-card__img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform .4s ease;
}

.fp-side-card__img-link:hover .fp-side-card__img { transform: scale(1.03); }

.fp-side-card__img-placeholder {
    width:      100%;
    height:     160px;
    background: var(--color-secondary);
}

.fp-side-card__body { padding: 1rem .5rem 1.25rem; background-color: #ffffff; }

.fp-side-card__channel {
    display:        block;
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-accent);
    margin-bottom:  .35rem;
}

.fp-side-card__title {
    font-size:     1rem;
    font-weight:   700;
    line-height:   1.4;
    margin-bottom: .4rem;
}

.fp-side-card__title a:hover { color: var(--color-accent); }

.fp-side-card__date {
    font-size:     .8rem;
    color:         var(--color-text-muted);
    margin-bottom: .5rem;
}

.fp-side-card__read-more {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--color-accent);
}

/* ── Shows Section — cards on dark background ─────────────── */
.latest-videos {
    background-color: #032539;
}
.latest-videos .card {
    background:    transparent;
    border-color:  transparent;
    border-radius: 10px;
}

.latest-videos .card:hover {
    box-shadow: none;
    transform:  translateY(-2px);
}

.latest-videos .card__media {
    background-color: transparent;
}

.latest-videos .card__body {
    text-align: left;
    padding:    .75rem .25rem;
}

.latest-videos .card__title {
    font-size:   .95rem;
    font-weight: 500;
    margin-bottom: .25rem;
}

.latest-videos .card__title a {
    color: var(--color-white);
}

#latest-articles-heading {
    color: #ffffff;
}

.latest-articles .card {
    background-color: transparent;
}
.latest-articles .card .card__title {
    color: #ffffff;
}
.latest-articles .card .card__media {
    background-color: transparent;
}
.latest-articles .card:hover {
    background-color: transparent;
    box-shadow: none;
}

.latest-videos .card__title a:hover { color: var(--color-accent); }

.latest-videos .card__meta { color: rgba(255,255,255,.45); font-size: .78rem; }

.latest-videos .card__tag   { color: var(--color-accent); }

.latest-videos .card__stats li { color: rgba(255,255,255,.55); }

.latest-videos .grid-3 { gap: 1.25rem; }

.latest-videos .section-heading { color: var(--color-white); margin-bottom: 0; }

.latest-videos .section-header  { margin-bottom: 2rem; }

/* ── Footer — larger text to match featrmedia.com ─────────── */
.site-footer__col-title { font-size: 1.1rem; }

.site-footer__bottom-inner p { font-size: .88rem; }

.footer-nav-list a { font-size: 1rem; }

/* ── Social icon brand colours ─────────────────────────────── */
.social-icon--youtube  a { color: rgba(255,255,255,.8); }
.social-icon--facebook a { color: rgba(255,255,255,.8); }
.social-icon--instagram a { color: rgba(255,255,255,.8); }

.social-icon--youtube svg  { color: #FF0000; }
.social-icon--facebook svg { color: #1877F2; }
.social-icon--instagram svg { color: #E4405F; }

.social-icon--youtube a:hover  { color: var(--color-white); }
.social-icon--youtube a:hover svg  { color: #FF0000; }
.social-icon--facebook a:hover { color: var(--color-white); }
.social-icon--facebook a:hover svg { color: #1877F2; }
.social-icon--instagram a:hover { color: var(--color-white); }
.social-icon--instagram a:hover svg { color: #E4405F; }

/* ── Responsive additions ──────────────────────────────────── */
@media (max-width: 900px) {
    .fp-block__grid { grid-template-columns: 1fr; }
    .fp-main__title { font-size: 1.4rem; }
}

@media (max-width: 768px) {
    .fp-block { padding: 2.5rem 0; }
    .fp-main__img-placeholder { height: 200px; }
}
.related-posts {
    padding-top: 3rem;
}