/*
Theme Name: LTP Motyw FSE
Theme URI: https://ltp.example
Author: LTP Sp. z o.o.
Description: Motyw blokowy (FSE) LTP — CPT/ACF dla BIP, Tailwind CDN dla warstwy wizualnej.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: ltp-motyw-fse
*/

/* ══════════════════════════════════════════════════════════════
   CZCIONKA SANSATION (lokalna)
   ══════════════════════════════════════════════════════════════ */
    @font-face { font-family: 'Sansation'; src: url('assets/fonts/Sansation_Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
    @font-face { font-family: 'Sansation'; src: url('assets/fonts/Sansation_Light_Italic.ttf') format('truetype'); font-weight: 300; font-style: italic; }
    @font-face { font-family: 'Sansation'; src: url('assets/fonts/Sansation_Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
    @font-face { font-family: 'Sansation'; src: url('assets/fonts/Sansation_Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
    @font-face { font-family: 'Sansation'; src: url('assets/fonts/Sansation_Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
    @font-face { font-family: 'Sansation'; src: url('assets/fonts/Sansation_Bold_Italic.ttf') format('truetype'); font-weight: 700; font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   SYSTEM DESIGNU – wspólny dla strony głównej i wyszukiwarki połączeń
   ══════════════════════════════════════════════════════════════ */

    /* Wymuszenie czcionki Sansation wszędzie (jak w oryginalnych plikach) */
    * { font-family: 'Sansation', sans-serif !important; }

    /* ═══════════════════════════════════════════
       WCAG 2.1 AA – HIGH CONTRAST MODE
    ═══════════════════════════════════════════ */
    body.contrast-mode,
    body.contrast-mode * {
      background-color: #000000 !important;
      color: #FFFF00 !important;
      border-color: #FFFF00 !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }
    body.contrast-mode a,
    body.contrast-mode a * {
      color: #FFFFFF !important;
      text-decoration: underline !important;
    }
    body.contrast-mode button,
    body.contrast-mode [role="button"] {
      background-color: #000000 !important;
      border: 2px solid #FFFF00 !important;
      color: #FFFF00 !important;
    }
    body.contrast-mode img {
      filter: grayscale(1) contrast(2) brightness(0.8) !important;
    }
    body.contrast-mode .hero-overlay {
      background: rgba(0,0,0,0.85) !important;
    }
    body.contrast-mode input,
    body.contrast-mode select,
    body.contrast-mode textarea {
      background-color: #000000 !important;
      color: #FFFF00 !important;
      border: 2px solid #FFFF00 !important;
    }
    body.contrast-mode input::placeholder {
      color: #999999 !important;
    }
    body.contrast-mode .tab-btn.active {
      border-bottom-color: #FFFF00 !important;
      color: #FFFF00 !important;
    }

    /* ═══════════════════════════════════════════
       WCAG 2.1 AA – FONT SIZE LEVELS
    ═══════════════════════════════════════════ */
    html.text-lg { font-size: 112.5% !important; }
    html.text-xl { font-size: 125% !important; }

    /* ═══════════════════════════════════════════
       FOCUS INDICATOR
    ═══════════════════════════════════════════ */
    *:focus-visible { outline: 3px solid #0099DD; outline-offset: 3px; }

    section { scroll-margin-top: 80px; }

    /* Hero overlay – Lubuskie granat (Pantone 281 C) */
    .hero-overlay {
      background: linear-gradient(
        to right,
        rgba(12,35,64,0.92) 0%,
        rgba(12,35,64,0.70) 55%,
        rgba(12,35,64,0.12) 100%
      );
    }

    /* Tab active – Lubuskie błękit */
    .tab-btn.active {
      border-bottom: 3px solid #0099DD;
      color: #0099DD;
      font-weight: 700;
    }
    .tab-btn { border-bottom: 3px solid transparent; }

    /* Input glow – błękit */
    .field-input:focus {
      border-color: #0099DD;
      box-shadow: 0 0 0 3px rgba(0,153,221,0.15);
    }

    /* Animated underline on nav links – Lubuskie zieleń */
    .nav-link::after {
      content: '';
      display: block;
      height: 2px;
      background: #27AE60;
      transform: scaleX(0);
      transition: transform 0.25s ease;
    }
    .nav-link:hover::after { transform: scaleX(1); }

    /* Top info bar – Lubuskie granat */
    .info-bar { background: #0C2340; }

    /* Card hover effect */
    .km-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .km-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(12,35,64,0.12);
    }

    /* Zielony przycisk – Lubuskie zieleń */
    .btn-green {
      background: #27AE60;
      transition: background 0.2s, transform 0.15s;
    }
    .btn-green:hover { background: #1E824C; transform: translateY(-1px); }
    .btn-green:active { transform: scale(0.97); }

    /* Błękitny przycisk – Lubuskie błękit */
    .btn-blue {
      background: #0099DD;
      transition: background 0.2s, transform 0.15s;
    }
    .btn-blue:hover { background: #0077AA; transform: translateY(-1px); }
    .btn-blue:active { transform: scale(0.97); }

    /* Morska zieleń / Teal przycisk */
    .btn-teal {
      background: #00A896;
      transition: background 0.2s, transform 0.15s;
    }
    .btn-teal:hover { background: #008274; transform: translateY(-1px); }
    .btn-teal:active { transform: scale(0.97); }

    /* Section title underline – Lubuskie błękit */
    .section-title::after {
      content: '';
      display: block;
      width: 56px;
      height: 4px;
      background: #0099DD;
      margin-top: 12px;
    }
    .section-title-center::after { margin-left: auto; margin-right: auto; }

    /* Accessibility controls */
    .a11y-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      padding: 0.35rem 0.65rem;
      border: 1.5px solid rgba(255,255,255,0.35);
      border-radius: 0.5rem;
      font-size: 0.75rem;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      background: transparent;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .a11y-btn:hover {
      border-color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.1);
      color: #fff;
    }
    .a11y-btn.active-contrast {
      background: #FFE600;
      border-color: #FFE600;
      color: #000;
    }
    .font-size-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.9rem;
      height: 1.9rem;
      border: 1.5px solid rgba(255,255,255,0.35);
      border-radius: 0.4rem;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      background: transparent;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      line-height: 1;
    }
    .font-size-btn:hover {
      border-color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.1);
      color: #fff;
    }
    .font-size-btn.active {
      /* #0C2340 na #fff = 12.6:1; biały na #0C2340 = 12.6:1 – spełnia WCAG 1.4.3 AA */
      background: #0C2340;
      border-color: #0C2340;
      color: #fff;
    }

    /* Mniejsze kontrolki dostępności na wąskich ekranach (mobile) –
       żeby logo, kontrolki i przycisk hamburgera mieściły się w jednej linii */
    @media (max-width: 639px) {
      .a11y-btn {
        padding: 0.3rem 0.4rem;
        gap: 0.25rem;
      }
      .font-size-btn {
        width: 1.55rem;
        height: 1.55rem;
        font-size: 0.75rem;
      }
    }

    /* ═══════════════════════════════════════════
       WCAG 2.1 AA – SKIP LINK
    ═══════════════════════════════════════════ */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 10000;
      /* #0C2340 na #fff = 12.6:1 – spełnia WCAG 1.4.3 AA */
      background: #0C2340;
      color: #fff;
      padding: 0.6rem 1.2rem;
      border-radius: 0 0 0.5rem 0.5rem;
      font-weight: 700;
      font-size: 0.9rem;
      text-decoration: none;
      transition: top 0.2s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .skip-link:focus {
      top: 0;
    }

    /* Accessible muted text: #3D5166 na #FFFFFF = 7.1:1 – spełnia WCAG 1.4.3 AA */
    .text-ltp-muted-a11y {
      color: #3D5166;
    }

    /* ═══════════════════════════════════════════
       WYSZUKIWARKA POŁĄCZEŃ – zakładki edycji i karty wyników
       (unikalne dla strony polaczenia.html)
    ═══════════════════════════════════════════ */
    .tab-btn-edit.active {
      background-color: #0099DD;
      color: #FFFFFF;
    }
    .tab-btn-edit {
      transition: all 0.2s;
    }
    .connection-card {
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .connection-card:hover {
      transform: translateY(-2px);
    }