*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    padding-top: var(--header-height);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    border: 1px solid var(--input-border);
    border-radius: var(--card-radius);
}
input[type="radio"], input[type="checkbox"] {
    border: default;
}

button {
    cursor: pointer;
    background: none;
    color: inherit;
    padding: 0.6em 1em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
button:active {
    transform: translateY(1px);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover, a:focus-visible {
    color: var(--primary-hover-color);
    text-decoration: underline;
    outline-offset: 2px;
}

*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.2);
}
body.dark-mode *:focus-visible {
    outline: 2px solid var(--primary-hover-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-hover-color-rgb), 0.3);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --header-height: 70px;
    --background-color: #f8f9fa;
    --text-color: #212529;
    --heading-color: #003831;
    --primary-color-rgb: 38, 139, 128;
    --primary-color: rgb(var(--primary-color-rgb));
    --primary-hover-color-rgb: 29, 107, 99;
    --primary-hover-color: rgb(var(--primary-hover-color-rgb));
    --primary-light-bg: #e0f2f0;
    --secondary-color-rgb: 224, 91, 63;
    --secondary-color: rgb(var(--secondary-color-rgb));
    --border-color: #ced4da;
    --card-background: #ffffff;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --card-radius: 8px;
    --input-background: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: var(--primary-color);
    --input-highlight-bg: #fff3cd;

    --button-primary-bg: var(--primary-color);
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: var(--primary-hover-color);
    --button-secondary-bg: #6c757d;
    --button-secondary-text: #ffffff;
    --button-secondary-hover-bg: #5a6268;
    --button-tertiary-bg: #e9ecef;
    --button-tertiary-text: #495057;
    --button-tertiary-hover-bg: #d3d9df;
    --button-delete-bg: #dc3545;
    --button-delete-text: #ffffff;
    --button-warning-bg: #ffc107;
    --button-warning-text: #212529;
    --button-warning-hover-bg: #e0a800;

    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-hover-color);
    --modal-backdrop-color: rgba(0, 0, 0, 0.55);
    --modal-content-bg: var(--card-background);
    --footer-bg: #f1f3f5;
    --footer-text-color: #495057;
    --footer-border-color: var(--border-color);

    --scale-under-bg: #3498db;
    --scale-under-text: #ffffff;
    --scale-normal-bg: #2ecc71;
    --scale-normal-text: #ffffff;
    --scale-over-bg: #f1c40f;
    --scale-over-text: #212529;
    --scale-obesity1-bg: #e67e22;
    --scale-obesity1-text: #ffffff;
    --scale-obesity2-bg: #d35400;
    --scale-obesity2-text: #ffffff;
    --scale-obesity3-bg: #c0392b;
    --scale-obesity3-text: #ffffff;
    --arrow-color: #343a40;

    --callout-info-bg:#e0f2f7; --callout-info-border:#7cc5d9; --callout-info-icon:'ℹ️';
    --callout-warning-bg:#fff8e1; --callout-warning-border:#ffd54f; --callout-warning-icon:'⚠️';
    --callout-tip-bg:#e8f5e9; --callout-tip-border:#81c784; --callout-tip-icon:'💡';

    --table-header-bg: var(--primary-light-bg);
    --table-border-color: var(--border-color);
    --table-row-even-bg: #f8f9fa;

    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    --max-width-container: 750px;
    --padding-container: 20px;
    --padding-section: clamp(25px, 4vw, 30px);
    --section-gap: clamp(25px, 4vw, 35px);
    --element-spacing: 1rem;
    --element-spacing-medium: 1.5rem;
}

body.dark-mode {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --primary-color-rgb: 78, 190, 178;
    --primary-color: rgb(var(--primary-color-rgb));
    --primary-hover-color-rgb: 62, 152, 142;
    --primary-hover-color: rgb(var(--primary-hover-color-rgb));
    --primary-light-bg: #223344;
    --secondary-color-rgb: 240, 140, 70;
    --secondary-color: rgb(var(--secondary-color-rgb));
    --border-color: #3a3f44;
    --card-background: #1e1e1e;
    --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    --input-background: #2c2c2e;
    --input-border: #4a4a4e;
    --input-focus-border: var(--primary-color);
    --input-highlight-bg: #504020;
    --button-tertiary-bg: #333333;
    --button-tertiary-text: var(--primary-color);
    --button-tertiary-hover-bg: #444444;
    --button-warning-bg: #FFCA2C;
    --button-warning-text: #121212;

    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-hover-color);
    --modal-content-bg: #282828;
    --footer-bg: #1a1a1a;
    --footer-text-color: #adb5bd;
    --footer-border-color: #333333;
    --arrow-color: #bbbbbb;

    --callout-info-bg:#1f3a47; --callout-info-border:#509cb3;
    --callout-warning-bg:#4a403a; --callout-warning-border:#d0a050;
    --callout-tip-bg:#2a4036; --callout-tip-border:#50a060;

    --table-header-bg: #2c3b4f;
    --table-border-color: #444444;
    --table-row-even-bg: #272727;

    --scale-under-text: #ffffff;
    --scale-normal-text: #ffffff;
    --scale-over-text: #212529;
    --scale-obesity1-text: #ffffff;
    --scale-obesity2-text: #ffffff;
    --scale-obesity3-text: #ffffff;
}

