@import "colours.css";

/* Theme-level tokens and base typography/layout */
:root {
    --site-max-width: 1100px; /* operational width (content centered) */
    /* Responsive breakpoints - choose sensible viewport widths */
    /* Mid: wide tablets / small laptops (use to adjust layout before compacting) */
    --site-mid-width: 900px; /* recommended: 900px */
    /* Min (desktop compact): typical small-desktop or large-tablet */
    --site-min-width: 750px;  /* recommended: 720px */
    /* Mobile breakpoint: smartphones */
    --site-mobile-width: 500px; /* recommended: 480px */
    --spacing-lg: 2rem;
    --spacing-md: 1.25rem;
    --spacing-sm: 1rem;
    --card-radius: 8px;
    --card-shadow: 0 6px 18px rgba(0,0,0,0.06);
    /* Header sizing tokens */
    --header-height-large: 160px;
    --header-height-middle: 130px;
    --header-height-small: 100px;
    --header-height-itty: 80px;

    --footer-height-large: 200px;
    --footer-height-middle: 180px;
    --footer-height-small: 150px;
    --footer-height-itty: 120px;

    --font-weight-regular: 400; /* base weight for body and general text (recommended) */
    --font-weight-title: 400;  /* strong weight for UI emphasis/links */
    --font-family-base: 'Kanit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Fallback: contain any remaining horizontal overflow caused by positioned
   or animated elements. This is a last-resort containment to prevent
   persistent horizontal scrollbars while we refine component rules. */
html, body {
    overflow-x: hidden;
}

html { font-size: 16px; }
body {
    font-family: var(--font-family-base);
    color: var(--text-black);
    background-color: var(--background-color);
    margin: 0;
    line-height: 1.6;
}

#main-content.padding { padding-top: var(--header-height-large); }

@media (max-width: 1100px) {
    #main-content.padding { padding-top: calc(var(--header-height-large) - 20px); }
}

@media (max-width: 900px) {
    #main-content.padding { padding-top: var(--header-height-small); }
}

h1 { font-size: 1.75rem; margin: 0 0 0.5rem 0; }
h1 { text-align: center; color: var(--text-blue);}
h1 { border-bottom: 2px solid var(--brand-red) !important; }
h2 { font-size: 1.5rem; margin: 0 0 0.75rem 0; }
h3 { font-size: 1.25rem; margin: 0 0 0.65rem 0; }
h3 {
    display: inline-block !important;
    width: auto !important;
    align-self: flex-start !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
}

h4 { font-size: 1rem; margin: 0 0 0.5rem 0; }

/* #cards utilities for background helpers */
#cards .background-white { background-color: var(--background-white); }
#cards .background-eggshell { background-color: var(--background-eggshell); }
#cards .background-blue { background-color: var(--background-blue); }
#cards .background-black { background-color: var(--background-black); }
#cards .background-grey { background-color: var(--background-grey); }
#cards .background-footer { background-color: var(--background-footer); }
#cards .background-margins { margin: 0em 0em 0em 0em; }
#cards .background-spacing { padding: 2em 2em 2em 2em; }
#cards .background-corners { border-radius: 8px; }
#cards .ninehundred {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#cards .ninehundred { text-align: center; }

.site-container { max-width: var(--site-max-width); margin: 0 auto; padding: 0 var(--spacing-md); }

.split-card-ninehundred {
    /* constrain content to 900px centered while outer background can be full-bleed */
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    gap: 5px;
    align-items: center;
}

/* ensure centering when split-card is inside a background wrapper */
.background-eggshell > .split-card-ninehundred { margin-left: auto !important; margin-right: auto !important; }
#cards h3.title, .cards h3.title {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}
#cards .h3-text, .cards .h3-text {
    display: block !important;
    width: auto !important;
    align-self: flex-start !important;
    margin-bottom: 1.1rem !important;
    font-weight: 400 !important;
    color: var(--brand-white) !important;
    font-size: 1rem !important;
    padding-bottom: 0.25rem !important;
    text-align: center;
}
#cards .h3-text a, .cards .h3-text a {
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 0rem !important;
}
#cards .h3-text a:hover, .cards .h3-text a:hover {
    color: var(--brand-red) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Typography and link styles for clause cards inside #cards using theme helpers */
