@charset "UTF-8";
/* =============================================
   ARLO CHILD THEME — Global Styles
   global.css is loaded FIRST — defines the
   design system that all other CSS files inherit.
   ============================================= */

/* =============================================
   SELF-HOSTED FONTS
   Replaces Google Fonts — faster, no external
   requests, GDPR-clean.
   ============================================= */

/* Cormorant */
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Muli */
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Semi-BoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('../fonts/Muli-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Marigold — display/script font for decorative headings */
@font-face {
    font-family: 'Marigold';
    src: url('../fonts/MARIGOLD.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   DESIGN TOKENS — Single source of truth.
   Change a value here, it updates site-wide.
   ============================================= */
:root {
    /* Brand Colors */
    --color-sand:       #dad8d5;   /* header, footer, instagram strip bg */
    --color-dark:       #3d3730;   /* primary text, CTA border */
    --color-mid:        #5a5248;   /* secondary text, captions */
    --color-white:      #ffffff;   /* bottom bar bg */

    /* Typography */
    --font-primary:     'Muli', sans-serif;
    --font-display:     'Cormorant', serif;

    /* Site grid — matches eltdf-grid-1300 */
    --grid-max-width:   1330px;
    --grid-gutter:      15px;
}

/* =============================================
   SITE-WIDE RESETS / PARENT THEME OVERRIDES
   Rules that apply globally and protect against
   parent theme updates overriding our intent.
   ============================================= */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal overflow on all screen sizes.
   The Elated theme grid section uses a fixed px width — cap it so it
   never exceeds the viewport on mobile/tablet. */
html, body {
    overflow-x: hidden;
}

/* Ported from parent-style-inline-css 2026-05-17.
   Sets a universal paragraph baseline of weight 400. Without this rule the
   parent theme defaults <p> to weight 300 (thin), which also cascades to a
   weaker <strong>: UA's `strong { font-weight: bolder }` resolves to only
   400 when the parent is 300 (vs 700 when the parent is 400). Single line,
   fixes both. Page-specific p rules with higher specificity still win. */
p {
    font-weight: 400;
}

.eltdf-row-grid-section {
    max-width: 100% !important;
}

/* =============================================
   MOBILE CONTENT PADDING
   Site-wide rule: when WPBakery row_inner columns
   collapse at mobile, force them to full width
   AND add 25px side padding so body text never
   touches the phone frame edges.

   Targets ALL our top content section row classes
   (home, venue, content, faq heading, video tour
   heading, etc.). Add new ones to this list as
   new pages are built.
   ============================================= */

/* ==========================================================================
   Content-section row top/bottom padding — at desktop these rows get a
   generous 60-80px top/bottom padding from their WPBakery vc_custom_XXX
   classes. On tablet/mobile that translates to a giant empty band between
   the hero image and the first content row. Kill the top padding and
   reduce the bottom to something modest at ≤959px. Applies to every
   *-content-section class we use on content pages, so new pages get it
   automatically as long as they use one of these row classes.
   ========================================================================== */

@media (max-width: 959px) {
    /* Use attribute selector [class*="vc_custom_"] to raise specificity to
       (0,2,0) — beats the (0,1,0) .vc_custom_XXX inline WPBakery rules that
       have `padding-top: 60px !important` baked in from the post meta.
       NOTE 2026-05-02 (H2): home-content-section excluded — Lisa wanted
       more breathing room below the Schedule a Tour button before the
       venue image. Home now uses its own rules in home.css
       (60px mobile / 110px desktop+tablet). Other content-section types
       keep the 30px tablet/mobile compaction. */
    .venue-content-section[class*="vc_custom_"],
    .content-section[class*="vc_custom_"],
    .faq-heading-row[class*="vc_custom_"],
    .videotour-heading-row[class*="vc_custom_"],
    .experience-content-section[class*="vc_custom_"],
    .venue-content-section,
    .content-section,
    .faq-heading-row,
    .videotour-heading-row,
    .experience-content-section {
        padding-top: 0 !important;
        padding-bottom: 30px !important;
    }
}

@media (max-width: 767px) {
    .home-content-section .vc_row_inner,
    .home-content-section .vc_row.vc_inner,
    .venue-content-section .vc_row_inner,
    .venue-content-section .vc_row.vc_inner,
    .content-section .vc_row_inner,
    .content-section .vc_row.vc_inner,
    .faq-heading-row .vc_row_inner,
    .faq-heading-row .vc_row.vc_inner,
    .videotour-heading-row .vc_row_inner,
    .videotour-heading-row .vc_row.vc_inner,
    .experience-content-section .vc_row_inner,
    .experience-content-section .vc_row.vc_inner {
        display: block !important;
    }

    .home-content-section .vc_column_inner,
    .home-content-section .vc_col-sm-2,
    .home-content-section .vc_col-sm-8,
    .venue-content-section .vc_column_inner,
    .venue-content-section .vc_col-sm-2,
    .venue-content-section .vc_col-sm-8,
    .content-section .vc_column_inner,
    .content-section .vc_col-sm-2,
    .content-section .vc_col-sm-8,
    .faq-heading-row .vc_column_inner,
    .faq-heading-row .vc_col-sm-2,
    .faq-heading-row .vc_col-sm-8,
    .videotour-heading-row .vc_column_inner,
    .videotour-heading-row .vc_col-sm-2,
    .videotour-heading-row .vc_col-sm-8,
    .experience-content-section .vc_column_inner,
    .experience-content-section .vc_col-sm-2,
    .experience-content-section .vc_col-sm-8 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 55px !important;
        padding-right: 55px !important;
    }
}

/* =============================================
   Top intro paragraphs — body copy color
   Used by the big-heading + subhead + body block that sits at the
   top of Explore the Venue, The Arlo Experience, and Gallery pages.
   The headings keep their own .marigold-heading typography; only
   <p> is targeted so h2 is untouched. For Gallery we scope by
   .page-id-5994 because .content-section is the generic content-page
   class and would over-apply to other pages using the pattern.
   ============================================= */
.venue-content-section p,
.experience-content-section p,
.page-id-5994 .content-section p,
.page-id-5985 .home-content-section p,
.page-id-5983 .content-section p,
.page-id-6068 .content-section p,
.page-id-5860 .content-section p,
.page-id-5918 .content-section p,
.page-id-5998 .content-section p,
.page-id-6007 .content-section p,
.page-id-6114 .content-section p,   /* privacy policy */
.videotour-heading-row p {
    color: #262626 !important;
}

/* Interior-page style guide — marigold heading top spacing.
   Every interior page's top h2 (the big thin-serif marigold headline)
   gets 45px of margin-top so they all land at the same viewport position.
   Row-level padding-top was removed from content.css and faq.css as part
   of this migration (2026-04-15). Going forward, any new content page
   should use .content-section as its row el_class and the heading will
   automatically pick up this rule via the descendant selector. */
.venue-content-section .marigold-heading,
.experience-content-section .marigold-heading,
.content-section .marigold-heading,
.faq-heading-row .marigold-heading,
.videotour-heading-row .marigold-heading {
    margin-top: 45px !important;
}

/* =============================================
   SEO H1 conversion (2026-06-26): interior page TITLES were flipped from
   <h2 class="marigold-heading"> to <h1 …> so each page has exactly one
   keyword H1. The parent theme sets h2{line-height:1.36em} vs h1{1.3em},
   which would shrink the title's line-box ~3px (a real, if tiny, drift).
   The marker class .arlo-page-h1 (added ONLY to the flipped titles)
   restores the exact h2 line-height → ZERO visual drift. Scoped to the
   marker so it never touches the pre-existing h1.marigold-heading already
   on /austin-wedding-venue-page/ (which stays at its approved 1.3em). */
.arlo-page-h1 {
    line-height: 1.36em;
}

/* Home hero logo promoted to the page H1 (2026-06-27) — see functions.php
   arlo_home_logo_h1. display:contents makes the <h1> wrapper generate no
   box, so the logo image lays out exactly as before = zero visual drift. */
.arlo-home-h1 {
    display: contents;
}

/* Contact page (Inquire section) — historical override removed 2026-05-26.
   The legacy contact-us page used a background-color row + .shopping-font
   heading, which started higher than other interior pages, so the 45px
   margin-top was zeroed. The page has since been rewritten to use the
   canonical .content-section pattern (matching /schedule-a-tour/ and
   the rest of the interior pages), and now needs the standard 45px
   push from the generic .content-section .marigold-heading rule above. */

/* =============================================
   Kill .eltdf-cover — Elated side-area backdrop overlay.
   The side-area itself was killed via remove_action in functions.php
   (see 2026-04-16 cleanup), but the parent theme's JS still injects
   a `<div class="eltdf-cover">` on every page. Position fixed, full
   viewport, opacity 0 — invisible but captures pointer events,
   blocking dev-tools inspection. No way to reach the open state since
   the side-area trigger no longer exists. Pure orphan, safe to nuke.
   ============================================= */
.eltdf-cover {
    display: none !important;
}

/* =============================================
   Anchor scroll offset — site-wide.
   Sticky header would otherwise cover the top of any in-page anchor
   target. scroll-margin-top tells the browser to land that much further
   down when scrolling to a #fragment. Has no visual effect on layout —
   only affects scroll-into-view behavior. Drop-in safe for future anchors.

   Header heights: 120px ≥1501 (desktop nav) / 80px ≤1500 (hamburger mode).
   Adding ~20px breathing room above each landed anchor.
   ============================================= */
[id] {
    scroll-margin-top: 100px;  /* hamburger: 80 + 20 */
}
@media (min-width: 1501px) {
    [id] {
        scroll-margin-top: 140px;  /* desktop: 120 + 20 */
    }
}