.site-header {
    background-color: var(--card-background);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: clamp(1.4rem, 4vw, 1.6rem);
    font-weight: 700;
    color: var(--heading-color);
    text-decoration: none;
}
.logo a:hover {
    color: var(--primary-color);
}

.main-nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.nav-links a {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5em 0;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
    text-decoration: none;
}
body.dark-mode .nav-links a:hover,
body.dark-mode .nav-links a.active {
    color: var(--primary-hover-color);
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    list-style: none;
    padding: 0.5rem 0;
    min-width: 220px;
    z-index: 1001;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    width: 100%;
}

.dropdown-menu a::after {
    content: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
}

.hamburger-bar {
    width: 2rem;
    height: 3px;
    background-color: var(--heading-color);
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

.dark-mode-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--heading-color);
    padding: 0.4em 0.6em;
    border-radius: var(--card-radius);
    transition: transform 0.2s;
    line-height: 1;
}
.dark-mode-btn:hover {
    transform: scale(1.1);
}

.main-container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: var(--padding-container);
    flex-grow: 1;
}
.main-container > section, .main-container > div > article {
    margin-top: var(--section-gap);
    margin-bottom: var(--section-gap);
    background-color: var(--card-background);
    padding: var(--padding-section);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}
.main-container > section:first-child {
    margin-top: calc(var(--section-gap) / 1.5);
}

.tool-hub-section {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.tool-hub-title {
    text-align: center;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    color: var(--heading-color);
    margin-bottom: var(--element-spacing-medium);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--element-spacing-medium);
}

.tool-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--card-background);
    padding: var(--padding-section);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.tool-box:hover, .tool-box:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    color: var(--text-color);
    text-decoration: none;
}
body.dark-mode .tool-box:hover, body.dark-mode .tool-box:focus-visible {
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}


.tool-box .tool-icon {
    font-size: 2.8rem;
    margin-bottom: var(--element-spacing);
    line-height: 1;
    color: var(--primary-color);
}

.tool-box h3 {
    color: var(--heading-color);
    margin-bottom: 0.5em;
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    line-height: 1.3;
}

.tool-box p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 0;
    flex-grow: 1;
}

h1,h2,h3,h4,h5,h6 {
    color: var(--heading-color);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--element-spacing);
    word-break: break-word;
}
.calc-box-header #headerTitle {
    font-size: clamp(1.7rem, 5vw, 2.0rem);
    color: var(--heading-color);
    margin: 0;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    flex-grow: 1;
}
.calc-box-content #formTitle {
    text-align: center;
    color: var(--primary-color);
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
    margin-bottom: var(--element-spacing-medium);
    font-weight: 700;
    border-bottom: none;
    padding-bottom: 0;
}
.explanation-container h2, #bmi-deep-dive h2, #calorie-deep-dive h2, #bodyfat-deep-dive h2, #idealweight-deep-dive h2, #whr-deep-dive h2, #fertility-deep-dive h2, #duedate-deep-dive h2, #faq-section h2, #home-article h2, #about-us-section h2,
#water-deep-dive h2, #macros-deep-dive h2, #cardio-deep-dive h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-top: 0;
    border-bottom: 2px solid var(--primary-light-bg);
    padding-bottom: 0.5em;
    font-weight: 700;
}
.explanation-container h3, #bmi-deep-dive h3, #calorie-deep-dive h3, #bodyfat-deep-dive h3, #idealweight-deep-dive h3, #whr-deep-dive h3, #fertility-deep-dive h3, #duedate-deep-dive h3, #faq-section h3, #home-article h3, #about-us-section h3,
#water-deep-dive h3, #macros-deep-dive h3, #cardio-deep-dive h3 {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    margin-top: var(--element-spacing-medium);
    font-weight: 700;
}
.explanation-container h4, #bmi-deep-dive h4, #calorie-deep-dive h4, #bodyfat-deep-dive h4, #idealweight-deep-dive h4, #whr-deep-dive h4, #fertility-deep-dive h4, #duedate-deep-dive h4, #faq-section h4, #home-article h4, #about-us-section h4 {
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    margin-top: var(--element-spacing);
    font-weight: 600;
}

