/*
Theme Name:   GeneratePress Child
Theme URI:    https://generatepress.com
Description:  Texas Gift Ideas - Editorial Gift Guide Theme
Author:       Texas Gift Ideas
Template:     generatepress
Version:      2.3.0
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM
   Inspired by: editorial gift guide sites (Wirecutter, Gear Patrol, texasgifts.com)
   Approach: warm-white base, navy structure, burnt orange accents, serif headings
═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Core palette */
    --c-orange:     #BF5700;   /* burnt orange - CTAs, badges, accents */
    --c-navy:       #1E2E4F;   /* navy - nav, headings, footer */
    --c-gold:       #C9A227;   /* gold - decorative highlights */
    --c-red:        #B91C1C;   /* deep red - price, urgency */

    /* Backgrounds */
    --c-bg:         #FAFAF8;   /* near-white body background */
    --c-surface:    #FFFFFF;   /* card / content surface */
    --c-warm:       #F5F0E8;   /* cream - section backgrounds, notices */
    --c-warm-dark:  #EDE7D9;   /* deeper cream - dividers */

    /* Text */
    --c-text:       #2D2D2D;   /* primary text */
    --c-muted:      #6B7280;   /* meta, captions */
    --c-light:      #9CA3AF;   /* disabled, placeholders */

    /* Borders */
    --c-border:     #E5DDD0;   /* warm gray border */
    --c-border-light: #F0EAE0; /* subtle dividers */

    /* Typography */
    --f-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --f-sans:   'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;

    /* Spacing & layout */
    --max-w:    840px;
    --gap:      1.5rem;
    --radius:   8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);

    /* Transitions */
    --t-fast: 150ms ease;
    --t-base: 220ms ease;
    --t-slow: 350ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--c-orange);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
a:hover {
    color: var(--c-navy);
    text-decoration-color: currentColor;
}

img { height: auto; max-width: 100%; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT CONTAINERS
═══════════════════════════════════════════════════════════════════════════ */

/* .container,
.grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
} */

.inside-header.grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container,
.grid-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}



/* Let GeneratePress manage its own container widths - our max-w is set
   on the entry-content inner via GP's theme settings, not here. */

/* ═══════════════════════════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════════════════════════ */

