/* =============================================================
   JARDIN — DESIGN BIBLE v1.0 (October 2026)

   Jardin stands on its own. It is not the Haus day register any more:
   its own palette, its own typefaces, its own voice. No "by Cococure"
   endorsement — the bible allows one, Folabi's instruction (21 Oct 2026)
   is to leave it off for now and let the name stand alone.

   Palette, from the bible: garden teal #124E52 (primary identity),
   warm ivory #F6F1E7 (ground), terracotta #BC5739 (warm accent),
   leaf olive #525E3D (secondary). Roughly 60% ivory / 25% teal /
   10% terracotta / 5% olive.

   CONTRAST — measured, not assumed:
     teal on ivory          8.34:1  body text PASSES
     olive on ivory         6.16:1  body text passes
     terracotta on ivory    4.09:1  FAILS body text, large/fills only
     terracotta on teal     2.04:1  never
     olive on teal          1.35:1  never
   So terracotta at text size steps down to --jd-terracotta-deep
   (#A8472C, 5.18:1) — the same move the Haus bible made with ember.
   Key text is teal on ivory or ivory on teal, per the bible.

   Typography: DM Serif Display for display, Manrope for utility.
   The wordmark is bespoke lowercase artwork and is NEVER set in a
   font — these faces are for page type only.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@400;500;600;700&display=swap');

.coco-venue-page--jardin {
    --jd-ivory:           #F6F1E7;   /* warm ivory — the ground */
    --jd-ivory-soft:      #EDE6D8;   /* surface on ivory */
    --jd-teal:            #124E52;   /* garden teal — primary identity */
    --jd-ink:             #124E52;   /* key text is teal on ivory */
    --jd-ink-dark:        #0D3A3D;   /* deeper teal for weight */
    --jd-terracotta:      #BC5739;   /* warm accent — large type and fills */
    --jd-terracotta-deep: #A8472C;   /* text-size accent, 5.18:1 on ivory */
    --jd-accent-text:     var(--jd-terracotta-deep);
    --jd-accent-soft:     rgba(188, 87, 57, 0.12);
    --jd-olive:           #525E3D;   /* leaf olive — secondary accent */
    --jd-line:            #D6CCB8;   /* rules on ivory */
    --jd-line-soft:       #E2DACA;

    --coco-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --coco-font-primary: 'Manrope', -apple-system, system-ui, sans-serif;

    /* Override the base venue tokens so any base rule reading --coco-*
       picks up the Jardin palette here. */
    --coco-bg:           var(--jd-ivory);
    --coco-bg-secondary: var(--jd-ivory-soft);
    --coco-text:         var(--jd-ink);
    --coco-accent:       var(--jd-terracotta);
    --coco-accent-light: var(--jd-accent-text);
    --coco-accent-dim:   var(--jd-accent-soft);
    --coco-accent-border: rgba(18, 78, 82, 0.35);
    --coco-card-bg:      #FFFFFF;
    --venue-bg:          var(--jd-ivory);
    --venue-accent:      var(--jd-terracotta);
    --venue-accent-soft: var(--jd-accent-text);
    /* venue-base.css paints the Weekly Lineup cards from these two and
       defaults them to near-black — unset on a light ground the type
       disappears, so they are pinned here. */
    --venue-card:        #FFFFFF;
    --venue-border:      var(--jd-line);
}

/* ── Page surface ─────────────────────────────────────────── */
.coco-venue-page--jardin { background: var(--jd-ivory) !important; color: var(--jd-ink) !important; }
.coco-venue-page--jardin,
.coco-venue-page--jardin p,
.coco-venue-page--jardin li,
.coco-venue-page--jardin span,
.coco-venue-page--jardin div { color: inherit; }
.coco-venue-page--jardin h1,
.coco-venue-page--jardin h2,
.coco-venue-page--jardin h3,
.coco-venue-page--jardin h4,
.coco-venue-page--jardin h5 { color: var(--jd-ink-dark) !important; }
/* Display serif earns its place on heroes and page headings only. Card,
   list and table titles are scanned, not read, so they stay on Manrope —
   the same call made on /whats-on/ in October. */
