/* The International Forecaster — "Modern Brief" theme on top of Bootstrap 5.3 */

:root {
    --tif-accent: #c3351c;
    --tif-accent-dark: #a02b16;
    --tif-ink: #111111;
    --tif-muted: #555555;
    --tif-soft: #f3f2ef;
    --tif-line: #e4e4e4;

    --bs-body-font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-color: var(--tif-ink);
    --bs-body-bg: #ffffff;
    --bs-border-color: var(--tif-line);
    --bs-link-color: var(--tif-ink);
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-hover-color: var(--tif-accent);
    --bs-link-hover-color-rgb: 195, 53, 28;
    --bs-secondary-color: var(--tif-muted);
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; }

.container-tif { max-width: 1280px; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .65rem; }
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.0625rem; }

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tif-accent);
    --bs-btn-border-color: var(--tif-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tif-accent-dark);
    --bs-btn-hover-border-color: var(--tif-accent-dark);
    --bs-btn-active-bg: var(--tif-accent-dark);
    --bs-btn-active-border-color: var(--tif-accent-dark);
    --bs-btn-focus-shadow-rgb: 195, 53, 28;
}
.btn-ink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tif-ink);
    --bs-btn-border-color: var(--tif-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333;
    --bs-btn-hover-border-color: #333;
    --bs-btn-active-bg: #000;
}
.btn-outline-ink {
    --bs-btn-color: var(--tif-ink);
    --bs-btn-border-color: var(--tif-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tif-ink);
    --bs-btn-hover-border-color: var(--tif-ink);
    border-width: 1.5px;
}
/* Legacy pages still use btn-secondary / btn-primary / btn-info */
.btn-info {
    --bs-btn-color: var(--tif-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--tif-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tif-ink);
    --bs-btn-hover-border-color: var(--tif-ink);
    border-width: 1.5px;
    border-radius: 999px;
}
.btn-outline-ink { border-radius: 999px; }
.btn-primary, .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tif-ink);
    --bs-btn-border-color: var(--tif-ink);
    --bs-btn-hover-bg: var(--tif-accent);
    --bs-btn-hover-border-color: var(--tif-accent);
    border-radius: 999px;
}

