/* base.css  */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/roboto-regular.woff2') format('woff2');
  font-display: swap; 
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/roboto-bold-700.woff2') format('woff2');
  font-display: swap; 
}

:root {
    /* Sistema di colori - Base chiara */
    --color-primary-dark: #0a1144;
    --color-primary: #1a237e;
    --color-secondary: #1e40af;
    --color-text: #1f2937;
    --color-accent: #2563eb;
    --color-accent-light: #3b82f6;
    --color-accent-lighter: #60a5fa;

    /* Colori neutri/grigi */
    --color-gray-50: #f8f8f8;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #666;
    --color-gray-500: #444;
    --color-gray-600: #333;
    --color-gray-700: #222;

    /* Colore Bianco */
    --color-white: #ffffff;

    /* Link */
    --color-link: #0077cc;
    --color-link-hover: #005a99;

     /* Link Footer */
    --footer-link: #d9e2ef;               /* AA su footer scuro */
    --footer-link-hover: var(--color-accent-light);
    --footer-link-active: #ffffff;
    --footer-link-visited: #cbd9f0;       /* ancora AA su scuro */
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);

    /* Superfici (layout) */
    --surface-body: var(--color-gray-50);
    --surface-header: var(--color-gray-50);
    --surface-footer: var(--color-gray-700);

    /* Gradienti */
    --gradient-heading: linear-gradient(to right, var(--color-primary-dark), var(--color-primary));

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Container */
    --container-padding: 1.5rem;  /* Aumentato per miglior spaziatura su mobile */
    --section-spacing: var(--space-lg);
    --container-max-width: 75rem;

    /* Border radius */
    --radius-sm: 0.3125rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.9375rem;

    /* Typography */
    --font-size-base: 1rem;
    --font-scale-ratio: 1.2;
    --font-size-sm: calc(var(--font-size-base) / var(--font-scale-ratio));
    --font-size-md: var(--font-size-base);
    --font-size-lg: calc(var(--font-size-base) * var(--font-scale-ratio));
    --font-size-xl: calc(var(--font-size-base) * var(--font-scale-ratio) * var(--font-scale-ratio));
    --font-size-2xl: calc(var(--font-size-base) * var(--font-scale-ratio) * var(--font-scale-ratio) * var(--font-scale-ratio));

    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-loose: 1.8;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Footer */
    --footer-gap: var(--space-lg);
    --footer-section-margin: var(--space-md);
    --footer-heading-size: 1.25rem;

    /* Breakpoints */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1440px;
    --breakpoint-xl: 1920px;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; 
    margin-bottom: 0.5em;
    line-height: var(--line-height-tight);
    word-wrap: break-word;
}

h1{
    color: var(--color-primary-dark);
    text-align: center;
    font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem);
    margin-bottom: var(--space-sm);
    background: var(--gradient-heading);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* Utility per gestire le icone SVG */
.icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    vertical-align: middle;
}

/* Colore di default SOLO nel contenuto, non globalmente */
:where(main, .entry-content, .article-content) {
  color: var(--color-text);
}

/* I titoli ereditano il colore locale (il gradiente dell’H1 resta) */
:where(main, .entry-content, .article-content) h2,
:where(main, .entry-content, .article-content) h3,
:where(main, .entry-content, .article-content) h4,
:where(main, .entry-content, .article-content) p,
:where(main, .entry-content, .article-content) li { 
    color: inherit; 
}

/* Link solo nelle aree di contenuto */
:where(main, .entry-content, .article-content) a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(main, .entry-content, .article-content) a:hover {
  color: var(--color-link-hover);
}

/* Bottoni/“pill” resistono ai link default */
a[class*="button"], 
a[class*="btn"],
.category-pill, .format-pill, .tag-badge {
  color: inherit;
}

/* Small Tablet (481px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
    :root {
        --container-padding: 1.25rem;
        --section-spacing: 1.875rem;
        --font-size-base: 0.9375rem;
    }
}

/* Tablet (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-padding: 1.5625rem;
        --section-spacing: 2.1875rem;
        --font-size-base: 1rem;
    }
}

/* Desktop (1024px - 1439px) */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --container-padding: clamp(1.875rem, 3vw, 2.5rem);
        --section-spacing: clamp(2.5rem, 4vw, 3.125rem);
    }
}

/* Large Desktop (1440px - 1919px) */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --container-max-width: 87.5rem;
    }
}