p,ul,ol,table,blockquote {
    margin-bottom: var(--element-spacing);
    line-height: 1.75;
    font-size: clamp(1rem, 2.2vw, 1.05rem);
}
ul, ol { padding-left:25px; } li { margin-bottom:0.5em; }
strong { font-weight:700; }
mark { background-color:rgba(var(--primary-color-rgb), 0.15); padding:0.2em 0.4em; border-radius:4px; color:var(--heading-color); }
body.dark-mode mark { background-color:rgba(var(--primary-color-rgb), 0.25); color:var(--text-color); }
code { font-family:var(--font-monospace); background-color:rgba(var(--text-color), 0.05); padding:0.2em 0.4em; border-radius:4px; font-size:0.9em; color:var(--heading-color); border:1px solid rgba(var(--text-color), 0.1); }
body.dark-mode code { background-color:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); color:var(--text-color); }
blockquote { border-left:4px solid var(--primary-color); padding:0.5em var(--element-spacing); margin:var(--element-spacing) 0; font-style:italic; background-color:rgba(var(--primary-color-rgb), 0.03); border-radius:0 var(--card-radius) var(--card-radius) 0; }
body.dark-mode blockquote { background-color:rgba(var(--primary-color-rgb), 0.1); color:#c0c0c0; }
.formula-display { text-align:center; font-size:1.2em; margin:1.2em 0; padding:0.8em; background-color:rgba(var(--primary-color-rgb),0.05); border-left:4px solid var(--primary-color); border-radius:var(--card-radius); }
body.dark-mode .formula-display { background-color:rgba(var(--primary-color-rgb),0.1); }

.calc-box {
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background-color: var(--card-background);
}
.calc-box-header {
    background: var(--card-background);
    color: var(--heading-color);
    padding: clamp(15px, 3vw, 20px) var(--padding-section);
    font-size: clamp(1.6rem, 5vw, 1.8rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 60px;
    width: 100%;
}

.calc-box-content {
    background: var(--card-background);
    padding: var(--padding-section);
}

.switch-btn, .calculate-btn {
    padding: 0.8rem 1.4rem;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.5;
}
.switch-btn {
    background-color: var(--button-tertiary-bg);
    color: var(--button-tertiary-text);
    border: 1px solid var(--border-color);
}
.switch-btn:hover {
    background-color: var(--button-tertiary-hover-bg);
    border-color: #adb5bd;
}
body.dark-mode .switch-btn {
    background-color: var(--button-tertiary-bg);
    color: var(--button-tertiary-text);
    border:1px solid var(--border-color);
}
body.dark-mode .switch-btn:hover {
    background-color: var(--button-tertiary-hover-bg);
}

.calculate-btn {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color:var(--button-primary-bg);
}
.calculate-btn:hover {
    background-color: var(--button-primary-hover-bg);
    border-color:var(--button-primary-hover-bg);
}
.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--element-spacing);
}
.button-group .calculate-btn { flex: 1 1 auto; min-width: 120px;}
#clearBtn {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border-color:var(--button-secondary-bg);
}
#clearBtn:hover {
    background-color: var(--button-secondary-hover-bg);
    border-color:var(--button-secondary-hover-bg);
}

.error {
    display: none;
    background-color: rgba(var(--secondary-color-rgb), 0.1);
    color: #c0392b;
    padding: 0.75rem 1rem;
    border-radius: var(--card-radius);
    border: 1px solid rgba(var(--secondary-color-rgb), 0.4);
    margin-bottom: 15px;
    font-weight: 500;
    animation: fadeIn 0.3s ease-out;
}
body.dark-mode .error {
    background-color:rgba(var(--secondary-color-rgb), 0.2);
    color:#f5c6cb;
    border-color:rgba(var(--secondary-color-rgb), 0.5);
}
.error.show { display: block; }

form { margin-bottom: var(--element-spacing-medium); }

