/*
Theme Name: Tawashi Flatsome Child
Description: Clean shared site system for Tawashi.co.uk
Author: SaveSomeGreen
Template: flatsome
Version: 0.1.5
Text Domain: tawashi
*/

/* =========================================================
   TEST CANDIDATE v0.1.0

   PURPOSE
   - Replace repeated page-level structural styling with one owner.
   - Keep Flatsome as the sole header/footer renderer.
   - Preserve page-specific copy/composition in page source files.
   - Do not use this package as a live replacement until staging QA.
   ========================================================= */

/* =========================================================
   SHARED SSG EQUAL-CARD STRUCTURE
   ========================================================= */

:root {
    --ssg-card-gap-x: 14px;
    --ssg-card-gap-y: 14px;
    --ssg-card-title-lines: 2.65em;
}

.row.ssg-equal-row {
    align-items: stretch;
    row-gap: var(--ssg-card-gap-y);
}

.ssg-equal-row > .col {
    display: flex;
    padding-left: calc(var(--ssg-card-gap-x) / 2);
    padding-right: calc(var(--ssg-card-gap-x) / 2);
    padding-bottom: 0;
}

.ssg-equal-row > .col > .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ssg-equal-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.ssg-card-title {
    min-height: var(--ssg-card-title-lines);
}

.ssg-card-body {
    flex: 1 1 auto;
}

.ssg-card-action {
    margin-top: auto;
}

.ssg-card-title--single {
    min-height: 1.35em;
}

@media (max-width: 849px) {
    #header.has-transparent + #main .tw-page > .tw-section:first-child {
        padding-top: calc(48px + 70px);
    }

    .ssg-card-title,
    .ssg-card-title--single {
        min-height: 0;
    }
}

/* =========================================================
   TAWASHI BRAND TOKENS
   Drawn from the existing approved Tawashi tortoise/wordmark:
   warm coconut brown, leaf green and soft cream.
   ========================================================= */

:root {
    --tw-brown: #6c370f;
    --tw-brown-deep: #4b250b;
    --tw-green: #739a4b;
    --tw-green-deep: #557737;
    --tw-cream: #fcf5ed;
    --tw-sand: #efe2d2;
    --tw-leaf: #edf3e7;
    --tw-charcoal: #2d2925;
    --tw-muted: #675f58;
    --tw-white: #ffffff;
    --tw-line: rgba(108, 55, 15, .16);
    --tw-shadow: 0 14px 34px rgba(75, 37, 11, .10);
    --tw-radius: 16px;
    --tw-wrap: 1160px;
}

/* =========================================================
   FLATSOME HEADER + MENU
   Flatsome owns structure/menu content; this child theme owns
   only the shared Tawashi visual treatment.
   ========================================================= */

.header-main {
    background: rgba(255, 253, 249, .98);
}

.header-wrapper {
    border-bottom: 1px solid var(--tw-line);
    box-shadow: none;
}

/*
 * Native Flatsome transparent-header state.
 * The PHP baseline applies `transparent has-transparent` to marketing pages;
 * these rules only provide the approved Tawashi visual treatment for that
 * genuine state. Sticky header remains solid for legibility.
 */
.transparent .header-main {
    background: transparent;
}

.transparent .header-wrapper {
    border-bottom-color: transparent;
}

.transparent .header-bg-color {
    background-color: transparent !important;
}


/*
 * Sticky state: same Tawashi header scale and visual language.
 * Flatsome owns the sticky behaviour; this is only its brand treatment.
 */
.header-wrapper.stuck,
.stuck .header-main {
    background: rgba(252, 245, 237, .96) !important;
}

