/*
Theme Name: Habitat Clair Custom
Theme URI: https://habitatclair.fr
Author: Development Team
Description: A high-performance, block-based editorial and utility theme for habitatclair.fr. Built with a shared, client-side, schema-driven tool engine.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: habitatclair
*/

/* 1. TYPOGRAPHY & FONTS */
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,300..900;1,300..900&family=Hanken+Grotesk:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* Global Style Overrides */
body {
    background-color: #fff8f3 !important;
    color: #1d1b18 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 2. ELEVATION & DEPTH (Tonal Layers from DESIGN.md) */
.hc-card, .tool-card, .guide-card, .hc-tool-inputs {
    background-color: #ffffff !important;
    border: 1px solid #ede7e2 !important;
    border-radius: 0.5rem !important; /* 8px per rounding guidelines */
    box-shadow: 0 4px 20px rgba(28, 26, 23, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hc-card:hover, .tool-card:hover, .guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(28, 26, 23, 0.08) !important;
}

/* 3. INPUT FIELDS & FORM STYLING */
.hc-inputs-form label {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #55433e;
    margin-bottom: 8px;
    display: block;
}

.hc-inputs-form input[type="number"],
.hc-inputs-form select {
    background-color: #f9f2ed !important;
    border: 1px solid #88726c !important;
    border-radius: 0.25rem !important; /* 4px standard elements */
    padding: 12px 16px !important;
    color: #1d1b18 !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.hc-inputs-form input[type="number"]:focus,
.hc-inputs-form select:focus {
    border-color: #96432b !important; /* Terracotta active state */
    box-shadow: 0 0 0 3px rgba(150, 67, 43, 0.15) !important;
    background-color: #ffffff !important;
}

/* 4. ACCENT BUTTONS (Disciplined soft roundness) */
.wp-block-button__link,
.tool-btn,
.hc-btn-primary {
    background-color: #96432b !important; /* Terracotta Primary */
    color: #ffffff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.25rem !important; /* 4px Standard */
    border: none !important;
    padding: 14px 28px !important;
    transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.hc-btn-primary:hover {
    background-color: #b55b40 !important; /* Hover primary container */
}

/* Calculator-specific buttons */
.hc-tool-results .tool-btn {
    background-color: #48654b !important; /* Sage secondary */
}
.hc-tool-results .tool-btn:hover {
    background-color: #314d34 !important;
}

/* 5. CALCULATOR RESULTS BOX (Sage Green Well Layout) */
.hc-tool-results {
    background-color: #f9f2ed !important; /* low container background */
    border: 1px solid #dbc1ba !important;
    border-radius: 0.5rem !important;
    padding: 30px !important;
}

.hc-results-well {
    background-color: #ffffff;
    border: 1px solid #ede7e2;
    border-radius: 0.375rem;
    padding: 20px;
    text-align: center;
    margin: 15px 0;
}

/* Dynamic Badge Scaling */
.dpe-badge-result {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Chivo', sans-serif;
    color: #ffffff;
}

/* Numeric alignment classes */
.data-numeral {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Skip Navigation links */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #96432b;
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.2s ease;
    text-decoration: none;
    font-weight: 700;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #1d1b18;
}