.coco-venue-page--jardin h1,
.coco-venue-page--jardin h2 { font-family: var(--coco-font-display) !important; }
.coco-venue-page--jardin h3,
.coco-venue-page--jardin h4,
.coco-venue-page--jardin h5 { font-family: var(--coco-font-primary) !important; font-weight: 600 !important; }

/* ── Hero ─────────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-hero { background-color: var(--jd-ivory); }
.coco-venue-page--jardin .coco-venue-hero::after,
.coco-venue-page--jardin .coco-venue-hero-scrim {
    background: linear-gradient(
        to bottom,
        rgba(246, 241, 231, 0.08) 0%,
        rgba(246, 241, 231, 0.22) 40%,
        rgba(246, 241, 231, 0.55) 75%,
        var(--jd-ivory) 100%
    ) !important;
}
.coco-venue-page--jardin .coco-venue-hero-tag {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(18, 78, 82, 0.25) !important;
    color: var(--jd-ink-dark) !important;
    backdrop-filter: blur(8px);
}
.coco-venue-page--jardin .coco-venue-hero-tag .dot {
    background: var(--jd-terracotta) !important;
    box-shadow: 0 0 0 4px rgba(188, 87, 57, 0.22) !important;
}
.coco-venue-page--jardin .coco-venue-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 24px rgba(18, 78, 82, 0.55);
    /* no italic: DM Serif Display has no true italic and the browser
       would synthesise a slanted roman */
    font-style: normal;
    letter-spacing: 0;
}
.coco-venue-page--jardin .coco-venue-sub,
.coco-venue-page--jardin .coco-venue-sub-secondary {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 12px rgba(18, 78, 82, 0.55);
}

