/*! annabelle — default.css | variables, typography, forms, helpers */


/* ===== Fonts ===== */


/* ===== Variables (confirmed from Figma 2026-07-21) ===== */
:root {

    /*-- palette --*/
    --ab-dark-green:           #1c2517;
    --ab-cream:                #f9f3e6;

    --ab-dark-100:             var(--ab-dark-green);
    --ab-light-100:            var(--ab-cream);
    --ab-cream-2:              #f3ede0;

    --color-black:             #000000;
    --color-white:             #ffffff;
    --ab-placeholder-gray:     #d9d9d9;

    /*-- Bootstrap overrides --*/
    --bs-primary:              var(--ab-dark-green);
    --bs-secondary:            var(--ab-cream);
    --bs-primary-rgb:          28, 37, 23;
    --bs-secondary-rgb:        249, 243, 230;

    --bs-body-color:           var(--ab-dark-green);
    --bs-body-color-rgb:       28, 37, 23;
    --bs-body-bg:              var(--ab-cream);
    --bs-body-bg-rgb:          249, 243, 230;

    --bs-link-color:           var(--ab-dark-green);
    --bs-link-color-rgb:       28, 37, 23;
    --bs-link-hover-color:     var(--ab-dark-green);
    --bs-link-hover-color-rgb: 28, 37, 23;

    --bs-border-color:         var(--ab-dark-green);
    --bs-border-color-rgb:     28, 37, 23;

    /*-- Fonts --*/
    --ff-display:              "adobe-caslon-pro", Georgia, "Times New Roman", serif;
    --ff-body:                 "adobe-caslon-pro", Georgia, "Times New Roman", serif;
    --ff-mono:                 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --ff-sans:                 "Montserrat", Helvetica, Arial, sans-serif;

    --bs-body-font-family:     var(--ff-body);
    --bs-heading-font-family:  var(--ff-display);
    --bs-body-font-size:       14px;
    --bs-body-line-height:     1.3;
    --bs-body-font-weight:     400;

    /*-- line-height tokens --*/
    --lh-heading:              1.2;
    --lh-body:                 1.3;

    /*-- Letter-spacing tokens --*/
    --ls-heading:              0;
    --ls-body:                 0.03em;
    --ls-tag:                  0.1em;

    /*-- Easing — MASTER ANIMATION CURVE: change this ONE line to retune every animation site-wide (client request). Curves: easings.net --*/
    --ease-master:             cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart:          var(--ease-master);

    /*-- Content reveal — speed, travel + curve of every scroll-in animation --*/
    --reveal-duration:         3s;
    --reveal-distance:         2%;
    --reveal-ease:             cubic-bezier(0.33, 1, 0.68, 1);

    /*-- True easeOutQuart (client-requested curve for drawers + menu items; NOT the --ease-out-quart alias) --*/
    --ease-quart:              cubic-bezier(0.25, 1, 0.5, 1);

    /*-- Draw menus — slide speed + curve of every drawer panel (easeOutQuart, client request) --*/
    --drawer-duration:         0.9s;
    --drawer-ease:             var(--ease-quart);

}


/* ===== Master motion ===== */
.animated {
    -webkit-animation-duration: var(--reveal-duration);
    animation-duration: var(--reveal-duration);
    -webkit-animation-timing-function: var(--reveal-ease);
    animation-timing-function: var(--reveal-ease);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, var(--reveal-distance), 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


/* ===== Flex helpers ===== */
.c-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.c-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}


/* ===== Common section spacing ===== */
.section-space {
    padding: 50px 0;
}

@media (min-width: 768px) {
    .section-space { padding: 70px 0; }
}

@media (min-width: 1400px) {
    .section-space { padding: 100px 0; }
}


/* ===== Section background utilities ===== */
.dark-section-bg  { background-color: var(--ab-dark-green)  !important; color: var(--ab-cream); }
.light-section-bg { background-color: var(--ab-cream)  !important; }

.dark-section-bg h1, .dark-section-bg .h1,
.dark-section-bg h2, .dark-section-bg .h2,
.dark-section-bg h3, .dark-section-bg .h3,
.dark-section-bg h4, .dark-section-bg .h4,
.dark-section-bg h5, .dark-section-bg .h5,
.dark-section-bg h6, .dark-section-bg .h6,
.dark-section-bg p,
.dark-section-bg a:not([class*="btn"]):not([class*="cta-"]) {
    color: var(--ab-light-100);
}


/* ===== Container — fluid, 20px base / 60px ≥1400 (client spec) ===== */
.container, .container-fluid, .container-xxl {
    padding: 0 20px;
}

