@import url('tokens.css');

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/spacegrotesk-0.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/publicsans-0.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

body {
    background-color: var(--clr-bg);
    color: var(--clr-fg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

a {
    color: var(--clr-accent-ui);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--clr-accent-high);
    text-decoration-thickness: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

/* Typography Scale */
h1 { font-size: var(--text-4xl); margin-bottom: var(--space-lg); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); margin-top: var(--space-xl); border-bottom: var(--border-thick); padding-bottom: var(--space-xs); }
h3 { font-size: var(--text-2xl); margin-top: var(--space-lg); }
h4 { font-size: var(--text-xl); }

p { margin-bottom: var(--space-md); }

/* Layout Structure */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    width: 100%;
}

/* Header & Nav */
header.site-header {
    background: var(--clr-surface);
    border-bottom: var(--border-thick);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
}

.logo {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--clr-fg);
    text-decoration: none;
    letter-spacing: -0.05em;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.logo svg {
    width: 24px;
    height: 24px;
    stroke: var(--clr-accent-high);
}

nav.main-nav ul {
    display: flex;
    gap: var(--space-md);
    list-style: none;
}

nav.main-nav a {
    color: var(--clr-fg);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

nav.main-nav a.current {
    color: var(--clr-accent-high);
    border-bottom: 2px solid var(--clr-accent-high);
}

/* Main Content area */
main {
    flex-grow: 1;
    padding: var(--space-xl) 0;
}

/* Brutalist Grid Section Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-asym {
        grid-template-columns: 2fr 1fr;
    }
}

/* Clinical Callout / Note Boxes */
.callout {
    background: var(--clr-surface);
    border: var(--border-thick);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    border-left: 8px solid var(--clr-fg);
}

.callout.warning { border-left-color: var(--clr-accent-high); }
.callout.info { border-left-color: var(--clr-accent-ui); }

/* Tables */
.clinical-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
    font-size: var(--text-sm);
}

.clinical-table th, .clinical-table td {
    padding: var(--space-sm);
    border: 1px solid var(--clr-border);
    text-align: left;
}

.clinical-table th {
    background: var(--clr-fg);
    color: var(--clr-bg);
    font-family: var(--font-display);
    font-weight: 700;
}

.clinical-table tr:nth-child(even) {
    background: var(--clr-surface);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--clr-fg);
    color: var(--clr-bg);
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    border: var(--border-thick);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:hover {
    background: var(--clr-bg);
    color: var(--clr-fg);
}

.btn-primary { background: var(--clr-accent-high); border-color: var(--clr-accent-high); color: #fff;}
.btn-primary:hover { background: var(--clr-bg); color: var(--clr-accent-high); }

/* Interactive Tool Containers */
.tool-container {
    background: var(--clr-surface);
    border: var(--border-thick);
    padding: var(--space-lg);
    margin: var(--space-xl) 0;
    position: relative;
}

.tool-container h3 { margin-top: 0; }

.tool-input-group {
    margin-bottom: var(--space-md);
}

.tool-input-group label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2xs);
    font-size: var(--text-sm);
}

.tool-input-group input, .tool-input-group select {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--clr-border);
    font-family: var(--font-body);
    font-size: var(--text-base);
    border-radius: var(--radius-none);
}

.tool-input-group input:focus, .tool-input-group select:focus {
    outline: none;
    border-color: var(--clr-fg);
    box-shadow: 0 0 0 2px var(--clr-border);
}

.tool-result {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--clr-bg);
    border: 1px dashed var(--clr-fg);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

noscript .tool-result {
    display: block !important;
}

/* Badges for High/Low FODMAP */
.badge {
    display: inline-block;
    padding: 0.1em 0.4em;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle;
}
.badge.high { background: var(--clr-accent-high); }
.badge.med { background: var(--clr-accent-med); color: var(--clr-fg); }
.badge.low { background: var(--clr-accent-low); }

/* Footer */
footer.site-footer {
    background: var(--clr-fg);
    color: var(--clr-bg);
    padding: var(--space-2xl) 0;
    margin-top: auto;
}

footer a {
    color: var(--clr-bg);
    text-decoration-color: var(--clr-muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer-disclaimer {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-muted);
    font-size: var(--text-xs);
    color: var(--clr-border);
}

.footer-col-1 h3 { color: var(--clr-bg); }
.footer-col-2 h4, .footer-col-3 h4 { color: var(--clr-bg); margin-bottom: 0.5rem; }
.footer-links { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.section-padding { padding: var(--space-4xl) 0; border-bottom: var(--border-thick); }
.section-padding-sm { padding: var(--space-2xl) 0; border-bottom: var(--border-thick); }
.section-padding-no-border { padding: var(--space-2xl) 0; }
.hero-text { font-size: var(--text-lg); }
.hero-buttons { margin-top: var(--space-lg); display: flex; gap: var(--space-md); }
.hero-image { border: var(--border-thick); }
.list-square { list-style: square; margin-left: var(--space-md); }
.mt-md { margin-top: var(--space-md); }
.next-steps-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--space-md); }
.display-font { font-family: var(--font-display); }
.tool-result-none { display: none; }