.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: var(--element-spacing-medium);
}
.radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.radio-label {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--input-border);
    border-radius: var(--card-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: normal;
    background-color: var(--input-background);
    color: var(--text-color);
}
.radio-input:checked + .radio-label {
    background-color: var(--primary-light-bg);
    border-color: var(--primary-color);
    color: var(--heading-color);
    box-shadow: 0 2px 5px rgba(var(--primary-color-rgb), 0.1);
}
body.dark-mode .radio-input:checked + .radio-label {
    background-color: rgba(var(--primary-color-rgb), 0.3);
    border-color: var(--primary-color);
    color: var(--text-color);
}
.gender-icon {
    margin-left: 8px;
    font-style: normal;
    font-weight: bold;
    color: var(--primary-color);
}
.radio-input:checked + .radio-label .gender-icon {
    color: var(--heading-color);
}
body.dark-mode .radio-input:checked + .radio-label .gender-icon {
    color: var(--text-color);
}


.field { margin-bottom: var(--element-spacing-medium); }
.field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5em;
    color: var(--heading-color);
    font-size: 0.9rem;
}
.field select {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--input-border);
    border-radius: var(--card-radius);
    background-color: var(--input-background);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.input-group input[type="number"], input[type="date"] {
    flex: 1;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--input-border);
    border-radius: var(--card-radius);
    background-color: var(--input-background);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    -moz-appearance: textfield;
    min-width: 0;
}
input[type="date"] { color-scheme: light; }
body.dark-mode input[type="date"] { color-scheme: dark; }

.input-group input[type="number"]::-webkit-outer-spin-button,
.input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-group input:focus, .field select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    outline: none;
}
.input-group span {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.8;
    min-width: 35px;
    text-align: left;
    padding-left: 3px;
}
body.dark-mode .input-group span { color: var(--text-color); }
::placeholder { color: #aaa; opacity: 1; font-style: italic; }
body.dark-mode ::placeholder { color: #8a8a8a; }

.result { display: none; margin-top: var(--element-spacing-medium); }
.result.show { display: block; animation: fadeIn 0.5s ease-out; }

.card-result {
    padding: var(--padding-section);
    border-radius: var(--card-radius);
    text-align: left;
    transition: background-color 0.4s ease-out, box-shadow 0.3s;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    margin-bottom: var(--section-gap);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.card-result:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

.result-grid {
    display: flex;
    flex-direction: column;
    gap: var(--element-spacing);
}
.result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--element-spacing);
    border-bottom: 1px solid var(--border-color);
}
.result-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.result-label {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    color: var(--text-color);
    opacity: 0.9;
}
.result-value {
    font-size: clamp(1.1rem, 3vw, 1.25rem);
    font-weight: 600;
    color: var(--heading-color);
    text-align: right;
}
.main-result-value {
    font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    font-weight: 700;
    color: var(--primary-color) !important;
    line-height: 1;
}
.result-sub-text {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: var(--element-spacing);
}

.result-grid.date-results .result-value {
    font-size: clamp(1rem, 4vw, 1.2rem);
}
.result-grid.date-results .main-result-value {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
}

.card-under { border-left: 5px solid var(--scale-under-bg); }
.card-normal { border-left: 5px solid var(--scale-normal-bg); }
.card-over { border-left: 5px solid var(--scale-over-bg); }
.card-obesity1 { border-left: 5px solid var(--scale-obesity1-bg); }
.card-obesity2 { border-left: 5px solid var(--scale-obesity2-bg); }
.card-obesity3 { border-left: 5px solid var(--scale-obesity3-bg); }
.card-risk-low { border-left: 5px solid var(--scale-normal-bg); }
.card-risk-intermediate { border-left: 5px solid var(--scale-over-bg); }
.card-risk-high { border-left: 5px solid var(--scale-obesity2-bg); }


#calorieResults p, #bodyfatResults p, #whrResults p, #idealweightResults p, #fertilityResults p, #duedateResults p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.result-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--element-spacing) auto;
    width: 60%;
}

#bmiScaleContainer {
    margin-top: var(--element-spacing-medium);
    margin-bottom: var(--section-gap);
    position: relative;
    padding-top: 20px;
    padding-bottom: 10px;
    display: none;
}
#bmiScaleContainer.show { display: block; animation: fadeIn 0.5s ease-out; }
.bmi-scale {
    height: 18px; width: 100%; border-radius: 9px;
    background: linear-gradient( to right,
        var(--scale-under-bg) 0%, var(--scale-under-bg) 15%,
        var(--scale-normal-bg) 15%, var(--scale-normal-bg) 42%,
        var(--scale-over-bg) 42%, var(--scale-over-bg) 58%,
        var(--scale-obesity1-bg) 58%, var(--scale-obesity1-bg) 75%,
        var(--scale-obesity2-bg) 75%, var(--scale-obesity2-bg) 90%,
        var(--scale-obesity3-bg) 90%, var(--scale-obesity3-bg) 100%
    );
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    border: none;
}
body.dark-mode .bmi-scale { box-shadow: inset 0 1px 4px rgba(0,0,0,0.4); }