/* ── Buttons ──────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-btn-primary {
    background: var(--jd-terracotta) !important;
    border: 1px solid var(--jd-terracotta) !important;
    color: #FFFFFF !important;
}
.coco-venue-page--jardin .coco-venue-btn-primary:hover {
    background: #A8593A !important;
    border-color: #A8593A !important;
}
.coco-venue-page--jardin .coco-venue-btn-outline {
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid var(--jd-ink) !important;
    color: var(--jd-ink-dark) !important;
}
.coco-venue-page--jardin .coco-venue-btn-outline:hover {
    background: var(--jd-ink) !important;
    color: #FFFFFF !important;
}

/* ── Info bar ─────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-info-bar {
    background: var(--jd-ivory-soft) !important;
    border-top: 1px solid var(--jd-line) !important;
    border-bottom: 1px solid var(--jd-line) !important;
    color: var(--jd-ink) !important;
}
.coco-venue-page--jardin .coco-venue-info-item { color: var(--jd-ink) !important; }

/* ── Section titles ───────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-section-title {
    color: var(--jd-ink-dark) !important;
}
.coco-venue-page--jardin .coco-venue-section-title::after {
    background: linear-gradient(90deg, var(--jd-terracotta) 0%, var(--jd-accent-text) 100%) !important;
    height: 2px !important;
}

/* ── Philosophy ───────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-philosophy { background: var(--jd-ivory) !important; }
.coco-venue-page--jardin .coco-venue-philosophy-tag {
    color: var(--jd-accent-text) !important;
    border-color: rgba(188, 87, 57, 0.40) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}
.coco-venue-page--jardin .coco-venue-philosophy h2 {
    color: var(--jd-ink-dark) !important;
}
.coco-venue-page--jardin .coco-venue-philosophy p { color: var(--jd-ink) !important; }

/* ── Offerings ────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-offerings { background: var(--jd-ivory-soft) !important; }
.coco-venue-page--jardin .coco-venue-offering-card {
    background: #FFFFFF !important;
    border: 1px solid var(--jd-line) !important;
    box-shadow: 0 4px 16px rgba(74, 82, 64, 0.05) !important;
    color: var(--jd-ink) !important;
}
.coco-venue-page--jardin .coco-venue-offering-card h3 { color: var(--jd-ink-dark) !important; }
.coco-venue-page--jardin .coco-venue-offering-card p { color: var(--jd-ink) !important; }
.coco-venue-page--jardin .coco-venue-offering-card .offering-icon {
    filter: none !important;
}
.coco-venue-page--jardin .coco-venue-offering-card a.offering-link {
    color: var(--jd-accent-text) !important;
    border-bottom: 1px solid rgba(188, 87, 57, 0.4) !important;
}
.coco-venue-page--jardin .coco-venue-offering-card a.offering-link:hover {
    color: var(--jd-accent-text) !important;
    border-bottom-color: var(--jd-accent-text) !important;
}

/* ── Events strip ─────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-event-strip { background: transparent !important; }
.coco-venue-page--jardin .coco-venue-event-card {
    background: #FFFFFF !important;
    border: 1px solid var(--jd-line) !important;
    box-shadow: 0 4px 12px rgba(74, 82, 64, 0.06) !important;
}
.coco-venue-page--jardin .coco-venue-event-card h3 { color: var(--jd-ink-dark) !important; }
.coco-venue-page--jardin .coco-venue-event-card p { color: var(--jd-ink) !important; }
.coco-venue-page--jardin .coco-venue-event-card button {
    background: var(--jd-terracotta) !important;
    color: #FFFFFF !important;
}
.coco-venue-page--jardin .coco-venue-event-badge {
    background: var(--jd-accent-text) !important;
    color: #FFFFFF !important;
}
.coco-venue-page--jardin .coco-venue-no-events { color: var(--jd-ink) !important; }
.coco-venue-page--jardin .coco-venue-no-events a { color: var(--jd-accent-text) !important; }

/* ── Experience section ──────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-experience { background: var(--jd-ivory) !important; }
.coco-venue-page--jardin .coco-venue-exp-text h2 { color: var(--jd-ink-dark) !important; }
.coco-venue-page--jardin .coco-venue-exp-text p { color: var(--jd-ink) !important; }

/* ── Gallery ──────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-gallery { background: var(--jd-ivory-soft) !important; }
.coco-venue-page--jardin .coco-venue-gallery-grid > div {
    border: 1px solid var(--jd-line);
    box-shadow: 0 4px 16px rgba(74, 82, 64, 0.08);
}

/* ── Perfect-for ──────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-perfect-for { background: var(--jd-ivory) !important; }
.coco-venue-page--jardin .coco-venue-perfect-item {
    background: #FFFFFF !important;
    border: 1px solid var(--jd-line) !important;
    color: var(--jd-ink) !important;
}
.coco-venue-page--jardin .coco-venue-perfect-item h4 { color: var(--jd-ink-dark) !important; }
.coco-venue-page--jardin .coco-venue-perfect-item p { color: var(--jd-ink) !important; }
.coco-venue-page--jardin .coco-venue-perfect-item .perfect-icon {
    filter: none !important;
}
.coco-venue-page--jardin .coco-venue-concierge {
    background: var(--jd-accent-soft) !important;
    border: 1px dashed rgba(139, 168, 136, 0.5) !important;
    border-radius: 14px;
    padding: 24px;
    margin-top: 32px;
    text-align: center;
}
.coco-venue-page--jardin .coco-venue-concierge p {
    color: var(--jd-ink-dark) !important;
    margin-bottom: 14px;
    font-size: 1.05em;
}

/* ── Social / Reels ──────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-social-strip { background: var(--jd-ivory) !important; }
.coco-venue-page--jardin .coco-venue-social-tile {
    background: #FFFFFF !important;
    border: 1px solid var(--jd-line) !important;
    color: var(--jd-ink) !important;
}

/* ── FAQ + Map ────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-faq-map { background: var(--jd-ivory-soft) !important; }
.coco-venue-page--jardin .coco-venue-faq h3,
.coco-venue-page--jardin .coco-venue-map h3 { color: var(--jd-ink-dark) !important; }
.coco-venue-page--jardin .coco-venue-faq-item {
    background: #FFFFFF !important;
    border: 1px solid var(--jd-line) !important;
    color: var(--jd-ink) !important;
}
.coco-venue-page--jardin .coco-venue-faq-item strong { color: var(--jd-ink-dark) !important; }
.coco-venue-page--jardin .coco-venue-faq-item span { color: var(--jd-ink) !important; }
.coco-venue-page--jardin .coco-venue-faq-item a,
.coco-venue-page--jardin a.hg-link {
    color: var(--jd-accent-text) !important;
    text-decoration: underline;
    text-decoration-color: rgba(188, 87, 57, 0.3);
}
.coco-venue-page--jardin .coco-venue-faq-item a:hover,
.coco-venue-page--jardin a.hg-link:hover {
    color: var(--jd-accent-text) !important;
    text-decoration-color: var(--jd-accent-text);
}
.coco-venue-page--jardin .coco-venue-map-box {
    background: var(--jd-ivory-soft) !important;
    border: 1px solid var(--jd-line) !important;
    color: var(--jd-ink) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.coco-venue-page--jardin .coco-venue-footer {
    background: var(--jd-ink-dark) !important;
    color: var(--jd-ivory) !important;
    text-align: center;
    padding: 32px 16px;
}

/* ── Drop subtle olive-branch motif behind philosophy ────── */
.coco-venue-page--jardin .coco-venue-philosophy-inner::before {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    background: var(--jd-accent-text);
    margin: 0 auto 18px;
}


