/* ==========================================
   COLOR REFRESH, take 2 (client request 2026-10-20; live 2026-10-28)
   Texture pass 2026-10-26 (Maria 10/23: make the textured backgrounds more
   consistent): every section background uses the same tapa motif, light ink
   on green and brown ink on beige/tan; woodgrain is kept for wood objects only
   (sign buttons and the footer). Inner pages get the same texture and bands.
   Loaded on every page after styles.css; <html class="theme-refresh"> turns it on.
   Follows Mai-Kai (maikai.com), the reference Kaona chose: jungle green
   tapa sections, beige chevron and tan woodgrain sections, a carved tribal
   band at every section break, carved wood sign buttons, sign-painter
   script over Futura-style caps. Colors follow Silvia's ask (greens, burnt
   orange, brown/beige), not Mai-Kai's teal and red.
   All patterns are original SVG drawn here; no Mai-Kai assets are used.
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Yellowtail&display=swap');

html.theme-refresh {
    --kaona-black: #243626;
    --kaona-charcoal: #2a3d2c;
    --kaona-dark-green: #1c2b1e;
    --kaona-deep: #182519;
    --kaona-gold: #e8863a;
    --kaona-gold-dim: rgba(232, 134, 58, 0.7);
    --neon-orange: #f2a15e;

    --text-primary: #f6efdc;
    --text-secondary: rgba(246, 239, 220, 0.84);
    --text-muted: rgba(246, 239, 220, 0.64);

    --font-display: 'Jost', 'Futura', sans-serif;
    --font-heading: 'Jost', 'Futura', sans-serif;
    --font-body: 'Jost', 'Futura', sans-serif;
    --font-accent: 'Jost', 'Futura', sans-serif;
    --font-script: 'Yellowtail', cursive;

    /* Carved tribal band */
    --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Crect width='64' height='30' fill='%234a2a12'/%3E%3Cpath d='M-14 3 0 21 14 3ZM18 3 32 21 46 3ZM50 3 64 21 78 3Z' fill='%23934f18'/%3E%3Cpath d='M0 27 16 6 32 27 48 6 64 27Z' fill='%23c46a1c'/%3E%3Cpath d='M8 27 16 16 24 27ZM40 27 48 16 56 27Z' fill='%237a3d10'/%3E%3Cpath d='M0 27 16 6 32 27 48 6 64 27' fill='none' stroke='%23f0d49a' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='11.5' r='1.3' fill='%23f0d49a'/%3E%3Ccircle cx='48' cy='11.5' r='1.3' fill='%23f0d49a'/%3E%3Crect width='64' height='3' fill='%232a1607'/%3E%3Crect y='27' width='64' height='3' fill='%232a1607'/%3E%3C/svg%3E");
    /* Tapa texture for the green sections */
    --tapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23dce9c9' stroke-opacity='.11' stroke-width='2'%3E%3Cpath d='M0 48 48 0 96 48 48 96Z'/%3E%3Cpath d='M24 48 48 24 72 48 48 72Z'/%3E%3Cpath d='M0 0 12 12M96 0 84 12M0 96 12 84M96 96 84 84'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='4' fill='%23dce9c9' fill-opacity='.11'/%3E%3C/svg%3E");
    /* Same tapa motif in dark brown ink for the light (beige and tan) sections */
    --tapa-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%235a3a18' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M0 48 48 0 96 48 48 96Z'/%3E%3Cpath d='M24 48 48 24 72 48 48 72Z'/%3E%3Cpath d='M0 0 12 12M96 0 84 12M0 96 12 84M96 96 84 84'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='4' fill='%235a3a18' fill-opacity='.14'/%3E%3C/svg%3E");
    /* Soft chevrons for the beige section */
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='140' viewBox='0 0 280 140'%3E%3Cg fill='none' stroke='%23cdbf9c' stroke-opacity='.22' stroke-width='22'%3E%3Cpath d='M-20 66 70 6 140 66 210 6 300 66'/%3E%3Cpath d='M-20 136 70 76 140 136 210 76 300 136'/%3E%3C/g%3E%3C/svg%3E");
    /* Woodgrain, used over a brown or tan base */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0 0.07' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.03 1.1 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

html.theme-refresh body {
    background: var(--tapa), var(--kaona-black);
    font-size: 1.05rem;
}

/* Inner pages set an inline body background; the texture still has to show there */
html.theme-refresh body[style] {
    background-image: var(--tapa) !important;
}

