/* Roja Directa | PageBoss Theme Switcher
   Activate after the supplied PageBoss stylesheet.
   Fonts remain controlled by PageBoss and its language layer. */

/* 1. Brand colors and light foundations */
:root {
    --bg-primary: #f7f7f8;
    --bg-secondary: #fff5f5;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #30343b;
    --text-secondary: #505660;
    --text-muted: #626873;
    --text-heading: #171b22;
    --accent: #B51217;
    --accent-hover: #941016;
    --accent-light: rgba(181, 18, 23, 0.08);
    --accent-glow: rgba(181, 18, 23, 0.16);
    --success: #187443;
    --warning: #865400;
    --danger: #B51217;
    --info: #17618b;
    --border: #dddfe3;
    --border-light: #e9e9ed;
    --shadow-sm: 0 2px 5px rgba(23, 27, 34, 0.04);
    --shadow-md: 0 5px 16px rgba(23, 27, 34, 0.07);
    --shadow-lg: 0 10px 26px rgba(23, 27, 34, 0.09);
    --shadow-glow: 0 0 0 3px var(--accent-glow);
    --radius-md: 8px;
    --radius-lg: 10px;
}

/* 2. Header and menu supplied by PageBoss */
.site-header {
    background: var(--accent);
    border-block-end: 1px solid var(--accent-hover);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-logo,
.site-title-text,
.site-logo:hover,
.site-logo:hover .site-title-text {
    color: #ffffff;
}
.site-title-text { font-weight: 750; }
.site-nav-desktop > ul > li > a,
.site-nav-more-toggle { color: #ffffff; font-weight: 600; }
.site-nav-desktop > ul > li > a { padding-inline: 0.7rem; font-size: 0.85rem; }
.site-nav-desktop > ul > li > a:hover,
.site-nav-desktop > ul > .current-menu-item > a,
.site-nav-desktop > ul > .current_page_item > a,
.site-nav-more-toggle:hover,
.site-nav-more.active .site-nav-more-toggle {
    color: #ffffff;
    background: var(--accent-hover);
}
.site-nav-more-menu,
.site-nav-mobile { background: var(--bg-card); border-color: var(--border); }
.site-nav-desktop .site-nav-more-menu a,
.site-nav-mobile a { color: var(--text-primary); text-align: start; }
.site-nav-desktop .site-nav-more-menu a:hover,
.site-nav-desktop .site-nav-more-menu .current-menu-item > a,
.site-nav-mobile a:hover,
.site-nav-mobile .current-menu-item > a,
.site-nav-mobile .current_page_item > a {
    color: var(--accent-hover);
    background: var(--accent-light);
}
.menu-toggle .bar { background: #ffffff; }
.menu-close { color: var(--accent); border-color: var(--border); }
.menu-close:hover { color: var(--accent-hover); background: var(--accent-light); }
.site-nav-chips { background: var(--accent); border-color: var(--accent-hover); }
.site-nav-chips a { background: #ffffff; color: var(--accent-hover); border-color: #ffffff; }
.site-nav-pill { background: #ffffff; box-shadow: var(--shadow-md); }

/* 3. Typography and readable measure */
body { color: var(--text-primary); background: var(--bg-primary); }
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }
h1 { font-size: clamp(1.8rem, 3.7vw, 2.8rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
h3 { font-size: 1.12rem; }
p { color: var(--text-secondary); line-height: 1.75; }
.lead { font-size: 1.07rem; line-height: 1.75; }
.text-gradient { background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); }
small, .text-muted { color: var(--text-muted); }

/* 4. Compact hero and alternating sections */
.hero, .hero-lg { background: var(--bg-primary); padding-block: 3rem; }
.hero-lg .lead { max-inline-size: 52rem; }
.hero-lg img { max-inline-size: 52rem; max-block-size: 25rem; object-fit: contain; object-position: center; }
.section { padding-block: 2.5rem; }
.section.bg-secondary { background: var(--bg-secondary); border-block: 1px solid #f0e6e7; }
.container-md { max-inline-size: 54rem; }

/* 5. White cards and restrained depth */
.card,
.bg-secondary .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}
.card:hover { transform: none; border-color: var(--accent-glow); box-shadow: var(--shadow-md); }
.card-title { font-size: 1.08rem; margin-block-end: 0.7rem; }
.card-text { font-size: 0.95rem; }
.card p:last-child { margin-block-end: 0; }
.grid { gap: 1.25rem; }

/* 6. Red primary and outline secondary buttons */
.btn { border-radius: 6px; min-block-size: 44px; padding: 0.7rem 1.1rem; }
.btn:hover { transform: none; }
.btn-primary { color: #ffffff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { color: #ffffff; background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; }
.btn-outline { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn-outline:hover { color: #ffffff; background: var(--accent); box-shadow: none; }
.btn-secondary { color: var(--accent-hover); background: var(--accent-light); border-color: var(--accent-glow); }
.btn-secondary:hover { color: #ffffff; background: var(--accent); }
.btn-ghost { color: var(--accent); }
.btn-ghost:hover { color: var(--accent-hover); background: var(--accent-light); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid #17618b; outline-offset: 3px; }
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: #ffffff; }

/* 7. Labels, links and logical list spacing */
.badge { color: var(--accent-hover); background: var(--accent-light); border: 1px solid var(--accent-glow); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.045em; border-radius: 4px; }
.link-underline { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; font-weight: 500; }
.link-underline::after { content: none; }
.link-underline:hover { color: var(--accent-hover); }
ul, ol { padding-left: 0; padding-right: 0; padding-inline-start: 1.4rem; }
ul.list-check { padding-inline-start: 0; }
ul.list-check li { padding-left: 0; padding-right: 0; padding-inline-start: 1.5rem; }
ul.list-check li::before { left: auto; right: auto; inset-inline-start: 0; color: var(--accent); }

/* 8. Tables and factual reference blocks */
table { inline-size: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
caption { text-align: start; padding-block: 0.7rem; color: var(--text-muted); font-size: 0.86rem; }
th, td { padding: 0.85rem 1rem; text-align: start; border-color: var(--border-light); vertical-align: top; }
th { background: var(--accent-light); color: var(--text-heading); font-size: 0.8rem; }
tr:hover td { background: #fff9f9; }
blockquote { border-left: 0; border-right: 0; border-inline-start: 3px solid var(--accent); background: var(--bg-card); border-radius: 6px; text-align: start; }
.divider, .divider-accent { background: var(--border); }
.img-rounded { border-radius: 8px; }
.img-shadow { box-shadow: var(--shadow-sm); }

/* 9. Reliable visibility and the existing site footer */
.fade-in, .fade-in.visible { opacity: 1; transform: none; transition: none; }
.site-footer { margin-block-start: 0; background: #ffffff; border-block-start: 1px solid var(--border); }
.footer-text, .footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }

/* 10. Mobile and reduced motion */
@media (max-width: 768px) {
    .hero, .hero-lg { padding-block: 2rem; }
    .section { padding-block: 1.8rem; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.35rem; }
    .lead { font-size: 1rem; }
    .card, .bg-secondary .card { padding: 1.2rem; }
    th, td { padding: 0.7rem; font-size: 0.9rem; }
    .btn-group { gap: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .card, a, .site-nav-mobile, .site-nav-more-menu { transition: none; }
}