.bmi-scale-arrow {
    width:0; height:0;
    border-left:10px solid transparent; border-right:10px solid transparent;
    border-top:14px solid var(--arrow-color);
    position:absolute; top:-14px; left:0%;
    transform:translateX(-50%);
    transition:left 0.5s ease-out; z-index:2;
}
.bmi-scale-labels {
    display:flex; justify-content:space-between; margin-top:8px; padding:0 5px;
    font-size:clamp(0.7rem, 1.8vw, 0.8rem);
    color:var(--text-color); opacity:0.8;
}
.bmi-scale-labels span {text-align:center; flex:1; position:relative;}
.bmi-scale-labels .label-under{text-align:left;}
.bmi-scale-labels .label-18_5{position:absolute; left:15%; transform:translateX(-50%);}
.bmi-scale-labels .label-25{position:absolute; left:42%; transform:translateX(-50%);}
.bmi-scale-labels .label-30{position:absolute; left:58%; transform:translateX(-50%);}
.bmi-scale-labels .label-35{position:absolute; left:75%; transform:translateX(-50%);}
.bmi-scale-labels .label-obese{text-align:right;}
body.dark-mode .bmi-scale-labels span { color: var(--text-color); }

.bmi-range-table-container {
    margin-top: var(--section-gap);
    display: none;
}
.bmi-range-table-container.show { display: block; animation: fadeIn 0.5s ease-out; }

.bmi-range-table-container table {
    width:100%; border-collapse:collapse;
    box-shadow:0 2px 8px rgba(0,0,0,0.07);
    border-radius:var(--card-radius); overflow:hidden;
    border:1px solid var(--table-border-color);
}
.bmi-range-table-container caption {
    font-weight:600; font-size:clamp(1.1rem, 3vw, 1.4rem);
    color:var(--heading-color); margin-bottom:0.75em; text-align:left;
}
.bmi-range-table-container th, .bmi-range-table-container td {
    border:1px solid var(--table-border-color);
    padding:0.75rem 1rem; text-align:left;
    font-size:clamp(0.85rem, 2.2vw, 0.95rem);
}
.bmi-range-table-container th {
    background-color:var(--table-header-bg);
    color:var(--heading-color); font-weight:600;
}
.bmi-range-table-container td:first-child { font-weight:500; }
.bmi-range-table-container tr.highlight-user-row {
    background-color:rgba(var(--primary-color-rgb),0.2) !important;
    font-weight:700;
}
.bmi-range-table-container tr.highlight-user-row td {
    color: var(--heading-color) !important;
}
body.dark-mode .bmi-range-table-container tr.highlight-user-row {
    background-color:rgba(var(--primary-color-rgb),0.25) !important;
}
body.dark-mode .bmi-range-table-container tr.highlight-user-row td {
    color: var(--text-color) !important;
}

.row-underweight td {background-color:var(--scale-under-bg); color:var(--scale-under-text);}
.row-normal-weight td {background-color:var(--scale-normal-bg); color:var(--scale-normal-text);}
.row-overweight td {background-color:var(--scale-over-bg); color:var(--scale-over-text);}
.row-obesity-1 td {background-color:var(--scale-obesity1-bg); color:var(--scale-obesity1-text);}
.row-obesity-2 td {background-color:var(--scale-obesity2-bg); color:var(--scale-obesity2-text);}
.row-obesity-3 td {background-color:var(--scale-obesity3-bg); color:var(--scale-obesity3-text);}


#bmi-deep-dive .article-intro, #calorie-deep-dive .article-intro, #bodyfat-deep-dive .article-intro, #idealweight-deep-dive .article-intro, #whr-deep-dive .article-intro, #fertility-deep-dive .article-intro, #duedate-deep-dive .article-intro, #home-article .article-intro {
    font-size:1.15rem; line-height:1.75; color:var(--text-color);
    opacity:0.9; margin-bottom:var(--element-spacing-medium); text-align:left;
}
.callout{padding:var(--element-spacing); margin:var(--element-spacing-medium) 0; border-left-width:5px; border-left-style:solid; border-radius:var(--card-radius); position:relative;}
.callout::before{position:absolute; left:var(--element-spacing); top:var(--element-spacing); font-size:1.5em; line-height:1;}
.callout-content{padding-left:calc(var(--element-spacing) + 2em);}
.callout-content p:last-child{margin-bottom:0;}