/* ── Design Bible v1: Garden register shape and type ──────────────────── */
.coco-venue-page--jardin h1,
.coco-venue-page--jardin h2,
.coco-venue-page--jardin .coco-venue-title {
    font-family: var(--coco-font-display) !important;
    font-weight: 400 !important;
    /* Sentence case, per the bible. DM Serif Display is not Bebas — all
       caps and 0.88 leading belonged to the old Haus register. */
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.05;
    color: var(--jd-ink);
}
.coco-venue-page--jardin,
.coco-venue-page--jardin *,
.coco-venue-page--jardin *::before,
.coco-venue-page--jardin *::after {
    border-radius: 0 !important;
}
.coco-venue-page--jardin .coco-venue-btn-primary,
.coco-venue-page--jardin .btn-gold {
    background: var(--jd-accent-text) !important;
    background-image: none !important;
    color: var(--jd-ivory) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    text-transform: none !important;
    min-height: 48px;
}
.coco-venue-page--jardin .coco-venue-btn-primary:hover,
.coco-venue-page--jardin .btn-gold:hover {
    background: #8F3A22 !important;   /* deeper terracotta on ivory */
    transform: none !important;
}
.coco-venue-page--jardin :focus-visible {
    outline: 2px solid var(--jd-accent-text) !important;
    outline-offset: 2px !important;
}

/* ── The Weekly Lineup ────────────────────────────────────── */
/* The base rules read --venue-card / --venue-border, now set above. The day
   label needs its own rule: the page-surface `... span { color: inherit }`
   is more specific than base's `.coco-venue-night__day`, so the accent was
   being overridden along with everything else. */
.coco-venue-page--jardin .coco-venue-night {
    border-radius: 0;
}
.coco-venue-page--jardin .coco-venue-night__day {
    color: var(--jd-accent-text);           /* ember deep — 5.1:1 on white */
    font-family: var(--coco-font-primary);
}
.coco-venue-page--jardin .coco-venue-night__name {
    color: var(--jd-ink);
    font-family: var(--coco-font-primary);
}
.coco-venue-page--jardin .coco-venue-night__cta {
    color: var(--jd-ink);
    opacity: .65;
}
.coco-venue-page--jardin .coco-venue-night__media {
    background-color: var(--jd-ivory-soft);
}
.coco-venue-page--jardin .coco-venue-night:hover {
    border-color: var(--jd-terracotta);
}
.coco-venue-page--jardin .coco-venue-night:hover .coco-venue-night__cta {
    opacity: 1;
}

/* ── Los Mochis pass (21 Oct) ─────────────────────────────────
   Folabi's one reference is losmochis.co.uk. What it actually does:
     · a SMALL wordmark, centred at the top, over the photograph
     · one centred serif statement in caps, widely letterspaced
     · a warm off-white ground for content, never grey
     · section headings in the brand colour, caps, letterspaced
     · OUTLINED rectangular buttons with letterspaced caps — the only
       filled block on the page is the single primary action
     · one full-bleed band of solid brand colour to break the page
     · no emoji, no icon cards, no drop shadows, no rounded corners
   Colour comes from the imagery; the interface stays quiet.          */

