/* AbacaInfo gravel theme: sand, stone and moss, with a pebble background.
   Loaded last in _Layout.cshtml so it overrides the older tile/slate colours. */
:root {
    --paper: #f3efe6;
    --ink: #2f3a33;
    --muted: #625f55;
    --line: #dcd4c4;
    --card: #fffdf8;
    --moss: #355d47;
    --moss-dark: #264535;
    --sand: #a78e65;
    --sand-dark: #7a6542;
    --stone-soft: #ede7da;
    --stone-wash: #f7f4ed;
    --focus: #6f8f69;
}

/* Page background: soft pebbles on sand. */
body {
    background-color: var(--paper);
    background-image: url(/images/gravel-background.svg);
    background-size: 260px 260px;
    background-repeat: repeat;
    color: var(--ink);
}

a { color: var(--moss); }
a:hover { color: var(--moss-dark); }

/* Header and footer */
.site-head { background: rgba(251,249,244,.97); border-bottom: 1px solid var(--line); }
.site-head .nav .navbar-brand,
.site-head .navbar-nav .nav-link.text-dark { color: var(--moss) !important; }
.find { background: var(--stone-soft); border-color: #cbbfa6; color: var(--moss); }
.find:hover { background: #e3dac8; color: var(--moss-dark); }
.footer { background: #2e3530 !important; border-top: 4px solid var(--sand) !important; }
footer .container, ul.footer-links li a { color: #efe9dc !important; }

/* Panels that sit on the pebble background */
.wp-heading, .wp-education > section, body > article.container, body > div.container.py-5,
.privacy-content, .terms-content, .shell {
    background: rgba(255,253,248,.94);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(70,60,40,.06);
}
.shell { padding: 32px; margin-top: 32px; margin-bottom: 32px; }
body > div.container.py-5 { margin-top: 32px; margin-bottom: 32px; padding: 32px; }
@media (max-width: 760px) {
    .shell, body > div.container.py-5 { padding: 20px; margin-top: 20px; }
}

/* Home page hero: a gravel band behind the heading, faded so the text stays readable. */
.wp-heading {
    background-image:
        linear-gradient(90deg, rgba(255,253,248,.97) 0%, rgba(255,253,248,.9) 50%, rgba(255,253,248,.3) 100%),
        url(/images/gravel-hero.svg);
    background-size: auto, 480px 240px;
    background-repeat: no-repeat, repeat;
    border-left: 5px solid var(--sand) !important;
    border-color: var(--line) var(--line) var(--line) var(--sand) !important;
}
@media (max-width: 760px) {
    .wp-heading {
        background-image:
            linear-gradient(rgba(255,253,248,.95), rgba(255,253,248,.9)),
            url(/images/gravel-hero.svg);
    }
}
.wp-eyebrow { color: var(--sand-dark) !important; }
.wp-tags span::before { color: var(--moss); }
.wp-tags { color: var(--muted); }

/* Calculator surfaces */
.wp-page { color: var(--ink); }
.wp-card { background: var(--card); border-color: var(--line); box-shadow: 0 10px 30px rgba(70,60,40,.07); }
.wp-muted, .wp-save-status, .gravel-share-note, .wp-result-caption,
.wp-page label small, .wp-presets > span { color: var(--muted); }
.wp-page input, .wp-page select { border-color: #c9bfab; background: #fff; color: var(--ink); }
.wp-page input:focus, .wp-page select:focus, .wp-page button:focus-visible,
.wp-result:focus { outline-color: var(--focus); }
.wp-divider, .wp-actions { border-color: var(--line); }
.wp-step { background: var(--stone-soft); color: var(--moss); }
.gravel-area { background: var(--stone-wash); border-color: var(--line); }
.wp-result {
    background-color: var(--stone-soft);
    background-image: url(/images/gravel-background.svg);
    background-size: 260px 260px;
    border-top: 4px solid var(--sand);
    border-color: var(--line);
}
.wp-result dl > div { border-color: #d6ccb8; }
.gravel-order, #load-status { background: #fffdf8; border-left-color: var(--sand); }
.wp-secondary { background: var(--stone-wash); color: var(--moss); border-color: #d0c6b2; }
.wp-secondary:hover:not(:disabled) { background: var(--stone-soft); border-color: #b5a88e; }

/* Guide content */
.wp-guide-nav a { background: var(--card); border-color: var(--line); color: var(--moss); }
.wp-guide-nav a:hover, .wp-guide-nav a:focus-visible { background: var(--stone-soft); border-color: var(--sand); }
.wp-education > section { border-top: 1px solid var(--line); }
.wp-education h2, .wp-education h3, .wp-faq summary { color: var(--moss); }
.wp-measure-steps li::marker { color: var(--sand-dark); }
.wp-content-note { background: var(--stone-soft); border-left-color: var(--sand); }
.wp-formula-grid > div, .wp-example, .wp-table-wrap { background: var(--card); border-color: var(--line); }
.wp-formula-grid span, .wp-example .wp-example-label { color: var(--sand-dark); }
.wp-education thead { background: var(--stone-soft); color: var(--moss); }
.wp-education th, .wp-education td { border-color: #e4dccd; }
.wp-education caption, .wp-education .wp-content-date, .wp-faq details p { color: var(--muted); }
.wp-faq details { border-color: var(--line); }
.wp-faq summary:focus-visible, .wp-guide-nav a:focus-visible { outline-color: var(--focus); }

/* Legal, About, Contact and Error pages */
.eyebrow { color: var(--sand-dark); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; }
.privacy-content h2, .terms-content h2, body > article.container h2, .shell h5 { color: var(--moss); }
.tips-row { background: var(--stone-soft); border-left: 4px solid var(--sand); border-radius: 0 10px 10px 0; padding: 18px 20px; }
.btn-submit { background: var(--moss); color: #fff; border: 1px solid var(--moss); border-radius: 8px; padding: 10px 22px; font-weight: 650; }
.btn-submit:hover { background: var(--moss-dark); border-color: var(--moss-dark); }
.form-input, .shell textarea { border: 1px solid #c9bfab; border-radius: 8px; padding: 8px 10px; }

/* Cookie banner */
#cookieConsent { background: var(--card); color: var(--ink); border-color: var(--line); }
#cookieConsent h2 { color: var(--ink); }
#cookieConsent a, #cookieConsent .cookie-kicker { color: var(--moss); }
#cookieConsent .cookie-detail { color: var(--muted); }
#cookieConsent .accept-policy { background: var(--moss); border-color: var(--moss); color: #fff; }
#cookieConsent .decline-policy { background: var(--stone-wash); border-color: #c9bfab; color: var(--ink); }
#cookieConsent .cookie-actions button:hover, #cookieConsent .cookie-actions button:focus-visible {
    border-color: var(--moss); outline-color: var(--focus);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--focus);
}

@media print {
    body, .wp-result, .wp-heading { background: #fff !important; }
}