.callout-info{background-color:var(--callout-info-bg); border-left-color:var(--callout-info-border); color:var(--heading-color);}
.callout-info::before{content:var(--callout-info-icon); color:var(--callout-info-border);}
body.dark-mode .callout-info{color:var(--text-color);}

.callout-warning{background-color:var(--callout-warning-bg); border-left-color:var(--callout-warning-border); color:var(--heading-color);}
.callout-warning::before{content:var(--callout-warning-icon); color:var(--callout-warning-border);}
body.dark-mode .callout-warning{color:var(--text-color);}

.callout-tip{background-color:var(--callout-tip-bg); border-left-color:var(--callout-tip-border); color:var(--heading-color);}
.callout-tip::before{content:var(--callout-tip-icon); color:var(--callout-tip-border);}
body.dark-mode .callout-tip{color:var(--text-color);}

.article-container {
    padding-top: var(--section-gap);
}

.article-table-container{overflow-x:auto; margin:var(--element-spacing-medium) 0; border:1px solid var(--table-border-color); border-radius:var(--card-radius);}
.article-table-container table{width:100%; min-width:500px; border-collapse:collapse; margin-bottom:0;}
.article-table-container th, .article-table-container td{border:1px solid var(--table-border-color); padding:0.75rem 1rem; text-align:left;}
.article-table-container th{background-color:var(--table-header-bg); font-weight:600; color:var(--heading-color);}
.article-table-container tr:nth-child(even) td{background-color:var(--table-row-even-bg);}
body.dark-mode .article-table-container tr:nth-child(even) td{background-color:var(--table-row-even-bg);}
body.dark-mode .article-table-container td { color: var(--text-color); }
body.dark-mode .article-table-container td p,
body.dark-mode .article-table-container td ul,
body.dark-mode .article-table-container td ol,
body.dark-mode .article-table-container td li,
body.dark-mode .article-table-container td strong,
body.dark-mode .article-table-container td em { color: inherit; }

.faq-section{margin-top:var(--element-spacing-medium);}
.faq-item{background-color:var(--card-background); border:1px solid var(--border-color); border-radius:var(--card-radius); margin-bottom:var(--element-spacing); box-shadow:0 2px 5px rgba(0,0,0,0.05);}
body.dark-mode .faq-item{background-color:var(--input-background);}
.faq-item summary{font-weight:600; color:var(--heading-color); padding:1rem 1.25rem; cursor:pointer; list-style:none; position:relative; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'➕'; font-size:1em; color:var(--primary-color); transition:transform 0.2s ease-out;}
.faq-item[open] summary::after{content:'➖';}
.faq-content{padding:0 1.25rem 1.25rem 1.25rem; border-top:1px solid var(--border-color); margin-top:0.5rem;}
.faq-content p:last-child{margin-bottom:0;}

.modal{display:none; position:fixed; inset:0; background-color:var(--modal-backdrop-color); z-index:2000; align-items:center; justify-content:center; padding:var(--padding-container); overflow-y:auto; transition: opacity 0.3s ease-out;}
.modal:not(.active) { opacity: 0; pointer-events: none; }
.modal.active{opacity: 1;}

.modal-dialog{background-color:var(--modal-content-bg); color:var(--text-color); padding:var(--padding-section); border-radius:var(--card-radius); box-shadow:0 10px 30px rgba(0,0,0,0.2); width:100%; max-width:700px; max-height:90vh; overflow-y:auto; position:relative; transform:translateY(-30px) scale(0.98); opacity:0; transition: transform 0.3s ease-out, opacity 0.3s ease-out;}
.modal.active .modal-dialog {transform:translateY(0) scale(1); opacity:1;}

.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--element-spacing); padding-bottom:var(--element-spacing); border-bottom:1px solid var(--border-color);}
.modal-title{font-size:clamp(1.3rem, 4vw, 1.75rem); color:var(--heading-color); margin-bottom:0; border-bottom:none; padding-bottom:0;}
.modal-close-btn{background:none; border:none; font-size:1.8rem; font-weight:bold; color:var(--text-color); opacity:0.7; padding:0.25rem 0.5rem; line-height:1;}
.modal-close-btn:hover, .modal-close-btn:focus-visible{opacity:1; color:var(--secondary-color); outline:none;}
.modal-body{line-height:1.7;}
.modal-body h3{font-size:1.2rem; margin-top:var(--element-spacing);}
.modal-body p, .modal-body ul, .modal-body ol{margin-bottom:0.8em; font-size:0.95rem;}
.modal-body ul, .modal-body ol{padding-left:20px;}