/* Extra Large Desktop (1920px+) */
@media screen and (min-width: 1920px) {
    :root {
        --container-max-width: 100rem;
        --container-padding: 3.75rem;
        --section-spacing: 4.375rem;
        --font-size-base: 1.25rem;
    }
}

/* ----- ACCESSIBILITY ----- */

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .nav-links a,
    .footer-links a,
    .cert-wrapper img,
    .certifications img,
    .menu-toggle svg,
    .footer-link-base,
    .tooltip,
    .blog-card,
    .project-card,
    .card-image img,
    .read-more span,
    .tag-badge,
    .author-social a,
    .skill-card,
    .testimonial-card {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Prefers reduced transparency */
@media (prefers-reduced-transparency: reduce) {
    .tooltip,
    .main-nav {
        opacity: 1 !important;
    }

    .custom-header {
        backdrop-filter: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: more) {
    :root {
        --color-primary-dark: #000066;
        --color-primary: #0000CC;
        --color-secondary: #0033FF;
        --color-text: #000000;
        --color-accent: #0066FF;
    }

    body {
        color: #000000;
    }

    a:focus,
    button:focus {
        outline: 3px solid #000000;
        outline-offset: 2px;
    }

    .custom-header {
        background: #FFFFFF;
        border-bottom-color: #000000;
    }

    h1,
    .site-title {
        background: none;
        -webkit-text-fill-color: initial;
        color: var(--color-primary-dark);
        text-shadow: none;
    }

    .tag-badge,
    .category-pill,
    .format-pill {
        border: 2px solid currentColor;
    }
}

/* Forced Colors Mode (Windows High Contrast) */
@media (forced-colors: active) {
    * {
        forced-color-adjust: none;
    }

    button,
    .menu-toggle,
    .nav-links a,
    .footer-links a,
    .blog-card,
    .project-card {
        border: 1px solid ButtonText;
    }

    h1,
    .site-title,
    .nav-links a,
    .footer-link-base {
        background: none !important;
        -webkit-text-fill-color: initial !important;
        color: CanvasText !important;
    }

    a {
        color: LinkText !important;
    }

    a:hover,
    a:focus {
        color: ActiveText !important;
    }
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-50: #0f1115;
        --color-gray-100: #14161b;
        --color-gray-200: #1d222b;
        --color-gray-300: #222833;
        --color-gray-400: #96a0ac;
        --color-gray-500: #b4bcc7;
        --color-gray-600: #d1d7df;
        --color-gray-700: #e9edf2;
        --color-text: #e9edf2;

        /* Link */
        --color-link: #93c5fd;
        --color-link-hover: #bfdbfe;

        /* superfici in dark */
        --surface-body: var(--color-gray-100);
        --surface-header: var(--color-gray-100);
        --surface-footer: var(--color-gray-200);
    }

   :where(main, .entry-content, .article-content) {
        color: var(--color-text);
    }

    :where(main, .entry-content, .article-content) :is(p, li, h2, h3, h4) { 
        color: inherit; 
    }

    h1 { 
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); 
    }
}

/* ----- PRINT STYLES ----- */
@media print {
    @page {
        size: A4;
        margin: 1cm;
    }

    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000 !important;
        background-color: #fff !important;
    }

    .search-container,
    .category-filters,
    .format-filters,
    .pagination,
    .menu-toggle,
    .main-nav,
    .social-share-sidebar,
    .author-sidebar,
    .related-posts,
    .custom-header nav,
    .custom-footer,
    button,
    .cta-button,
    .secondary-cta {
        display: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
        word-wrap: break-word;
    }

    a[href^="/"]:after,
    a[href^="#"]:after,
    a[href^="javascript:"]:after,
    a[href*="azaina.it"]:after {
        content: "";
    }

    table {
        break-inside: auto;
    }

    pre, blockquote, img {
        page-break-inside: avoid;
        border: 1px solid #ddd;
        max-width: 100% !important;
    }

    img {
        max-height: 200mm;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    h1 {
        font-size: 24pt;
        background: none;
        -webkit-text-fill-color: black;
        color: black;
    }

    h2 {
        font-size: 18pt;
    }

    h3 {
        font-size: 14pt;
    }

    p, li {
        page-break-inside: avoid;
    }

    .blog-card,
    .skill-card,
    .testimonial-card,
    .project-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #ddd;
        padding: 0.5cm;
        margin-bottom: 1cm;
        box-shadow: none !important;
    }
}

/* Screen Reader Only */
.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;
}