/* ---------- Type: sign-painter script over Futura-style caps ---------- */
html.theme-refresh .section-label {
    font-family: var(--font-script);
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.1;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

html.theme-refresh .section-title {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.25;
}

html.theme-refresh .section-subtitle,
html.theme-refresh .about-content-inner p,
html.theme-refresh .hero-description {
    font-style: normal;
}

html.theme-refresh .hero-description {
    font-size: 1.15rem;
    color: var(--text-primary);
}

/* ---------- Header: solid jungle green like Mai-Kai ---------- */
html.theme-refresh .address-bar {
    background: var(--kaona-dark-green);
    border-bottom: 0;
}

html.theme-refresh .address-bar__address {
    font-weight: 500;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    letter-spacing: 0.12em;
    color: var(--kaona-gold);
}

html.theme-refresh .address-bar__hours,
html.theme-refresh .address-bar__phone {
    font-weight: 500;
    letter-spacing: 0.1em;
}

html.theme-refresh .navbar,
html.theme-refresh .navbar.scrolled {
    background-color: var(--kaona-charcoal);
    backdrop-filter: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

html.theme-refresh .nav-link {
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

html.theme-refresh .nav-link--cta {
    background: #c8581c;
    border: 0;
    /* styles.css sets this color with !important */
    color: #fff !important;
    padding: 0.6rem 1.1rem;
}

html.theme-refresh .nav-link--cta:hover {
    background: #db6a2b;
    color: #fff !important;
}

/* ---------- Carved wood sign buttons ---------- */
html.theme-refresh .btn-primary,
html.theme-refresh .btn-secondary,
html.theme-refresh .sticky-mobile-cta a {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    border: 0;
    border-radius: 0;
    clip-path: polygon(1.5% 12%, 30% 3%, 70% 7%, 98.5% 0, 100% 48%, 98% 100%, 62% 94%, 26% 99%, 0.5% 91%, 0 52%);
    padding: 1.05rem 2.4rem;
    transition: filter var(--transition-fast);
}

html.theme-refresh .btn-primary,
html.theme-refresh .sticky-mobile-cta a {
    color: #f6e6bb;
    text-shadow: 0 1px 0 #2a1607, 0 0 8px rgba(0, 0, 0, 0.4);
    background: var(--grain) center / 500px 200px, linear-gradient(180deg, #8d5529 0%, #6b3c1a 55%, #51280e 100%);
    box-shadow: inset 0 0 0 2px rgba(42, 22, 7, 0.55), inset 0 3px 0 rgba(255, 220, 160, 0.18);
}

html.theme-refresh .btn-secondary {
    color: #3b2410;
    background: var(--grain) center / 500px 200px, linear-gradient(180deg, #d9b679 0%, #c19a5b 60%, #a8803f 100%);
    box-shadow: inset 0 0 0 2px rgba(74, 42, 18, 0.45), inset 0 3px 0 rgba(255, 245, 210, 0.35);
}

html.theme-refresh .btn-primary:hover,
html.theme-refresh .btn-secondary:hover,
html.theme-refresh .sticky-mobile-cta a:hover {
    filter: brightness(1.12);
    transform: none;
}

/* ---------- Carved band at every section break ---------- */
html.theme-refresh .reservations,
html.theme-refresh .gallery-fullwidth,
html.theme-refresh .faq-section,
html.theme-refresh .footer {
    background-repeat: repeat-x, repeat, no-repeat;
    background-position: top left, center, center;
}

html.theme-refresh .about-hero::after,
html.theme-refresh .contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--band) repeat-x;
    z-index: 4;
    pointer-events: none;
}

/* Hero and photo sections: lighter, green-tinted shade */
html.theme-refresh .hero-overlay {
    background:
        radial-gradient(ellipse at center, rgba(28, 43, 30, 0.1) 0%, rgba(28, 43, 30, 0.45) 100%),
        linear-gradient(180deg, rgba(28, 43, 30, 0.3) 0%, transparent 25%, transparent 78%, rgba(36, 54, 38, 0.75) 100%);
}

html.theme-refresh .hero-fog {
    background: linear-gradient(180deg, transparent 0%, rgba(36, 54, 38, 0.5) 50%, var(--kaona-black) 100%);
}

html.theme-refresh .about-hero-overlay {
    background:
        linear-gradient(90deg, rgba(28, 43, 30, 0.9) 0%, rgba(28, 43, 30, 0.62) 50%, rgba(28, 43, 30, 0.25) 100%);
}

html.theme-refresh .contact-overlay {
    background:
        radial-gradient(ellipse at center, rgba(28, 43, 30, 0.45) 0%, rgba(28, 43, 30, 0.85) 100%);
}

/* ---------- Reservations: beige chevrons, cream card ---------- */
html.theme-refresh .reservations {
    background-image: var(--band), var(--tapa-ink), linear-gradient(#ebe4d3, #e4dcc8);
    background-size: 64px 30px, 96px 96px, auto;
    --text-primary: #2a3d2c;
    --text-secondary: rgba(42, 61, 44, 0.86);
    --text-muted: rgba(42, 61, 44, 0.7);
    --kaona-gold: #a8501a;
    --neon-orange: #c8581c;
}

html.theme-refresh .reservations::before {
    display: none;
}

html.theme-refresh .reservation-card {
    background: #fbf5e1;
    border: 0;
    border-radius: 0;
    padding-top: 3.6rem;
    box-shadow: 0 14px 40px rgba(60, 42, 18, 0.22);
}

html.theme-refresh .reservation-card::before {
    height: 18px;
    background: var(--band) repeat-x;
    background-size: 38px 18px;
}

html.theme-refresh .reservation-card__heading {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    color: #2a3d2c;
}

/* ---------- Gallery: green tapa, cream framed photos ---------- */
html.theme-refresh .gallery-fullwidth {
    background-image: var(--band), var(--tapa), linear-gradient(var(--kaona-charcoal), var(--kaona-charcoal));
    background-size: 64px 30px, 96px 96px, auto;
}

html.theme-refresh .gallery-fullwidth .gallery-item {
    border-radius: 0;
    border: 6px solid #f3ead0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html.theme-refresh .gallery-marquee::before {
    background: linear-gradient(90deg, var(--kaona-charcoal), transparent);
}

html.theme-refresh .gallery-marquee::after {
    background: linear-gradient(270deg, var(--kaona-charcoal), transparent);
}

/* ---------- FAQ: tan tapa with green and orange tiles ---------- */
html.theme-refresh .faq-section {
    background-image: var(--band), var(--tapa-ink), linear-gradient(#c9ab72, #bc9c62);
    background-size: 64px 30px, 96px 96px, auto;
    --text-primary: #3a2410;
    --kaona-gold: #3a2410;
}

html.theme-refresh .faq-item {
    border: 0;
    margin-bottom: 10px;
    padding: 0 1.5rem;
    background: #2a3d2c;
    --text-primary: #fbf5e1;
    --text-secondary: rgba(251, 245, 225, 0.88);
    --kaona-gold: #f3cf7a;
    --neon-orange: #fff;
}

html.theme-refresh .faq-item:nth-child(even) {
    background: #a9501b;
}

html.theme-refresh .faq-question {
    font-weight: 500;
    font-size: 1.08rem;
}

/* ---------- Social and footer ---------- */
html.theme-refresh .social-section {
    background: var(--tapa), var(--kaona-black);
}

html.theme-refresh .social-section::before {
    height: 30px;
    background: var(--band) repeat-x;
}

html.theme-refresh .footer {
    background-image: var(--band), var(--grain), linear-gradient(#4a2c16, #3a2210);
    background-size: 64px 30px, 500px 200px, auto;
    padding-top: 80px;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.75);
    --kaona-gold: #f2a15e;
}

html.theme-refresh .footer-nav a {
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* ---------- Menu page: Mai-Kai style cream cards ---------- */
html.theme-refresh .menu-hero {
    background: var(--tapa), linear-gradient(180deg, var(--kaona-charcoal) 0%, var(--kaona-black) 100%);
    padding-bottom: 80px;
}

html.theme-refresh .menu-hero h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

html.theme-refresh .menu-category-header {
    border-bottom: 0;
}

html.theme-refresh .menu-category-header h2 {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 3.4rem);
    letter-spacing: 0;
}

html.theme-refresh .menu-card,
html.theme-refresh .menu-card.highlight {
    background: #fbf5e1;
    border: 0;
    border-radius: 0;
    padding: 0 0 1.4rem;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

html.theme-refresh .menu-card.highlight {
    box-shadow: inset 0 5px 0 #c8581c, 0 10px 26px rgba(0, 0, 0, 0.3);
}

html.theme-refresh .menu-card:hover {
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

html.theme-refresh .menu-card .menu-card-image {
    border-radius: 0;
    margin-bottom: 1.2rem;
}

html.theme-refresh .menu-card h3,
html.theme-refresh .menu-card p,
html.theme-refresh .menu-card .price {
    padding: 0 1.4rem;
}

html.theme-refresh .menu-card h3 {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.1rem;
    color: #2a3d2c;
    padding-top: 1.4rem;
}

html.theme-refresh .menu-card .menu-card-image + h3 {
    padding-top: 0;
}

html.theme-refresh .menu-card p {
    color: rgba(42, 61, 44, 0.85);
}

html.theme-refresh .menu-card .price {
    display: inline-block;
    font-weight: 600;
    color: #9a4f16;
}

/* ---------- Inner pages: same texture and carved bands as the home page ---------- */
html.theme-refresh .subpage-split__content,
html.theme-refresh .res-hero,
html.theme-refresh .res-final-cta {
    background: var(--tapa), var(--kaona-black);
}

html.theme-refresh .res-hero::before {
    display: none;
}

html.theme-refresh .findus-step,
html.theme-refresh .policy {
    background: var(--tapa), var(--kaona-charcoal);
}

html.theme-refresh .subpage-img-break::before,
html.theme-refresh .subpage-img-hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--band) repeat-x;
    z-index: 4;
    pointer-events: none;
}

html.theme-refresh .subpage-img-break::before {
    top: 0;
}

html.theme-refresh .subpage-img-hero::before {
    bottom: 0;
}

/* The sign shape clips anything outside it, so the focus ring sits inside */
html.theme-refresh .btn:focus-visible {
    outline: 3px solid #f3cf7a;
    outline-offset: -7px;
}

@media (max-width: 768px) {
    html.theme-refresh .faq-item {
        padding: 0 1rem;
    }
}