.page-footer{
    background-color:var(--footer-bg); color:var(--footer-text-color);
    padding:var(--padding-section) var(--padding-container);
    text-align:center; font-size:0.9rem; margin-top:auto;
    border-top:1px solid var(--footer-border-color);
}
.footer-content{max-width:var(--max-width-container); margin:0 auto;}
.footer-links-modal-triggers {
    list-style:none; padding:0; margin:0 0 var(--element-spacing) 0;
    display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.5rem;
}
.link-button {
    background:none; border:none; color:var(--link-color); text-decoration:underline;
    padding:0; margin:0; display:inline; font-weight:500; font-size:inherit;
}
.link-button:hover, .link-button:focus-visible { color:var(--link-hover-color); outline:none; }

.footer-external-links{margin:var(--element-spacing-medium) 0;}
.footer-external-links p{margin-bottom:0.5em; font-weight:500;}
.footer-external-links ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.5rem;}
.footer-external-links a{color:var(--footer-text-color);}
.footer-external-links a:hover, .footer-external-links a:focus-visible{color:var(--primary-color);}

.footer-copyright{margin-top:var(--element-spacing); opacity:0.8;}
.footer-disclaimer-text{
    font-size:0.85rem; opacity:0.7; margin-top:var(--element-spacing);
    max-width:600px; margin-left:auto; margin-right:auto;
}
.footer-disclaimer-text strong{color:inherit;}

input.is-valid, select.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}
body.dark-mode input.is-valid, body.dark-mode select.is-valid {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.35) !important;
}


input.is-invalid, select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
body.dark-mode input.is-invalid, body.dark-mode select.is-invalid {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.35) !important;
}

@media (max-width: 900px) {
    .nav-links {
        position: fixed;
        top: var(--header-height);
        right: 0;
        background-color: var(--card-background);
        width: 250px;
        height: calc(100vh - var(--header-height));
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        border-left: 1px solid var(--border-color);
        padding-top: 1rem;
        overflow-y: auto;
    }
    .nav-links.active {
        transform: translateX(0);
    }
    .nav-links li {
        width: 100%;
    }
    .nav-links a {
        display: block;
        padding: 1rem 1.5rem;
        width: 100%;
    }
    .nav-links a::after {
        display: none;
    }
   
    .dropdown .dropdown-toggle {
        display: none;
    }

    .dropdown .dropdown-menu {
        display: contents;
    }

    .dropdown-menu a {
        padding-left: 1.5rem;
    }

    .hamburger {
        display: flex;
    }
    .hamburger.active .hamburger-bar:nth-child(1) {
        transform: rotate(45deg) translate(0.6rem, 0.6rem);
    }
    .hamburger.active .hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .hamburger-bar:nth-child(3) {
        transform: rotate(-45deg) translate(0.5rem, -0.5rem);
    }
}

@media (min-width: 768px) {
    :root {
        --padding-container:30px;
        --section-gap:40px;
    }
    .main-container > section, .main-container > article {
        padding:calc(var(--padding-section) * 1.2);
    }
    .bmi-scale-labels { font-size:clamp(0.75rem, 1.5vw, 0.85rem); }
    #bmi-deep-dive .article-intro, #calorie-deep-dive .article-intro, #bodyfat-deep-dive .article-intro, #idealweight-deep-dive .article-intro, #whr-deep-dive .article-intro, #fertility-deep-dive .article-intro, #duedate-deep-dive .article-intro, #home-article .article-intro { font-size:1.2rem; }

    .tool-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}