.form-control, .form-select { min-height: 48px; border-color: #cfcfcf; }
.form-control:focus, .form-select:focus { border-color: var(--tif-accent); box-shadow: 0 0 0 .2rem rgba(195, 53, 28, .2); }

/* ---------- Header ---------- */
.tif-navbar { padding-block: 1rem; }
.tif-navbar .nav-link { color: var(--tif-ink); font-weight: 500; font-size: .95rem; padding-block: .75rem; }
.tif-navbar .nav-link:hover, .tif-navbar .nav-link:focus { color: var(--tif-accent); }
.tif-brand { display: flex; align-items: center; gap: .65rem; color: var(--tif-ink); text-decoration: none; }
.tif-brand:hover { color: var(--tif-ink); }
.tif-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: var(--tif-accent); flex: none;
}
.tif-brand__name { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.tif-search .form-control { min-height: 44px; border-radius: 999px; padding-inline: 1rem; width: 12rem; }

/* ---------- Landing ---------- */
.tif-eyebrow { font-size: .95rem; font-weight: 600; color: var(--tif-accent); }
.tif-display {
    font-size: clamp(3rem, 8vw, 7.5rem);
    font-weight: 800; line-height: .92; letter-spacing: -0.045em;
    max-width: 1100px;
}
.tif-lead { font-size: 1.25rem; color: #444; max-width: 560px; }
.tif-section { padding-block: 3.5rem; border-top: 1px solid var(--tif-line); }
.tif-section-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }

.tif-card {
    display: flex; flex-direction: column; gap: .5rem; height: 100%;
    padding: 1.5rem; border-radius: 20px; background: var(--tif-soft);
    color: var(--tif-ink); text-decoration: none; transition: transform .15s ease;
}
.tif-card:hover { color: var(--tif-ink); transform: translateY(-2px); }
.tif-card__meta { font-size: .8125rem; font-weight: 600; color: #5c5c5c; }
.tif-card__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tif-card__text { font-size: .95rem; color: #444; margin: 0; }

.tif-card--feature {
    background: var(--tif-ink); color: #fff; padding: 2.25rem; min-height: 340px;
    justify-content: space-between; gap: 1rem;
}
.tif-card--feature:hover { color: #fff; }
.tif-card--feature .tif-card__meta { color: #ff9d86; font-size: .875rem; }
.tif-card--feature .tif-card__title { font-size: clamp(2.1rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.tif-card--feature .tif-card__text { color: #c9c9c9; font-size: 1.125rem; max-width: 560px; }

.tif-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--tif-line); text-decoration: none; }
.tif-list a:first-child { border-top: 1px solid var(--tif-line); }
.tif-list__title { font-weight: 600; font-size: 1.125rem; }
.tif-list__meta { color: var(--tif-muted); font-size: .9rem; }

.tif-step__num { font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--tif-accent); }
.tif-step h3 { font-size: 1.375rem; margin: 1rem 0 .4rem; }
.tif-step p { color: #444; margin: 0; }

.tif-statement { font-size: 1.625rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }

.tif-cta { background: var(--tif-accent); color: #fff; border-radius: 28px; padding: 3.5rem; }
.tif-cta h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.tif-cta p { color: #ffe9e3; font-size: 1.125rem; }
.tif-cta .form-control { border: 0; border-radius: 999px; min-height: 52px; padding-inline: 1.25rem; }
.tif-cta .btn { min-height: 52px; }

@media (max-width: 575.98px) {
    .tif-cta { padding: 2rem 1.5rem; border-radius: 20px; }
    .tif-card--feature { padding: 1.75rem; min-height: 0; }
}

/* ---------- Footer ---------- */
.tif-footer { border-top: 1px solid var(--tif-line); color: var(--tif-muted); font-size: .95rem; }
.tif-footer a { color: var(--tif-muted); }
.tif-footer a:hover { color: var(--tif-accent); }

/* ---------- Inner pages (legacy class names kept working) ---------- */
.content { padding: 0 0 1.5rem; }
.bodyrow { padding-block: 1.25rem; border-bottom: 1px solid var(--tif-line); }
.author { color: var(--tif-muted); font-size: .9rem; font-weight: 500; }
.latest { padding: 2rem; border-radius: 20px; background: var(--tif-soft); }
.ifsummary { padding: 0; }
.list-group-item { border-color: var(--tif-line); }
/* Headings that link elsewhere (lists, search) shouldn't look like body links */
h1 a, h2 a, h3 a, h4 a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--tif-accent); }

.tif-page-title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin: .35rem 0 .75rem; }

/* Descriptions and summaries are editor HTML; keep any headings in them at body size */
.tif-standfirst { font-size: 1.25rem; line-height: 1.5; color: #444; max-width: 720px; }
.tif-standfirst :is(h1, h2, h3, h4, h5, h6), .tif-summary :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; margin: 0 0 .5rem; }
.tif-summary { color: #444; margin-bottom: 1rem; max-width: 760px; }

/* Article and page text: a readable line length */
.tif-prose { max-width: 720px; font-size: 1.125rem; line-height: 1.7; }
.tif-prose img { max-width: 100%; height: auto; }
.tif-prose h2 { font-size: 1.625rem; margin-top: 2rem; }
.tif-prose h3 { font-size: 1.3rem; margin-top: 1.75rem; }
.tif-prose h4, .tif-prose h5, .tif-prose h6 { font-size: 1.125rem; margin-top: 1.5rem; }

/* Section headings within long forms (subscribe) */
.tif-form-heading { font-size: 1.375rem; margin: 1.5rem 0 .75rem; }

/* Grouped form sections (profile) */
.tif-panel { padding: 1.5rem; border: 1px solid var(--tif-line); border-radius: 20px; }
.tif-panel__title { font-size: 1.25rem; margin-bottom: 1rem; }

/* Large radio choices (subscription plans) */
.tif-option { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; border: 1.5px solid var(--tif-line); border-radius: 16px; cursor: pointer; font-size: 1.125rem; }
.tif-option:hover { border-color: #bdbdbd; }
.tif-option:has(input:checked) { border-color: var(--tif-accent); background: #fdf3f0; }
.tif-option .form-check-input { float: none; margin: 0; width: 1.3em; height: 1.3em; flex: none; }

.form-check-input { border-color: #8f8f8f; }
.form-check-input:checked { background-color: var(--tif-accent); border-color: var(--tif-accent); }

.tif-issues .btn { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .875rem; }

/* Login, register and password pages */
.tif-auth-card { border-radius: 20px; border-color: var(--tif-line); }
.tif-auth-card .card-header { background: none; padding: 1.5rem 1.5rem 0; border: 0; }
.tif-auth-card .card-body { padding: 1.25rem 1.5rem 1.5rem; }

/* Laravel's Bootstrap 5 paginator puts "Showing 1 to 15 of N results" beside the links; stack them */
nav > .flex-sm-fill.d-sm-flex { flex-direction: column; gap: .75rem; }
.pagination { --bs-pagination-color: var(--tif-ink); --bs-pagination-active-bg: var(--tif-ink); --bs-pagination-active-border-color: var(--tif-ink); --bs-pagination-hover-color: var(--tif-accent); }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 2em; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; inset: 0; width: 100%; height: 100%; }