#cards .h4-black { display: block !important; width: auto !important; align-self: flex-start !important; margin-bottom: 0.25rem !important; font-weight: 400 !important; color: var(--brand-black) !important; font-size: .75rem !important; padding-bottom: 0rem !important; text-align: justify !important; }
#cards .h4-black a { color: var(--brand-gold); text-decoration: none; font-weight: 600; text-transform: uppercase;}
#cards .h4-black a:hover { color: var(--brand-red); text-decoration: none; }
#cards .h4-muted { display: block !important; width: auto !important; align-self: flex-start !important; margin-bottom: 0.25rem !important; font-weight: 400 !important; color: var(--brand-muted) !important; font-size: .75rem !important; padding-bottom: 0rem !important; text-align: justify !important; }
#cards .h4-muted a { color: var(--brand-gold); text-decoration: none; font-weight: 600; text-transform: uppercase;}
#cards .h4-muted a:hover { color: var(--brand-red); text-decoration: none; }
#cards .h4-black, #cards .h4-muted { text-align: left !important; margin: 0;}


/* Privacy button (theme-level) - based on header .email-button template */
.privacy-button {
    color: var(--brand-gold);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--brand-gold);
    background: transparent;
    cursor: pointer;
    min-height: 36px;
    padding: 6px 20px;
    border-radius: 28px;
}
.privacy-button:hover {
    background: transparent;
    color: var(--brand-red);
    border-color: var(--brand-red);
}

/* Service overview cards: 4-up layout within the 900px `.ninehundred` area */
/* Each card uses theme helpers (background-*) and the `service-overview` class */
#cards .service-overview {
    box-sizing: border-box;
    /* Four cards across with 8px gap: use calc to adapt to container width */
    width: calc((100% - 24px) / 4);
    min-width: 180px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    position: relative;
    padding: 1.25rem;
    min-height: 360px; /* keep cards same height so content aligns horizontally */
}
/* ensure parent lays out service cards in a single row when space allows */
#cards .ninehundred { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }

#cards .service-overview .card-graphic { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 60px; padding-top: -30px; margin-top: -30px; }
#cards .service-overview .card-graphic img { width: 100px; height: auto; max-width: 100%; display: block; }
#cards .service-overview .h4 { color: var(--text-blue); text-decoration: none; font-size: 1rem; line-height: 1; margin-bottom: 0px; }
#cards .service-overview .h4-black { color: var(--text-muted); text-align: justify; flex: 1 1 auto; overflow: auto; font-size: .90rem;}
#cards .service-overview .h4-muted { color: var(--text-muted); text-align: justify; flex: 1 1 auto; overflow: auto; font-size: .90rem; margin-top: 0px; margin-bottom: -50px;}

/* Emergency pill badge in top-right of the card */
.service-overview .emergency-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--brand-red);
    color: var(--brand-white);
    padding: 0px 16px;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Reusable general CTA button based on .privacy-button styles */
.general-button {
    color: var(--brand-gold);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--brand-gold);
    background: transparent;
    cursor: pointer;
    min-height: 36px;
    padding: 6px 20px;
    border-radius: 28px;
}
.general-button:hover { 
    background: transparent;
    color: var(--brand-red);
    border-color: var(--brand-red);
}

#cards .privacy-button { display: inline-flex; margin: 0 auto 1rem auto; }


/* Split layout for the intro section: left 498px, right 397px with 5px gap (fits 900px container) */
.split-card-ninehundred {
    /* constrain content to 900px centered while outer background can be full-bleed */
    width: 900px;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 5px;
    align-items: center;
}
.split-card-ninehundred .inner-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* center everything horizontally */
    text-align: justify;
    color: var(--brand-black);
}
.split-card-ninehundred .inner-card.split-left { width: 450px; }
.split-card-ninehundred .inner-card.split-right { width: 350px; }

/* Vertically center content inside the left column so the CTA sits centered */
.split-card-ninehundred .split-left,
.split-card-ninehundred .inner-card.split-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-card-ninehundred .inner-card img { display: block; margin: 0 auto; }

/* Ensure paragraphs inside the split-card override global #cards .h3-text (higher specificity) */
#cards .split-card-ninehundred .h3-text {
    color: var(--brand-black) !important;
    text-align: justify;
    font-size: 0.8rem !important;
}

/* center CTA horizontally inside the left column */
.split-card-ninehundred .center-cta { text-align: center; }
.split-card-ninehundred .center-cta .general-button { margin: 0 auto; display: inline-flex; }


/* Inline quote form used on home page */
.quote-inline-form {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 900px; /* ensure form content fits the 900px content area */
    box-sizing: border-box;
}

/* Inputs and textarea share the same font and box-sizing */
.quote-inline-form input[type="text"], .quote-inline-form textarea { box-sizing: border-box; font-family: var(--font-family-base); font-size: 0.95rem; line-height: 1.2; color: var(--text-black); }