.coco-venue-page--jardin .coco-jardin-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.coco-venue-page--jardin .coco-venue-title--mark { line-height: 0; margin: 0 0 26px; }
.coco-venue-page--jardin .coco-jardin-wordmark {
    display: block;
    margin: 0 auto;
    width: clamp(112px, 12vw, 152px);   /* Los Mochis sits at ~150px */
    height: auto;
}
.coco-venue-page--jardin .coco-jardin-hero-line {
    font-family: var(--coco-font-display);
    font-size: clamp(25px, 3.4vw, 46px);
    line-height: 1.18;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFF !important;
    margin: 0 0 30px;
    text-shadow: 0 2px 26px rgba(12, 34, 33, 0.5);
}
.coco-venue-page--jardin .coco-jardin-hero .coco-venue-cta-row { justify-content: center; }

/* Section headings: caps, letterspaced, brand colour, centred. */
.coco-venue-page--jardin .coco-venue-section-title,
.coco-venue-page--jardin .coco-venue-philosophy h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-size: clamp(23px, 2.9vw, 38px);
    line-height: 1.2;
    color: var(--jd-ink) !important;
}

/* Body copy: centred, narrow measure, generous leading. */
.coco-venue-page--jardin .coco-venue-philosophy p,
.coco-venue-page--jardin .coco-venue-offering-card p,
.coco-venue-page--jardin .coco-venue-perfect-item p {
    line-height: 1.75;
    max-width: 58ch;
}
.coco-venue-page--jardin .coco-venue-philosophy p { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons: outlined, letterspaced caps. One filled block only. */
.coco-venue-page--jardin .coco-venue-btn-primary,
.coco-venue-page--jardin .btn-gold {
    background: var(--jd-terracotta) !important;
    background-image: none !important;
    color: #FFF !important;
    border: 1px solid var(--jd-terracotta) !important;
    box-shadow: none !important;
    font-family: var(--coco-font-primary);
    font-weight: 600 !important;
    font-size: 12px;
    letter-spacing: 0.17em;
    text-transform: uppercase !important;
    padding: 17px 34px;
    min-height: 0;
}
.coco-venue-page--jardin .coco-venue-btn-primary:hover,
.coco-venue-page--jardin .btn-gold:hover {
    background: #9C3F26 !important;
    border-color: #9C3F26 !important;
    transform: none !important;
}
.coco-venue-page--jardin .coco-venue-btn-outline,
.coco-venue-page--jardin a.offering-link {
    background: transparent !important;
    border: 1px solid var(--jd-teal) !important;
    color: var(--jd-teal) !important;
    font-family: var(--coco-font-primary);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    padding: 16px 30px;
    display: inline-block;
    text-decoration: none !important;
}
.coco-venue-page--jardin .coco-venue-btn-outline:hover,
.coco-venue-page--jardin a.offering-link:hover {
    background: var(--jd-teal) !important;
    color: var(--jd-ivory) !important;
}

/* Cards stop being cards — no white box, no border, no shadow. */
.coco-venue-page--jardin .coco-venue-offering-card,
.coco-venue-page--jardin .coco-venue-perfect-item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
    padding: 0 14px;
}
.coco-venue-page--jardin .coco-venue-offering-card h3,
.coco-venue-page--jardin .coco-venue-perfect-item h4 {
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: var(--jd-accent-text) !important;
}
.coco-venue-page--jardin .coco-venue-offering-card p,
.coco-venue-page--jardin .coco-venue-perfect-item p { margin-left: auto; margin-right: auto; }

/* One full-bleed teal band, the way Los Mochis drops to aubergine. */
.coco-venue-page--jardin .coco-venue-perfect-for {
    background: var(--jd-teal) !important;
    padding: 76px 0 84px;
}
.coco-venue-page--jardin .coco-venue-perfect-for .coco-venue-section-title,
.coco-venue-page--jardin .coco-venue-perfect-for h4,
.coco-venue-page--jardin .coco-venue-perfect-for p,
.coco-venue-page--jardin .coco-venue-perfect-for .coco-venue-concierge p {
    color: var(--jd-ivory) !important;
}
.coco-venue-page--jardin .coco-venue-perfect-for h4 { color: #E8A58E !important; }

/* Gentle warm wash on the hero photograph, not a grey gradient. */
.coco-venue-page--jardin .coco-venue-hero::after,
.coco-venue-page--jardin .coco-venue-hero-scrim {
    background: linear-gradient(
        to bottom,
        rgba(14, 36, 34, 0.26) 0%,
        rgba(14, 36, 34, 0.30) 55%,
        rgba(14, 36, 34, 0.42) 100%
    ) !important;
}