/*
 * public/assets/css/base.css | Ultima modifica: 07/05/2026 | v1.0
 *
 * PURPOSE:
 *   Global CSS foundation for assocefa.it.
 *   Defines CSS custom properties (design tokens), reset rules,
 *   and base typography. All other CSS files depend on this file.
 *
 * LOAD ORDER:
 *   This file must be loaded FIRST before any other CSS file.
 *
 * DEPENDENCIES:
 *   Google Fonts: Inter (400, 500, 600)
 *   Import via: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 *
 * CHANGELOG:
 *   - 07/05/2026 v1.0: initial implementation
 */

/* =============================================================================
   BLOCK: Google Fonts import
   Note: loaded via <link> in HTML head for performance — not @import here
   ============================================================================= */

/* =============================================================================
   BLOCK: Design tokens — CSS custom properties
   Intent: single source of truth for colors, spacing, radius, typography.
   Changing a value here propagates everywhere automatically.
   ============================================================================= */
:root {
    /* Brand colors — palette CEFA
       CEFA Blue #013AA5, CEFA Gold #FBC701, bianco. Il blu resta il colore
       primario (nav, link, bottoni); l'oro e' l'accento secondario usato per
       evidenziazioni (tab attivo, etichette, hover), sempre su fondo scuro o
       con testo scuro per garantire il contrasto WCAG. */
    --color-accent:         #013AA5;   /* CEFA Blue — nav, buttons, links */
    --color-accent-dark:    #012C7A;   /* Hover state, text on light blue bg  */
    --color-accent-light:   #E6EDF8;   /* Light blue fills — pills, sidebar boxes */
    --color-accent-border:  #B9CBEA;   /* Blue borders — sidebar boxes, course cards */

    /* Secondary accent — CEFA Gold */
    --color-gold:           #FBC701;   /* CEFA Gold — active indicators, highlights */
    --color-gold-dark:      #8A6D00;   /* Testo "oro" leggibile su bianco (WCAG AA) */
    --color-gold-light:     #FFF6D6;   /* Riempimenti oro tenue — badge, box */

    /* Neutral palette */
    --color-white:          #ffffff;
    --color-bg-page:        #f3f4f6;   /* Page background — light gray */
    --color-bg-card:        #ffffff;   /* Card/surface background */
    --color-bg-input:       #f9fafb;   /* Input fields */
    --color-bg-placeholder: #e5e7eb;   /* Image placeholder fills */

    /* Text hierarchy */
    --color-text-primary:   #1a1a1a;   /* Body text, headings */
    --color-text-secondary: #4b5563;   /* Excerpts, descriptions */
    --color-text-muted:     #6b7280;   /* Meta info: dates, authors, read time. #6b7280 = ~4.6:1 su bianco (WCAG AA) */
    --color-text-accent:    #013AA5;   /* Links, category labels */

    /* Borders */
    --color-border-light:   #e5e7eb;   /* Card borders, dividers */
    --color-border-medium:  #d1d5db;   /* Input borders, hover states */

    /* Typography */
    --font-primary:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Typographic scale — bumped +2px across the board on 07/05/2026.
       Keeps proportions intact while improving baseline readability,
       especially for editorial body copy and admin tables. */
    --font-size-xs:         12px;
    --font-size-sm:         13px;
    --font-size-base:       15px;      /* Body text */
    --font-size-md:         16px;
    --font-size-lg:         18px;
    --font-size-xl:         20px;
    --font-size-2xl:        22px;
    --font-size-3xl:        26px;
    --line-height-body:     1.8;       /* Editorial standard for long-form reading */
    --line-height-heading:  1.35;
    --line-height-tight:    1.4;

    /* Spacing scale */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   16px;
    --space-xl:   20px;
    --space-2xl:  24px;
    --space-3xl:  32px;

    /* Border radius */
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  10px;
    --radius-xl:  14px;
    --radius-pill: 100px;

    /* Layout */
    --container-max:     1140px;
    --sidebar-width:     220px;
    --content-gap:       16px;
    --topbar-height:     28px;
    --header-height:     68px;
    --nav-height:        40px;
}

/* =============================================================================
   BLOCK: CSS reset
   Minimal reset — preserves useful browser defaults where possible.
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Smooth scrolling for anchor links within page */
    scroll-behavior: smooth;
    /* Prevent iOS font size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family:      var(--font-primary);
    font-size:        var(--font-size-base);
    line-height:      var(--line-height-body);
    color:            var(--color-text-primary);
    background-color: var(--color-bg-page);
    /* Prevent horizontal overflow on mobile */
    overflow-x: hidden;
}

main {
    min-width: 0;
}

p,
li,
h1,
h2,
h3,
h4 {
    overflow-wrap: anywhere;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--color-accent);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-primary);
}

input, textarea, select {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
}

/* =============================================================================
   BLOCK: Base typography
   Heading sizes and weights used across all page types.
   ============================================================================= */

/* Article body headings (inside .article-body) */
h1, h2, h3, h4 {
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Page-level h1 (article title, category title) */
h1 { font-size: var(--font-size-2xl); }

/* Section headings inside article body */
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }

/* =============================================================================
   BLOCK: Utility classes
   Minimal global utilities. Component-specific styles live in components.css.
   ============================================================================= */

/* Visually hidden — accessible to screen readers */
.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;
}

/* Text truncation — single line */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Text truncation — two lines (used in article card titles) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text truncation — three lines (used in excerpts) */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}