/* ==========================================================================
   EPAPER CONFIGURATION CSS
   Typography, Google Fonts, Drop Cap, and other customizable styles
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Outfit:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lato:wght@400;700&display=swap');

/* ==========================================================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ========================================================================== */

:root {
  /* Animation & Transition Configuration */
  --transition-page: 500ms; /* Page transition speed (default was 200ms) - increase for slower transitions */
  
  /* Color Configuration */
  --accent: #0057CB; /* Main accent color */
  --accent-rgb: 0, 87, 203; /* RGB values of accent color for rgba() usage */
  --accent-opacity: 0.45; /* Opacity for transparent accent usage */
  
  /* Glass Button Hover Configuration */
  --glass-hover-color: var(--accent); /* Glass button hover color (defaults to accent) */
  --glass-hover-rgb: var(--accent-rgb); /* RGB values for rgba() usage */
  --glass-hover-opacity: 0.35; /* Glass button hover border opacity */
  --glass-border-hover: rgba(var(--glass-hover-rgb), var(--glass-hover-opacity));
  --glass-focus-ring: rgba(var(--glass-hover-rgb), var(--glass-hover-opacity)); /* Focus ring uses same color */
  
  /* Typography Settings */
  /*--reading-body-font: "Inter", "Georgia", "Times New Roman", serif;
  --reading-heading-font: "Outfit", "Crimson Text", "Georgia", serif;
  --reading-font-family: "Lora", "Georgia", "Times New Roman", serif;*/
  --reading-body-font: "Inter", "Georgia", "Times New Roman", serif;
  --reading-heading-font: "Libre Baskerville", "Georgia", serif;
  --reading-font-family: "Lato", "Arial", sans-serif;
  --reading-font-size: 1rem;
  --reading-line-height: 1.23;
  --reading-text-align: left;
  --reading-paragraph-spacing: 1.2rem;
  
  
  /* Font Scale Control (modified by A-/A+ buttons) */
  --reading-font-scale: 1.0;
  --line-height-scale-factor: 0.3; /* How much line-height scales with font (0.3 = 30% of font scaling) */
}

.article-info, .ag-article-end, .article-tags, .ag-read-also-list-wrap, .article-comments, .side-col {
    display: none;
}

.resume-reading-overlay button.resume-reading-overlay__close.glass-btn {
    top: 5px;
    right: 5px;
    padding: 0.8rem;
    width: 1.4rem;
    height: 1.4rem;
}

.reading-window__content audio {
    display: flex !important;
}

/* ==========================================================================
   TYPOGRAPHY STYLES
   ========================================================================== */

.reading-window__content {
  font-size: var(--reading-font-size, 1rem);
  line-height: var(--reading-line-height, 1.1);
  
  /* Safari-yhteensopiva line-height scaling */
  line-height: calc(var(--reading-line-height, 1.1) * var(--reading-font-scale, 1));
}

.reading-window span.department-name.string {
  font-family: var(--reading-body-font);
  display: none;
}

.article-text > p.leipis {
    font-family: var(--reading-font-family, "Georgia", serif) !important;
}

span.bold {
    font-weight: bold;
}

.reading-window__content p.leipis {
  text-align: var(--reading-text-align, left);
  margin-bottom: var(--reading-paragraph-spacing, 1.2rem);
  margin-block: var(--reading-paragraph-spacing);
  
  /* Safari-yhteensopivat fallbackit */
  font-size: 1rem;
  font-size: calc(var(--reading-font-size, 1rem) * var(--reading-font-scale, 1));
  
  line-height: 1.12;
  line-height: calc(var(--reading-line-height, 1.1) * var(--reading-font-scale, 1));
}

/* Jos ingressi puuttuu, muuta ensimmäisen kappaleen margin-top */
.reading-window__content:not(.article-text > .ingressi) .article-text p.leipis:first-of-type{
  margin-top: 2rem;
}

.reading-window__content h1,
.reading-window__content h2,
.reading-window__content h3,
.reading-window__content p.otsikko,
span.isku
 {
  font-family: var(--reading-heading-font, "Georgia", serif);
  
  /* Safari-yhteensopivat fallbackit */
  font-size: 1rem;
  font-size: calc(var(--reading-font-size, 1rem) * var(--reading-font-scale, 1));
}


.reading-window__content p.otsikko {
    font-size: 2.5rem !important;
    font-size: calc(2.5rem * var(--reading-font-scale, 1)) !important;
    margin-bottom: 2rem;
    margin-top: 30px;
    line-height: 1.3;
    font-weight: 900;
}

/* Heading Size Scaling - Safari-yhteensopivat */
.reading-window__content h1 {
  font-size: 2.5rem;
  font-size: calc(2.5rem * var(--reading-font-scale, 1));
  margin-bottom: 2rem;
  margin-top: 30px;
  line-height: 1.3;
}

.reading-window__content h2 {
  font-size: 1.4rem;
  font-size: calc(1.4rem * var(--reading-font-scale, 1));
  margin-bottom: 1em;
}

.reading-window__content h3 {
  font-size: 1.2rem;
  font-size: calc(1.3em * var(--reading-font-scale, 1));
  font-weight: 400;
  line-height: 1.23;
  font-family: var(--reading-font-family);
}

/* ==========================================================================
   DROP CAP (Initial Letter Enhancement)
   ========================================================================== */