@media (min-width: 1400px) {
    .container, .container-fluid, .container-xxl {
        padding: 0 60px;
    }
}


/* ===== Lenis smooth scroll ===== */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ===== Body ===== */
body {
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--ab-dark-green);
    background-image: url('../images/body-bg.jpg');
    background-size: auto;
    background-position: left top;
    background-repeat: repeat;
    background-color: var(--ab-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1200px) {
    body { font-size: 17px; }
}


/* ===== Headings (Figma scale: mobile base → desktop at 1400) ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ff-display);
    font-weight: 400;
    color: inherit;
    margin: 0 0 0.4em;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

h1, .h1 { font-size: 34px; }
@media (min-width: 992px)  { h1, .h1 { font-size: 40px; } }
@media (min-width: 1200px) { h1, .h1 { font-size: 44px; } }
@media (min-width: 1400px) { h1, .h1 { font-size: 48px; } }

h2, .h2 { font-size: 24px; }
@media (min-width: 1200px) { h2, .h2 { font-size: 28px; } }
@media (min-width: 1400px) { h2, .h2 { font-size: 32px; } }

h3, .h3 { font-size: 20px; }
@media (min-width: 1200px) { h3, .h3 { font-size: 22px; } }
@media (min-width: 1400px) { h3, .h3 { font-size: 24px; } }

h4, .h4 { font-size: 16px; }
@media (min-width: 1200px) { h4, .h4 { font-size: 18px; } }
@media (min-width: 1400px) { h4, .h4 { font-size: 20px; } }

h5, .h5 { font-size: 15px; }

h6, .h6 { font-size: 14px; }


/* ===== Note text (Figma "Note" style — [01] / [fig. 02] labels) ===== */
.note-text { font-size: 14px; line-height: 1; letter-spacing: 0; }


/* ===== Display heading (hero + Get-in-Touch banner) ===== */
.xl-heading { font-size: 32px; line-height: 1; letter-spacing: 0; }
@media (min-width: 768px)  { .xl-heading { font-size: 38px; } }
@media (min-width: 992px)  { .xl-heading { font-size: 42px; } }
@media (min-width: 1200px) { .xl-heading { font-size: 48px; } }
@media (min-width: 1400px) { .xl-heading { font-size: 53px; } }


/* ===== Body copy ===== */
p {
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: inherit;
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    p { font-size: 17px; }
}

strong, b { font-weight: 400; }
em, i     { font-style: italic; }


/* ===== Links ===== */
a {
    color: var(--bs-link-color);
    text-decoration: none;
    transition: opacity 0.3s var(--ease-out-quart);
}

a:hover,
a:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
    opacity: 0.7;
}

p a {
    text-decoration: underline;
    text-underline-position: from-font;
}


/* ===== Buttons (design uses text buttons — Menu / Close / Send) ===== */
button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}


/* ===== Divider line ===== */
hr,
.divider-line {
    border: 0;
    border-top: 1px solid var(--ab-dark-green);
    opacity: 0.3;
    margin: 0;
}

.dark-section-bg hr,
.dark-section-bg .divider-line {
    border-top-color: var(--ab-cream);
}


/* ===== Images ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ===== Form fields (design: underline fields, boxed textarea) ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select {
    width: 100%;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: inherit;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--ab-dark-green);
    border-radius: 0;
    padding: 8px 0 12px;
    transition: border-color 0.3s var(--ease-out-quart);
}

textarea {
    width: 100%;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: inherit;
    background-color: transparent;
    border: 1px solid var(--ab-dark-green);
    border-radius: 0;
    padding: 14px 16px;
    resize: vertical;
    min-height: 275px;
    transition: border-color 0.3s var(--ease-out-quart);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ab-dark-green);
}

@media (min-width: 1200px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    textarea,
    select { font-size: 17px; }
}

::-webkit-input-placeholder { color: var(--ab-dark-green); opacity: 0.6; }
::-moz-placeholder          { color: var(--ab-dark-green); opacity: 0.6; }
:-ms-input-placeholder      { color: var(--ab-dark-green); opacity: 0.6; }
::-ms-input-placeholder     { color: var(--ab-dark-green); opacity: 0.6; }
::placeholder               { color: var(--ab-dark-green); opacity: 0.6; }

label {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: inherit;
    margin-bottom: 4px;
}

@media (min-width: 1200px) {
    label { font-size: 17px; }
}


/* ===== Screen-reader ===== */
.screen-reader-text,
.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--bs-primary);
    clip: auto !important;
    clip-path: none;
    color: var(--ab-light-100);
    display: block;
    font-size: 16px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}