.header-wrapper.stuck {
    border-bottom: 1px solid var(--tw-line);
    box-shadow: 0 8px 24px rgba(75, 37, 11, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.stuck .header-bg-color {
    background-color: transparent !important;
}


/*
 * Transparent headers overlay the first marketing section by design.
 * Keep the hero background under the header, but move the hero CONTENT
 * below the logo/nav so the first heading/kicker is never obscured.
 */
#header.has-transparent + #main .tw-page > .tw-section:first-child {
    padding-top: calc(clamp(56px, 7vw, 92px) + 92px);
}


.header-nav.header-nav-main.nav {
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(1px, .25vw, 5px);
}

.header-nav.header-nav-main.nav > li {
    flex: 0 0 auto;
    margin: 0;
}

.header-nav.header-nav-main.nav > li > a {
    min-height: 34px;
    padding: 7px 7px;
    border: 0;
    background: transparent !important;
    color: var(--tw-brown-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
    transition: color .14s ease;
}

.header-nav.header-nav-main.nav > li > a:hover,
.header-nav.header-nav-main.nav > li.current-menu-item > a,
.header-nav.header-nav-main.nav > li.current_page_item > a,
.header-nav.header-nav-main.nav > li.current-menu-ancestor > a {
    color: var(--tw-green-deep);
}

.header-nav .header-button .button,
.header-nav .header-button a,
.header-nav .tw-menu-buy > a {
    min-height: 34px;
    padding: 8px 13px !important;
    border: 2px solid var(--tw-brown) !important;
    border-radius: 6px !important;
    background: var(--tw-brown) !important;
    color: var(--tw-white) !important;
    box-shadow: none;
    font-size: 11px;
    line-height: 1;
}

.header-nav .header-button .button:hover,
.header-nav .header-button a:hover,
.header-nav .tw-menu-buy > a:hover {
    border-color: var(--tw-green-deep) !important;
    background: var(--tw-green-deep) !important;
}

@media (min-width: 850px) and (max-width: 1240px) {
    .header-nav.header-nav-main.nav { gap: 0; }

    .header-nav.header-nav-main.nav > li > a {
        min-height: 30px;
        padding: 5px 4px;
        font-size: 10.5px;
    }
}

.mobile-sidebar .nav-vertical > li > a {
    margin: 0 12px;
    padding: 12px 8px;
    border: 0;
    background: transparent !important;
    color: var(--tw-brown-deep);
    font-weight: 700;
}

.mobile-sidebar .nav-vertical > li.current-menu-item > a,
.mobile-sidebar .nav-vertical > li > a:hover {
    color: var(--tw-green-deep);
}

/* =========================================================
   CLEAN PAGE SHELL
   Removes Flatsome's inherited content clearance on the
   dedicated Tawashi full-width template. The page content,
   SEO copy and markup remain unchanged.
   ========================================================= */

body.page-template-template-clean-full-width #content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tw-clean-page-owner {
    margin: 0;
    padding: 0;
}

/* =========================================================
   TAWASHI GLOBAL PAGE SYSTEM
   ========================================================= */

.tw-page {
    overflow: hidden;
    margin: 0;
    color: var(--tw-charcoal);
    font-size: 16px;
    line-height: 1.64;
}

.tw-wrap {
    width: min(var(--tw-wrap), calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
}

.tw-section {
    position: relative;
    padding: clamp(62px, 6.4vw, 88px) 0;
}

/* Coloured brand sections deliberately run full viewport width,
   while their content stays inside .tw-wrap. */
.tw-section--cream,
.tw-section--leaf,
.tw-section--sand {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.tw-section--cream {
    background:
        radial-gradient(circle at 86% 14%, rgba(115, 154, 75, .13), transparent 25%),
        linear-gradient(135deg, #fcf5ed 0%, #fffaf5 100%);
}

.tw-section--leaf {
    background:
        radial-gradient(circle at 12% 18%, rgba(108, 55, 15, .07), transparent 26%),
        linear-gradient(135deg, #edf3e7 0%, #f6f8f1 100%);
}

.tw-section--sand {
    background:
        radial-gradient(circle at 88% 80%, rgba(115, 154, 75, .10), transparent 28%),
        linear-gradient(135deg, #efe2d2 0%, #f8eee4 100%);
}

/* Home hero: stronger brand presence without changing one word. */
body.home .tw-page > .tw-section:first-child {
    padding-top: clamp(44px, 4.8vw, 64px);
    padding-bottom: clamp(48px, 5vw, 68px);
    border-bottom: 1px solid var(--tw-line);
}

.tw-page h1,
.tw-page h2 {
    margin-top: 0;
    color: var(--tw-brown-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: -.025em;
}

.tw-page h1 {
    margin-bottom: 20px;
    font-size: clamp(42px, 5vw, 64px);
    line-height: .96;
}

body.home .tw-page h1 {
    max-width: 9.4ch;
}

.tw-page h2 {
    margin-bottom: 16px;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.08;
}

.tw-page h3 {
    margin-top: 0;
    color: var(--tw-brown-deep);
    font-size: 21px;
    line-height: 1.25;
}

.tw-page p:last-child {
    margin-bottom: 0;
}

.tw-kicker {
    display: inline-block;
    margin: 0 0 13px;
    color: var(--tw-green-deep);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tw-lead {
    color: #514942;
    font-size: clamp(18px, 1.8vw, 21px);
    line-height: 1.56;
}

.tw-muted {
    color: var(--tw-muted);
}

.tw-grid {
    display: grid;
    gap: clamp(20px, 3vw, 34px);
}

.tw-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tw-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw-grid--hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
}

.tw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.tw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 2px solid var(--tw-brown);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.tw-btn--primary {
    background: var(--tw-brown);
    color: var(--tw-white) !important;
}

.tw-btn--primary:hover {
    border-color: var(--tw-green-deep);
    background: var(--tw-green-deep);
}

.tw-btn--secondary {
    background: transparent;
    color: var(--tw-brown-deep) !important;
}

.tw-btn--secondary:hover {
    background: var(--tw-white);
}

.tw-proof-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 8px 22px;
    margin-top: 24px;
    padding: 16px 0 0;
    border-top: 1px solid var(--tw-line);
    color: var(--tw-brown-deep);
    font-size: 13px;
    font-weight: 750;
}

.tw-proof-rail span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tw-proof-rail span::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--tw-green);
    box-shadow: 0 0 0 3px rgba(115, 154, 75, .12);
}

.tw-card {
    height: 100%;
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--tw-line);
    border-top: 4px solid var(--tw-brown);
    border-radius: var(--tw-radius);
    background: var(--tw-white);
    box-shadow: 0 12px 28px rgba(75, 37, 11, .07);
}

.tw-card--cream {
    border-top-color: var(--tw-brown);
    background: rgba(252, 245, 237, .92);
}

.tw-card--leaf {
    border-top-color: var(--tw-green-deep);
    background: rgba(237, 243, 231, .94);
}

.tw-card--brown {
    border-color: var(--tw-brown-deep);
    background: var(--tw-brown-deep);
    color: var(--tw-white);
}

.tw-card--brown h2,
.tw-card--brown h3,
.tw-card--brown a {
    color: var(--tw-white) !important;
}

.tw-photo {
    display: block;
    overflow: hidden;
    margin: 0;
    border: 8px solid rgba(255, 255, 255, .72);
    border-radius: calc(var(--tw-radius) + 5px);
    background: var(--tw-cream);
    box-shadow: 0 22px 48px rgba(75, 37, 11, .14);
}

body.home .tw-photo--hero {
    transform: rotate(1deg);
    transform-origin: center center;
}

.tw-photo img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.tw-photo--hero img {
    min-height: 440px;
}

.tw-photo--editorial img {
    min-height: 340px;
}

.tw-photo--wide img {
    aspect-ratio: 16 / 7;
    min-height: 280px;
}

.tw-band {
    padding: clamp(30px, 4.5vw, 54px);
    border-radius: calc(var(--tw-radius) + 2px);
}

.tw-band--brown {
    background:
        radial-gradient(circle at 90% 18%, rgba(255,255,255,.08), transparent 24%),
        linear-gradient(130deg, var(--tw-brown-deep), var(--tw-brown));
    color: var(--tw-white);
    box-shadow: var(--tw-shadow);
}

.tw-band--brown h2,
.tw-band--brown h3,
.tw-band--brown p {
    color: var(--tw-white);
}

.tw-band--brown .tw-kicker {
    color: #dce8d0;
}

.tw-band--brown .tw-btn--secondary {
    border-color: var(--tw-white);
    color: var(--tw-white) !important;
}

.tw-band--brown .tw-btn--secondary:hover {
    background: var(--tw-white);
    color: var(--tw-brown-deep) !important;
}

.tw-quote {
    margin: 0;
    padding: clamp(26px, 4vw, 44px);
    border-left: 6px solid var(--tw-green);
    border-radius: 0 var(--tw-radius) var(--tw-radius) 0;
    background: var(--tw-cream);
    color: var(--tw-brown-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.22;
}

.tw-list-check {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.tw-list-check li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 28px;
}

.tw-list-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--tw-green-deep);
    font-weight: 900;
}

.tw-route-link {
    color: var(--tw-brown-deep);
    font-weight: 800;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.tw-page a:focus-visible,
.tw-page summary:focus-visible {
    outline: 3px solid var(--tw-green);
    outline-offset: 4px;
}

/* =========================================================
   LEGAL / CONTACT CONTAINMENT
   Owned here via body classes, never patched into page HTML.
   ========================================================= */

.tw-legal-page .tw-legal-hero {
    margin: 0;
    padding: 68px 24px 58px;
    border-bottom: 1px solid var(--tw-line);
    background: var(--tw-cream);
}

.tw-legal-page .tw-legal-hero__inner,
.tw-legal-page .tw-legal-body {
    width: min(820px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
}

.tw-legal-page .tw-legal-body {
    padding-top: 54px;
    padding-bottom: 72px;
}

.tw-contact-page .tw-contact-hero__inner,
.tw-contact-page .tw-contact-body {
    width: min(960px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
}

/* =========================================================
   FLATSOME ABSOLUTE FOOTER
   Flatsome owns the renderer. The shared baseline injects the
   standard utility links through Flatsome's official footer hook.
   This CSS owns alignment/presentation only.
   ========================================================= */

.ssg-site-footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.ssg-site-footer-links a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.ssg-site-footer-links a:hover,
.ssg-site-footer-links a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ssg-site-footer-sep {
    display: inline-block;
    padding: 0 7px;
    opacity: .6;
}


@media (min-width: 850px) {
    .absolute-footer .container {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .absolute-footer .footer-primary,
    .absolute-footer .footer-secondary {
        float: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.4;
    }

    .absolute-footer .footer-primary {
        order: 1;
    }

    .absolute-footer .footer-secondary {
        order: 2;
        margin-left: auto !important;
    }

    .absolute-footer .copyright-footer {
        margin: 0;
        line-height: inherit;
    }
}

@media (max-width: 849px) {
    body.home .tw-photo--hero {
        transform: none;
    }

    .tw-proof-rail {
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }

    .tw-grid--2,
    .tw-grid--3,
    .tw-grid--hero {
        grid-template-columns: 1fr;
    }

    .tw-photo--hero img,
    .tw-photo--editorial img {
        min-height: 300px;
    }

    .tw-photo--wide img {
        min-height: 230px;
        aspect-ratio: 4 / 3;
    }

    .tw-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tw-btn {
        width: 100%;
    }

    .absolute-footer .footer-primary,
    .absolute-footer .footer-secondary {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    .ssg-site-footer-links {
        justify-content: center;
    }
}

@media (max-width: 549px) {
    .tw-wrap {
        width: min(var(--tw-wrap), calc(100% - 28px));
    }

    .tw-section {
        padding: 48px 0;
    }

    .tw-page h1 {
        font-size: clamp(38px, 12vw, 52px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-page *,
    .tw-page *::before,
    .tw-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}