@media (max-width: 599px) {
    body { padding-top: calc(var(--header-height) + 5px); }
    .main-container { padding: 0 5px; }

    .button-group {
        flex-direction:column; 
        align-items:stretch;
    }
    .button-group .calculate-btn {
        width:100%; 
        margin-bottom: 10px;
    }
    .button-group .calculate-btn:last-child { 
        margin-bottom: 0; 
    }
    
    .bmi-scale-labels { flex-wrap:wrap; justify-content:center; gap:5px;}
    .bmi-scale-labels span {flex-basis:30% !important; text-align:center !important; position:static !important; transform:none !important;}

    .modal-dialog {padding:var(--padding-container); margin:var(--padding-container) 0;}
    .modal-title {font-size:1.25rem;}

    /* Règle originale pour le défilement horizontal */
    .article-table-container table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media print {
    body{font-size:10pt; color:#000; background-color:#fff; padding-top: 0;}
    .site-header, .dark-mode-btn, .switch-btn, .footer-links-modal-triggers, .modal, .no-print, .hamburger, .tool-hub-section {display:none !important;}
    #calculator-main-tool, .main-container > article, .main-container > section, .card-result {
        border:1px solid #ccc !important; box-shadow:none !important; padding: 0.5cm; margin: 0.5cm 0;
    }
    h1,h2,h3,h4 { page-break-after: avoid; }
    table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; } tfoot { display: table-footer-group; }
    a{text-decoration:none; color:#000;} a[href^="http"]:after{content:" (" attr(href) ")"; font-size:0.8em;}
    .card-result{color:#000 !important; background-color:#fff !important; text-align: left; padding: 0.5cm;}
    .result-grid {
        color: #000 !important;
    }
    .result-grid .result-label, .result-grid .result-value {
        color: #000 !important;
    }
    .result-divider {border-top-color:#ccc !important;}
    .bmi-scale {
        background:linear-gradient( to right, #efefef 0%, #efefef 15%, #dedede 15%, #dedede 42%, #cdcdcd 42%, #cdcdcd 58%, #bcbcbc 58%, #bcbcbc 75%, #ababab 75%, #ababab 90%, #9a9a9a 90%, #9a9a9a 100% );
    }
    .bmi-scale-arrow{border-top-color:#000;}
    .callout{border-color:#ccc; background-color:#f9f9f9; padding: 0.5em;} .callout::before{display:none;}
    .faq-item summary::after{display:none;} .faq-item[open] .faq-content{border-top:1px solid #ccc;}
    .hide-for-print { display: none !important; }
    .page-footer { border-top: 1px solid #ccc !important; background-color: #fff !important; color: #000 !important; margin-top: 2cm; }
    .footer-external-links { display: none !important; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes result-pop {
    0% { transform: scale(0.98); opacity: 0.7; }
    70% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.result-feedback { animation: result-pop 0.4s ease-out; }

/* ===== NOUVEAUX REFINEMENTS ===== */

/* 1. État de chargement pour les boutons */
@keyframes spinner-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rotation 0.75s linear infinite;
}

.calculate-btn:disabled {
  opacity: 0.75;
  cursor: wait;
}

/* 2. Amélioration des tables sur mobile */
@media (max-width: 640px) {
  /* La classe .card-style-table sera ajoutée au HTML des tables concernées */
  .card-style-table thead {
    display: none;
  }
  
  .card-style-table tr {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--card-background);
  }

  .card-style-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    text-align: right;
  }

  .card-style-table tr td:last-child {
    border-bottom: none;
  }

  .card-style-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    padding-right: 1rem;
    color: var(--heading-color);
  }
}
/* Correção para o bug do input no container flex */
.input-group input[type="number"], 
.input-group input[type="date"] {
    flex: 1 1 0px; /* Permite que o input cresça e encolha a partir de uma base de 0px */
    min-width: 50px; /* Garante uma largura mínima para evitar o colapso completo */
}

.input-group select {
    flex-shrink: 0; /* Impede que o seletor encolha */
}
/* --- Estilos para Checkbox da Calculadora de Risco de AVC --- */

.field .checkbox-label {
    display: block; /* Garante que a label ocupe a linha inteira */
    position: relative;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--input-border);
    border-radius: var(--card-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    background-color: var(--input-background);
    color: var(--text-color);
    margin-bottom: 0.75rem; /* Adiciona espaço entre os itens */
}

/* Esconde o checkbox padrão, mas o mantém funcional e acessível */
.field .checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Muda a aparência da label quando o checkbox está marcado */
.field .checkbox-label:has(input:checked) {
    background-color: var(--primary-light-bg);
    border-color: var(--primary-color);
    color: var(--heading-color);
    box-shadow: 0 2px 5px rgba(var(--primary-color-rgb), 0.1);
}

/* Versão Dark Mode para o estado marcado */
body.dark-mode .field .checkbox-label:has(input:checked) {
    background-color: rgba(var(--primary-color-rgb), 0.3);
    border-color: var(--primary-color);
    color: var(--text-color);
}

/* Adiciona um "check" visual quando marcado */
.field .checkbox-label::before {
    content: '☐';
    font-size: 1.2em;
    margin-right: 10px;
    color: var(--primary-color);
    font-weight: bold;
}

.field .checkbox-label:has(input:checked)::before {
    content: '☑';
}