/* Drop cap vain kirjaimille - ei välimerkeille */
.reading-window__content .article-text > p.leipis:not(.leipis ~ p.leipis)::first-letter {
  /* Safari-yhteensopiva versio - yksi calc() per ominaisuus */
  float: left;
  margin: 0.2em 0.1em 0 0;
  font-weight: bold;
  position: relative;
  line-height: 0.72em;
  font-family: var(--reading-heading-font) !important;
  /* Safari fallback - Jos calc() ei toimi */
  font-size: 3.8em;
  font-size: calc(3.8em * var(--reading-font-scale, 1));
}

  .reading-window__content .article-text > p.leipis:not(.leipis ~ p.leipis) {
  --dropcap-size: calc(3.8em * var(--reading-font-scale, 1));
  --dropcap-height: calc(var(--dropcap-size) * 0.72);

  min-height: var(--dropcap-height);
}



/* Estä drop cap jos kappale alkaa välimerkeillä */
.reading-window__content .article-text > p.no-drop-cap:first-of-type::first-letter {
  font-size: inherit;
  line-height: inherit;
  float: none;
  margin: 0;
  font-weight: inherit;
}

.fakta-box {
  border-top: 1px solid var(--text-muted);
}

p.faktateksti, p.faktaotsikko {
  font-family: var(--reading-font-family) !important;
}

p.faktaotsikko {
  font-size: 1.5em !important;
  font-weight: bold;
}


/* ==========================================================================
   SAFARI COMPATIBILITY FIXES
   ========================================================================== */

/* Safari-spesifiset webkit-prefixit */
@supports (-webkit-appearance: none) {
  .reading-window__content .article-text > p.teksti:first-of-type::first-letter {
    /* WebKit-spesifi fonttikoko jos calc() ei toimi */
    -webkit-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
  }
  
  /* Safari touch-optimointi */
  .reading-window__content {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* iOS Safari viewport fix */
@supports (-webkit-touch-callout: none) {
  .reading-window__content {
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   EXCLUDE CLASSES - Elements that should not be affected by scaling/alignment
   ========================================================================== */

/* Font Size Scaling Excludes */
.reading-window__content .Image,
.reading-window__content .Image * {
  font-size: initial !important;
  line-height: var(--reading-line-height);
  text-align: left !important;
  font-style: italic;
  margin-top: 0px;
}

/* ==========================================================================
   ACCENT COLOR UTILITIES
   ========================================================================== */

/* Use these classes for consistent accent coloring */
.accent-border {
  border-color: var(--accent);
}

.accent-border-transparent {
  border-color: rgba(var(--accent-rgb), var(--accent-opacity));
}

/* ==========================================================================
   CUSTOMIZATION GUIDE
   ========================================================================== */

/*
  SAFARI & iOS COMPATIBILITY:
  - All CSS properties include Safari fallbacks (font-size: 1rem; font-size: calc(...))
  - Drop cap uses simplified calc() functions to avoid Safari parsing issues
  - JavaScript includes try-catch blocks for CSS custom property operations
  - WebKit-specific optimizations for iOS Safari (-webkit-font-smoothing, etc.)
  - Touch scrolling optimizations for iOS devices
  - Text size adjustment controls for Safari zoom behavior
  
  iOS SAFARI VIEWPORT FIXES:
  - Uses 100dvh (dynamic viewport height) to account for URL bar changes
  - Prevents page scrolling with position: fixed and overflow: hidden
  - Centers newspaper page absolutely to prevent movement
  - Uses safe-area-inset for proper iPhone notch/home indicator spacing
  - Disables bounce scrolling (overscroll-behavior: none)
  - Prevents pinch-to-zoom (touch-action: manipulation)
  - Only allows scrolling inside reading window content
  
  ANIMATION CUSTOMIZATION:
  - Change --transition-fast for page transition speed (400ms = slower, 200ms = faster)
  - Affects page sliding animations when navigating between pages
  
  COLOR CUSTOMIZATION:
  - Change --accent for main theme color (buttons, links, highlights)
  - Update --accent-rgb when changing --accent (extract RGB values: #e91e63 = 233, 30, 99)
  - Adjust --accent-opacity for transparency level (0.45 = 45% opacity)
  - Use .accent-border class for solid accent borders
  - Use .accent-border-transparent class for transparent accent borders
  
  GLASS BUTTON HOVER CUSTOMIZATION:
  - Change --glass-hover-color for different hover color (defaults to --accent)
  - Update --glass-hover-rgb when changing hover color (extract RGB values)
  - Adjust --glass-hover-opacity for hover border transparency (0.35 = 35% opacity)
  - Automatically generates --glass-border-hover variable
  
  USAGE EXAMPLES:
  border-color: var(--accent); 
  border-color: rgba(var(--accent-rgb), var(--accent-opacity));
  border-color: var(--glass-border-hover);
  
  TYPOGRAPHY CUSTOMIZATION:
  - Change fonts by modifying the @import and CSS variables above
  - Adjust --reading-font-scale for font size scaling (A-/A+ buttons)
  - Modify --reading-text-align for different text alignment (left, center, right, justify)
  - Adjust --line-height-scale-factor to control how much line-height changes with font size
    (0.3 = line-height increases by 30% of font scaling amount, 0 = no line-height scaling)
  
  DROP CAP CUSTOMIZATION:
  - Change .articleText p selector to target different elements
  - Adjust font-size, line-height, margins, and positioning properties
  - Drop cap scales intelligently with text size while maintaining proper alignment:
    * Font size scale factor: 0.5 (50% of text scaling)
    * Line height scale factor: 0.2 (20% of text scaling)
    * Margin scale factor: 0.3 (30% of text scaling)
    * Position adjustment with var(--reading-font-scale) for baseline alignment
  - Automatically disabled for paragraphs starting with punctuation (–, ", etc.)
  - JavaScript adds .no-drop-cap class to disable drop cap when needed
  
  EXCLUDE CLASSES:
  - Add/remove classes that should not be affected by typography changes
  - Simply add new selectors following the same pattern
  
  GOOGLE FONTS:
  - Add new font families to the @import URL
  - Update CSS variables to use the new fonts
*/