/* fixed widths for name and contact to match visual spec */
.quote-inline-form input[type="text"] {
    flex: 0 0 150px;
    min-width: 120px;
    max-width: 180px;
    padding: 8px 12px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
}

/* Work field grows to fill remaining space and is resizable vertically; initial height matches other inputs */
.quote-inline-form textarea {
    /* allow textarea to flex and shrink to fit the 900px container */
    flex: 1 1 auto;
    min-width: 120px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    resize: vertical;
    overflow-y: hidden;
    box-sizing: border-box;
    height: 35px; /* 1px shorter to match visual alignment */
}

.quote-inline-form .general-button {
    flex: 0 0 200px;
    width: 200px;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--brand-gold);
    background: transparent;
    color: var(--brand-gold);
    cursor: pointer;
    box-sizing: border-box;
}

/* compact centered status message placed below the inline form (not inside the flex row) */
#cards .quote-banner #quote-form-message {
    display: block;
    width: auto;
    max-width: 400px;
    margin: 8px auto 0;
    padding: 4px 8px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.2;
    box-sizing: border-box;
    color: var(--brand-white);
}


/* Compact 900px top banner for the inline quote form */
#cards .quote-banner.background-spacing { padding: 6px 0 !important; }
/* make the banner stack heading on top of the form with no gap and center its contents */
#cards .quote-banner .ninehundred { display: flex; flex-direction: column; gap: 0; padding: 0; align-items: center; }
/* restore the same h3.title styling as other #cards headings and remove extra bottom gap */
#cards .quote-banner h1.title {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 0 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}
#cards .quote-banner h1.nounderline {
    border-bottom: 0px solid var(--brand-red) !important;
}
#cards .quote-banner h3.title {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 0 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 0px solid var(--brand-red) !important;
    text-align: center !important;
}

/* form layout: center the inline form inside the 900px container
   Use inline-flex + auto width so the form itself can be centered by the parent
   and individual field sizes can be adjusted without being blocked by !important rules. */
#cards .quote-banner .quote-inline-form {
    /* make the form a fixed 900px content row and center it inside .ninehundred
       so children sizing is deterministic and the textarea can flex to fill
       remaining space */
    display: flex;
    gap: 5px; /* reduced spacing per request */
    align-items: center;
    justify-content: flex-start;
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
}

/* Name and contact default to 150px but are changeable (no !important) */
#cards .quote-banner .quote-inline-form > input#quote-name,
#cards .quote-banner .quote-inline-form > input#quote-contact {
    flex: 0 0 150px;
    width: 150px;
    min-width: 120px;
    max-width: 220px;
    box-sizing: border-box;
}

/* Work field flexible: fills remaining space and is resizable vertically */
#cards .quote-banner .quote-inline-form > textarea#quote-work {
    flex: 1 1 auto;
    min-width: 150px;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    height: 35px;
    overflow-y: hidden;
    text-align: 1px;
    padding-top: 9px !important;
    padding-bottom: 8px !important;
}

/* Button: allow changing width later; provide a reasonable min-width */
#cards .quote-banner .quote-inline-form > button.general-button {
    flex: 0 0 200px;
    width: 200px;
    min-width: 200px;
    padding: 6px 16px;
    box-sizing: border-box;
}

/* narrow the name and contact fields by ~30% compared to default */
#quote-name, #quote-contact { flex: 0 0 150px; min-width: 120px; max-width: 220px; padding: 6px 8px; height: 34px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.12); }

/* work field remains larger and is resizable (vertical) - ensure font matches other inputs */
#quote-work { flex: 1 1 420px; min-width: 220px; min-height: 36px; padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.12); resize: vertical; font-family: var(--font-family-base); font-size: 0.95rem; line-height: 1.2; color: var(--text-black); }
/* explicitly match the textarea sizing so earlier rules are not overridden by less-specific selectors */
#quote-work {
    /* let the textarea be flexible so it can shrink when needed */
    flex: 1 1 auto;
    min-width: 150px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    resize: vertical;
    font-family: var(--font-family-base);
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--text-black);
    box-sizing: border-box;
    height: 35px;
}

/* ensure the name/contact inputs match textarea font and appearance */
#quote-name, #quote-contact { font-family: var(--font-family-base); font-size: 0.95rem; line-height: 1.2; color: var(--text-black); }

/* place the submit button to the right of the inputs and normalize button appearance across browsers */
#cards .quote-banner .quote-inline-form .general-button {
    color: var(--brand-gold);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--brand-gold);
    background: transparent;
    cursor: pointer;
    min-height: 36px;
    padding: 6px 20px;
    border-radius: 28px;
}

#cards .quote-banner .quote-inline-form #quote-form-message { margin-top: 0; width: 100%; }