.site-header,
.separate-containers .site-header {
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo sizing */
.custom-logo,
.custom-logo-link img,
.header-image img {
    max-height: 64px;
    width: auto;
    height: auto;
    display: block;
}

.site-branding {
    padding: 0.75rem 0;
}

.site-title {
    font-family: var(--f-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.site-title a { color: var(--c-navy); text-decoration: none; }
.site-title a:hover { color: var(--c-orange); }

.site-description {
    font-size: 0.8rem;
    color: var(--c-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION - white bar, navy text, orange hover
═══════════════════════════════════════════════════════════════════════════ */

.main-navigation,
.nav-primary {
    background-color: var(--c-navy);
}

.main-navigation a,
.nav-primary .main-nav ul li a {
    color: rgba(255,255,255,0.88) !important;
    font-family: var(--f-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.1rem !important;
    transition: color var(--t-fast), background-color var(--t-fast);
    text-decoration: none !important;
}

.main-navigation a:hover,
.nav-primary .main-nav ul li a:hover,
.main-navigation .current-menu-item > a,
.nav-primary .main-nav .current-menu-item > a {
    color: #FFFFFF !important;
    background-color: rgba(255,255,255,0.12) !important;
}

/* Dropdown */
.main-navigation ul ul,
.nav-primary .main-nav ul ul {
    background-color: var(--c-navy);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 2px solid var(--c-orange);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 220px;
}

.main-navigation ul ul a,
.nav-primary .main-nav ul ul li a {
    color: rgba(255,255,255,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 0.875rem !important;
}

.main-navigation ul ul li:last-child a {
    border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE / POST HEADER - clean, editorial
═══════════════════════════════════════════════════════════════════════════ */

.entry-header,
.page-header {
    padding: 2.5rem 0 1.5rem;
    border-bottom: none;
    margin-bottom: 2rem;
    background: transparent;
}

/* Category badge above title */
.entry-header .entry-meta {
    margin-bottom: 0.75rem;
}

.post-categories a,
.cat-links a {
    display: inline-block;
    background: var(--c-orange);
    color: #fff !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-decoration: none !important;
    transition: background var(--t-fast);
}
.post-categories a:hover,
.cat-links a:hover {
    background: var(--c-navy) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY - editorial scale
═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a,
.page-title {
    font-family: var(--f-serif);
    color: var(--c-navy);
    line-height: 1.25;
    font-weight: 700;
}

.entry-title a { text-decoration: none !important; }
.entry-title a:hover { color: var(--c-orange) !important; }

/* Page/post main title */
h1,
.entry-title.entry-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* Section headings */
h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin-top: 2.5rem; margin-bottom: 1rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); margin-top: 2rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }

/* Body text */
.entry-content p,
.entry-content li {
    font-family: var(--f-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--c-text);
}

.entry-content > p:first-of-type {
    font-size: 1.125rem;
    color: #444;
    line-height: 1.8;
}

/* ── H2 refined accent - left border instead of ★ prefix ─────────────────── */
.entry-content h2 {
    padding-left: 1rem;
    border-left: 3px solid var(--c-orange);
    margin-left: -1rem;
}

/* Remove the rough star prefix */
.entry-content h2::before { content: none; }

/* H3 subtle accent */
.entry-content h3 {
    color: var(--c-navy);
}

/* Auto-linked keywords inside headings must not bleed orange */
.entry-content h1 a.thirstylink,
.entry-content h2 a.thirstylink,
.entry-content h3 a.thirstylink,
.entry-content h4 a.thirstylink,
.entry-title a.thirstylink {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
    pointer-events: none;        /* headings should not be clickable links */
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED IMAGE
═══════════════════════════════════════════════════════════════════════════ */

/* Featured image rendered as a full-bleed editorial hero at the top of the
   article card. GeneratePress outputs it (via generate_before_content) just
   inside .inside-article, ahead of the entry header - so it sits flush with
   the card's rounded top corners thanks to .inside-article overflow:hidden. */
.single .featured-image,
.single .post-image,
.page .featured-image,
.page .post-image {
    margin: auto auto 0.5rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    max-height: 60vh;

    background: var(--c-warm);
}

.single .featured-image img,
.single .post-image img,
.page .featured-image img,
.page .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* The home/blog page still treats its own featured image as an OG-only asset. */
.home .featured-image,
.blog.page .post-thumbnail {
    display: none !important;
}

/* Utility/legal pages: hide the full-bleed hero - it overwhelms short content.
   These pages use featured images only for OG social cards, not as page headers.
   IDs: 8=affiliate-disclosure, 3=privacy-policy, 10=contact, 7=about, 11=sitemap */
.page-id-8 .featured-image,
.page-id-3 .featured-image,
.page-id-10 .featured-image,
.page-id-11 .featured-image {
    display: none !important;
}

/* Archive/blog post cards - show a cropped thumbnail */
.blog .post-thumbnail,
.archive .post-thumbnail,
.category .post-thumbnail {
    display: block;
    margin: 0 0 1rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog .post-thumbnail img,
.archive .post-thumbnail img,
.category .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════════════════════════════════════ */

.content-area,
.site-content {
    background: transparent;
    padding: 0;
}

.inside-article {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border-light);
    transition: box-shadow var(--t-base), transform var(--t-base);
    overflow: hidden;
}

.inside-article:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Content inside article - consistent horizontal inset on every block.
   The featured-image hero is intentionally excluded so it stays full-bleed
   against the card's rounded top edge. */
.inside-article .entry-header,
.inside-article .entry-summary,
.inside-article .entry-content,
.inside-article .entry-footer {
    padding-left: 2rem;
    padding-right: 2rem;
}
.inside-article .entry-header  { padding-top: 1.75rem; padding-bottom: 0; }
.inside-article .entry-content { padding-top: 1.25rem; padding-bottom: 2rem; }
.inside-article .entry-summary { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.inside-article .entry-footer  { padding-top: 0.5rem; padding-bottom: 1.5rem; border-top: 1px solid var(--c-border-light); margin-top: 1rem; }

/* Single posts/pages: a touch more breathing room than archive cards. */
.single .inside-article .entry-content,
.page .inside-article .entry-content { padding-bottom: 2.5rem; }

/* ── Archive/category page grid ──────────────────────────────────────────── */
/* Two-column card grid on archive pages */
@media (min-width: 768px) {
    .blog .content-area .inside-article,
    .archive .content-area .inside-article,
    .category .content-area .inside-article {
        /* GP doesn't easily do CSS grid across articles, handled below */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS & CTAs
═══════════════════════════════════════════════════════════════════════════ */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background-color: var(--c-orange) !important;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-family: var(--f-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.65em 1.5em;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    text-decoration: none !important;
    letter-spacing: 0.01em;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: #9E4700 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(191,87,0,0.30) !important;
    color: #fff !important;
}

/* Secondary / outline button */
.button-secondary,
.button.button-secondary {
    background-color: transparent !important;
    color: var(--c-orange) !important;
    border: 2px solid var(--c-orange) !important;
    box-shadow: none !important;
}
.button-secondary:hover {
    background-color: var(--c-orange) !important;
    color: #fff !important;
}

/* Read More link */
.more-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}
.more-link::after { content: " →"; }
.more-link:hover { color: var(--c-navy); }

/* ═══════════════════════════════════════════════════════════════════════════
   AFFILIATE DISCLOSURE NOTICE
═══════════════════════════════════════════════════════════════════════════ */

.entry-content > p:first-child em,
.affiliate-notice {
    display: block;
    background: var(--c-warm);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    color: var(--c-muted);
    margin-bottom: 2rem;
    font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
═══════════════════════════════════════════════════════════════════════════ */

.rank-math-breadcrumb,
.breadcrumb-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--c-muted);
    margin-bottom: 1.5rem;
    padding: 0;
    background: none;
}

.rank-math-breadcrumb a,
.breadcrumb-trail a {
    color: var(--c-muted);
    text-decoration: none;
    transition: color var(--t-fast);
}
.rank-math-breadcrumb a:hover,
.breadcrumb-trail a:hover { color: var(--c-orange); }

.rank-math-breadcrumb .separator { margin: 0 0.2rem; opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   POST META
═══════════════════════════════════════════════════════════════════════════ */

.entry-meta,
.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--c-muted);
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
}

.entry-meta a { color: var(--c-muted); text-decoration: none; }
.entry-meta a:hover { color: var(--c-orange); }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE INFOGRAPHICS & IMAGES
═══════════════════════════════════════════════════════════════════════════ */

.article-infographic {
    margin: 2.5rem 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.article-infographic img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

.infographic-caption {
    background: var(--c-warm);
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    color: var(--c-muted);
    font-style: italic;
    border-top: 1px solid var(--c-border);
    line-height: 1.5;
}

.infographic-caption strong { color: var(--c-navy); font-style: normal; }

/* ═══════════════════════════════════════════════════════════════════════════
   SOURCES / REFERENCES BLOCK
═══════════════════════════════════════════════════════════════════════════ */

.article-sources {
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    background: var(--c-warm);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-navy);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.875rem;
}

.article-sources h3 {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin: 0 0 0.75rem;
    border-left: none;
    padding-left: 0;
}

.article-sources ol {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--c-muted);
}

.article-sources li {
    margin-bottom: 0.4rem;
    line-height: 1.55;
}

.article-sources strong {
    color: var(--c-navy);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR & WIDGETS
═══════════════════════════════════════════════════════════════════════════ */

.sidebar .widget {
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.widget-title {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════════════════ */

.paging-navigation,
.pagination {
    margin: 3rem 0;
    text-align: center;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-navy);
    text-decoration: none;
    border: 1px solid var(--c-border);
    margin: 0 2px;
    transition: all var(--t-fast);
}

.page-numbers:hover,
.page-numbers.current {
    background: var(--c-orange);
    color: #fff;
    border-color: var(--c-orange);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER - structured, warm dark
═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background-color: var(--c-navy);
    color: rgba(255,255,255,0.75);
    padding: 3.5rem 0 0;
    margin-top: 4rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* GeneratePress dynamic CSS sets `.site-info { background-color: #fff }`,
   which covered the navy footer and made the white copyright text invisible.
   Force the inner footer element transparent so the navy shows through, and
   give the copyright bar real vertical breathing room. */
.site-footer .site-info {
    background-color: transparent;
    padding: 0;
}
.site-footer .copyright-bar {
    padding: 0 0 2.25rem;
    text-align: center;
    color: rgba(255,255,255,0.75);
}
.site-footer .copyright-bar .copyright { color: rgba(255,255,255,0.75); }

.site-footer a {
    color: var(--c-gold);
    text-decoration: none;
    transition: color var(--t-fast);
}
.site-footer a:hover { color: #fff; }

.footer-bar,
.footer-bar .footer-bar-inner {
    background: rgba(0,0,0,0.3);
    padding: 1rem 0;
    margin-top: 2.5rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-bar a { color: rgba(255,255,255,0.6); }
.footer-bar a:hover { color: var(--c-gold); }

/* Footer widget titles */
.footer-widgets .widget-title {
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 0.5rem;
}

.footer-widgets a {
    color: rgba(255,255,255,0.65);
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}
.footer-widgets a:hover { color: var(--c-gold); }

/* Texas star in footer */
.site-footer .footer-bar::before {
    content: "★ ";
    color: var(--c-gold);
    font-size: 0.9em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZAZZLE CTA BLOCK - redesigned: editorial card style
═══════════════════════════════════════════════════════════════════════════ */

.zazzle-cta-block {
    margin: 2.5rem 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    display: flex;
    min-height: 180px;
}

.zazzle-cta-block::before {
    content: '';
    display: block;
    width: 6px;
    background: linear-gradient(180deg, var(--c-orange) 0%, #8B3A00 100%);
    flex-shrink: 0;
}

.zazzle-cta-inner {
    padding: 2rem 2rem 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    text-align: left;
}

.zazzle-cta-eyebrow {
    font-family: var(--f-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-orange);
    margin: 0;
}

.zazzle-cta-heading {
    font-family: var(--f-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.25;
    margin: 0;
}

.zazzle-cta-body {
    font-family: var(--f-sans);
    font-size: 0.9375rem;
    color: var(--c-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.zazzle-cta-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.5rem;
    align-self: flex-start;
    background: var(--c-orange) !important;
    color: #fff !important;
    padding: 0.6rem 1.4rem !important;
    border-radius: 6px !important;
    font-family: var(--f-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast) !important;
    border: none !important;
    letter-spacing: 0.01em !important;
}

.zazzle-cta-btn:hover {
    background: #9E4700 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(191,87,0,0.30) !important;
    color: #fff !important;
}

.zazzle-cta-note {
    font-size: 0.75rem;
    color: var(--c-light);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZAZZLE PRODUCT GRID CARDS - refined
═══════════════════════════════════════════════════════════════════════════ */

.zazzle-product-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--c-border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--t-base), transform var(--t-base) !important;
    background: var(--c-surface) !important;
    overflow: hidden;
}

.zazzle-product-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-3px) scale(1.01) !important;
}

.zazzle-product-cta {
    background: var(--c-orange) !important;
    border-radius: 5px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 1rem !important;
    transition: background var(--t-fast) !important;
}
.zazzle-product-cta:hover {
    background: #9E4700 !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIFT ITEM CALLOUT BLOCKS - styled product recommendations in content
═══════════════════════════════════════════════════════════════════════════ */

/* Style blockquote as a featured gift callout */
.entry-content blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: var(--c-warm);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-orange);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: normal;
    color: var(--c-text);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.entry-content blockquote p { margin: 0; font-size: inherit; }
.entry-content blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--c-muted);
    font-style: italic;
}

/* ── Pull quote / stat callout ──────────────────────────────────────────── */
.pull-quote,
.entry-content .wp-block-pullquote {
    border: none;
    border-top: 2px solid var(--c-orange);
    border-bottom: 2px solid var(--c-orange);
    margin: 2.5rem 0;
    padding: 1.5rem 0;
    text-align: center;
    background: transparent;
}

/* ── Price badge ─────────────────────────────────────────────────────────── */
.price-badge {
    display: inline-block;
    background: var(--c-navy);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

/* ── Gift item cards within content ─────────────────────────────────────── */
.gift-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base);
}
.gift-item:hover { box-shadow: var(--shadow-md); }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES (for comparison content)
═══════════════════════════════════════════════════════════════════════════ */

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin: 2rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.entry-content table th {
    background: var(--c-navy);
    color: #fff;
    font-family: var(--f-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    text-align: left;
}

.entry-content table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--c-border-light);
    vertical-align: top;
}

.entry-content table tr:last-child td { border-bottom: none; }
.entry-content table tr:nth-child(even) td { background: var(--c-warm); }

/* ═══════════════════════════════════════════════════════════════════════════
   TAG CLOUD & POST TAGS
═══════════════════════════════════════════════════════════════════════════ */

.tag-cloud-link,
.tags-links a {
    display: inline-block;
    background: var(--c-warm);
    color: var(--c-navy) !important;
    border: 1px solid var(--c-border);
    font-size: 0.78rem !important;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    text-decoration: none !important;
    margin: 0.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.tag-cloud-link:hover,
.tags-links a:hover {
    background: var(--c-orange) !important;
    color: #fff !important;
    border-color: var(--c-orange);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS (if using full-page home template)
═══════════════════════════════════════════════════════════════════════════ */

/* Category section intro dividers */
.content-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 1.5rem;
    font-family: var(--f-serif);
    font-size: 1.5rem;
    color: var(--c-navy);
}

.content-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICE / CALLOUT BOXES
═══════════════════════════════════════════════════════════════════════════ */

.notice-tip,
.wp-block-info {
    background: #EFF6FF;
    border-left: 4px solid #3B82F6;
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 2rem 0;
    font-size: 0.9375rem;
}

.notice-texas {
    background: var(--c-warm);
    border-left: 4px solid var(--c-orange);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 2rem 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RELATED POSTS
═══════════════════════════════════════════════════════════════════════════ */

.related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border);
}

.related-posts h3 {
    font-size: 0.75rem;
    font-family: var(--f-sans);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH FORM
═══════════════════════════════════════════════════════════════════════════ */

.search-form input[type="search"] {
    border: 1px solid var(--c-border);
    border-radius: 6px 0 0 6px;
    padding: 0.6rem 1rem;
    font-size: 0.9375rem;
    font-family: var(--f-sans);
    color: var(--c-text);
    background: var(--c-surface);
    outline: none;
    transition: border-color var(--t-fast);
    -webkit-appearance: none;
}
.search-form input[type="search"]:focus { border-color: var(--c-orange); }
.search-form .search-submit {
    border-radius: 0 6px 6px 0;
    margin: 0;
    padding: 0.6rem 1.1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    h1, .entry-title.entry-title { font-size: clamp(1.5rem, 5vw, 2.25rem); }
}

@media (max-width: 768px) {
    .custom-logo,
    .custom-logo-link img { max-height: 52px; }

    h1, .entry-title.entry-title { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; margin-top: 2rem; }
    h3 { font-size: 1.1rem; }

    .entry-content h2 {
        margin-left: -0.75rem;
        padding-left: 0.75rem;
    }

    .inside-article .entry-header,
    .inside-article .entry-summary,
    .inside-article .entry-content,
    .inside-article .entry-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .zazzle-cta-block { flex-direction: column; }
    .zazzle-cta-block::before { width: 100%; height: 4px; }
    .zazzle-cta-inner { padding: 1.5rem; }
    .zazzle-cta-btn { align-self: stretch; text-align: center; justify-content: center; }

    .article-infographic { margin: 1.5rem -1rem; border-radius: 0; }

    .site-footer { margin-top: 2.5rem; padding-top: 2.5rem; }
}

@media (max-width: 480px) {
    body { font-size: 15px; }

    .main-navigation a,
    .nav-primary .main-nav ul li a {
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }

    .zazzle-cta-heading { font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .site-header, .main-navigation, .site-footer, .sidebar { display: none; }
    .entry-content { font-size: 12pt; }
    a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
    .zazzle-cta-block, .zazzle-product-grid { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL OPT-IN BLOCKS
═══════════════════════════════════════════════════════════════════════════ */

.tgi-optin-block {
    margin: 3.5rem 0 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-navy);
    box-shadow: var(--shadow-md);
}

.tgi-optin-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.tgi-optin-copy {
    padding: 2.25rem 2rem 2.25rem 2.25rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.tgi-optin-form {
    padding: 2.25rem 2.25rem 2.25rem 2rem;
    display: flex;
    align-items: center;
}

.tgi-optin-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-gold);
    margin: 0 0 0.5rem;
}

.tgi-optin-title {
    font-family: var(--f-serif);
    font-size: 1.4rem !important;
    font-weight: 700;
    color: #fff !important;
    line-height: 1.25;
    margin: 0 0 0.75rem !important;
    border: none !important;
    padding: 0 !important;
}
.tgi-optin-title::before { content: none !important; }

.tgi-optin-desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    margin: 0;
}

/* Restore light text on the navy opt-in block - the end-of-post variant
   lives inside .entry-content, whose `.entry-content p` rule (dark body
   color) otherwise wins on specificity over the single-class colors above. */
.entry-content .tgi-optin-eyebrow { color: var(--c-gold); }
.entry-content .tgi-optin-desc    { color: rgba(255,255,255,0.72); }

/* WPForms inside opt-in */
.tgi-optin-form .wpforms-container,
.tgi-sidebar-optin .wpforms-container { width: 100%; }

.tgi-optin-form .wpforms-field,
.tgi-sidebar-optin .wpforms-field { margin-bottom: 0.75rem; }

.tgi-optin-form .wpforms-field-label,
.tgi-sidebar-optin .wpforms-field-label {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.3rem !important;
}

/* Sublabels ("First"/"Last"), field descriptions and the required asterisk
   default to dark text - invisible on the navy opt-in background. Lighten. */
.tgi-optin-form .wpforms-field-sublabel,
.tgi-optin-form .wpforms-field-description,
.tgi-optin-form .wpforms-required-label,
.tgi-sidebar-optin .wpforms-field-sublabel,
.tgi-sidebar-optin .wpforms-field-description,
.tgi-sidebar-optin .wpforms-required-label {
    color: rgba(255,255,255,0.6) !important;
}

.tgi-optin-form input[type="text"],
.tgi-optin-form input[type="email"],
.tgi-sidebar-optin input[type="text"],
.tgi-sidebar-optin input[type="email"] {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    color: #fff !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.9375rem !important;
    width: 100% !important;
    transition: border-color var(--t-fast) !important;
}
.tgi-optin-form input[type="text"]::placeholder,
.tgi-optin-form input[type="email"]::placeholder,
.tgi-sidebar-optin input::placeholder { color: rgba(255,255,255,0.45) !important; }

.tgi-optin-form input:focus,
.tgi-sidebar-optin input:focus {
    border-color: var(--c-gold) !important;
    outline: none !important;
}

.tgi-optin-form .wpforms-submit,
.tgi-sidebar-optin .wpforms-submit {
    width: 100% !important;
    background: var(--c-orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--t-fast) !important;
    margin-top: 0.25rem !important;
}
.tgi-optin-form .wpforms-submit:hover,
.tgi-sidebar-optin .wpforms-submit:hover {
    background: #9E4700 !important;
}

/* Sidebar opt-in variant */
.tgi-sidebar-optin {
    background: var(--c-navy);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.tgi-sidebar-optin .tgi-optin-eyebrow { color: var(--c-gold); }
.tgi-sidebar-optin .tgi-optin-title {
    font-size: 1.1rem !important;
    color: #fff !important;
    margin-bottom: 0.5rem !important;
}

/* ── Pinterest Save button overlay ────────────────────────────────────────── */
.entry-content figure,
.entry-content .wp-block-image {
    position: relative;
}

.entry-content figure:hover .pin-save-btn,
.entry-content .wp-block-image:hover .pin-save-btn {
    opacity: 1;
}

/* Mobile: stack opt-in */
@media (max-width: 768px) {
    .tgi-optin-inner {
        grid-template-columns: 1fr;
    }
    .tgi-optin-copy {
        padding: 1.75rem 1.5rem 1.25rem;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .tgi-optin-form {
        padding: 1.25rem 1.5rem 1.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE (front-page.php) - hero, category/recipient/guide cards, trust strip
═══════════════════════════════════════════════════════════════════════════ */

.tgi-home { margin: 0; }

/* Pull the homepage flush against GP's content padding so sections own spacing */
.home .site-main > .tgi-home { margin-top: -1rem; }

/* ── Shared buttons ───────────────────────────────────────────────────────── */
.tgi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-family: var(--f-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.8em 1.6em;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    cursor: pointer;
}
.tgi-btn--primary {
    background: var(--c-orange);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(191,87,0,0.30);
}
.tgi-btn--primary:hover {
    background: #9E4700;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(191,87,0,0.38);
}
.tgi-btn--ghost {
    background: rgba(255,255,255,0.10);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.55);
}
.tgi-btn--ghost:hover {
    background: #fff;
    color: var(--c-navy) !important;
    border-color: #fff;
    transform: translateY(-2px);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.tgi-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0.5rem 0 3.5rem;
    min-height: 460px;
    display: flex;
    align-items: center;
    background-color: var(--c-navy);
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center 35%;
    box-shadow: var(--shadow-lg);
}
.tgi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(30,46,79,0.92) 0%,
        rgba(30,46,79,0.78) 42%,
        rgba(30,46,79,0.30) 100%);
}
.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.tgi-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    padding: 3rem 3.25rem;
}
.tgi-hero__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 1rem;
}
.tgi-hero__title {
    font-family: var(--f-serif);
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.tgi-hero__sub {
    color: rgba(255,255,255,0.88);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 30em;
}
.tgi-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.tgi-section {
  margin: 0 auto 3.5rem;
  max-width: 1200px;
}
.tgi-section--alt {
    background: var(--c-warm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
}
.tgi-section__head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2rem;
}
.tgi-section__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-orange);
    margin-bottom: 0.5rem;
}
.tgi-section__title {
    font-family: var(--f-serif);
    color: var(--c-navy);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 0.5rem;
    padding: 0;
    border: none;
}
.tgi-section__title::before { content: none; }
.tgi-section__sub {
    color: var(--c-muted);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
}
.tgi-section__more {
    text-align: center;
    margin-top: 2rem;
}
.tgi-section__more .tgi-btn--ghost {
    background: transparent;
    color: var(--c-navy) !important;
    border-color: var(--c-border);
}
.tgi-section__more .tgi-btn--ghost:hover {
    background: var(--c-navy);
    color: #fff !important;
    border-color: var(--c-navy);
}

/* ── Card grids ───────────────────────────────────────────────────────────── */
.tgi-grid {
    display: grid;
    gap: 1.5rem;
}
.tgi-grid--cat   { grid-template-columns: repeat(3, 1fr); }
.tgi-grid--rec   { grid-template-columns: repeat(3, 1fr); }
.tgi-grid--guide { grid-template-columns: repeat(3, 1fr); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.tgi-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base), transform var(--t-base);
}
.tgi-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.tgi-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-warm);
}
.tgi-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}
.tgi-card:hover .tgi-card__img { transform: scale(1.05); }
.tgi-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.5rem;
    color: var(--c-gold);
    background: var(--c-warm);
}
.tgi-card__body {
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tgi-card__kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-orange);
    margin-bottom: 0.4rem;
}
.tgi-card__title {
    font-family: var(--f-serif);
    color: var(--c-navy);
    font-size: 1.12rem;
    line-height: 1.3;
    margin: 0 0 0.85rem;
    padding: 0;
    border: none;
}
.tgi-card__title::before { content: none; }
.tgi-card__link {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-orange);
    transition: gap var(--t-fast);
}
.tgi-card:hover .tgi-card__link { color: #9E4700; }

/* ── Trust strip ──────────────────────────────────────────────────────────── */
.tgi-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border);
}
.tgi-trust__item { text-align: center; padding: 0.5rem 1rem; }
.tgi-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-warm);
    color: var(--c-orange);
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}
.tgi-trust__item h3 {
    font-family: var(--f-serif);
    font-size: 1.05rem;
    color: var(--c-navy);
    margin: 0 0 0.35rem;
    padding: 0;
    border: none;
}
.tgi-trust__item h3::before { content: none; }
.tgi-trust__item p {
    font-size: 0.9rem;
    color: var(--c-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Homepage responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .tgi-grid--cat,
    .tgi-grid--rec,
    .tgi-grid--guide { grid-template-columns: repeat(2, 1fr); }
    .tgi-trust { grid-template-columns: 1fr; gap: 1.25rem; }
    .tgi-hero { min-height: 400px; }
    .tgi-hero__inner { padding: 2.25rem 2rem; }
}

@media (max-width: 540px) {
    .tgi-grid--cat,
    .tgi-grid--rec,
    .tgi-grid--guide { grid-template-columns: 1fr; }
    .tgi-hero { min-height: 360px; }
    .tgi-hero__cta { flex-direction: column; align-items: stretch; }
    .tgi-section--alt { padding: 2rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGULAR CONTENT WIDTH - editorial reading column
   The design system defines --max-w (840px) as the intended reading measure,
   but it was never wired up, so single posts/pages stretched the full 1200px
   container - long, hard-to-read line lengths that looked unfinished.
   Constrain the content column on single posts and pages (but NOT the custom
   home page or the blog/archive card grids, which are meant to be full width).
═══════════════════════════════════════════════════════════════════════════ */

.single .content-area,
.page:not(.home):not(.blog) .content-area {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY - visible keyboard focus
   Provide a clear, consistent focus ring for keyboard users (WCAG 2.4.7).
   Uses :focus-visible so it does not show on mouse clicks. Search/opt-in
   inputs strip the native outline, so they get an explicit ring instead.
═══════════════════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.tgi-btn:focus-visible,
.zazzle-product-cta:focus-visible,
.zazzle-cta-btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--c-orange);
    outline-offset: 2px;
    border-radius: 2px;
}

.search-form input[type="search"]:focus-visible,
.tgi-optin-form input:focus-visible,
.tgi-sidebar-optin input:focus-visible {
    outline: none;
    border-color: var(--c-orange);
    box-shadow: 0 0 0 3px rgba(191, 87, 0, 0.35);
}