@import url('/assets/css/article-detail-polish.css');

/* --- CORE VARIABLES --- */
    :root {
      --brand-bg: #BDC6C7;
      --brand-surface: #C7CFD1;
      --brand-primary: #1E1E1E;
      --brand-accent: #4C5C68;
      --brand-muted: #7C8A92;
      --brand-highlight: #D3DBDD;

      --radius-lg: 1rem;
      --radius-xl: 1.25rem;
      --shadow-soft: 0 8px 20px rgba(0,0,0,0.06);
      --transition-fast: 0.2s ease;
      --transition-medium: 0.4s ease;
    }

    * { box-sizing:border-box; margin:0; padding:0; }
    html, body { height:100%; }
    html { scroll-behavior:smooth; }

    body {
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      background:var(--brand-bg);
      color:var(--brand-primary);
      -webkit-font-smoothing:antialiased;
      line-height: 1.5;
    }
    
    /* FIX: Better scroll locking for mobile */
    body.no-scroll { 
      overflow: hidden; 
      height: 100vh;
    }

    img { max-width:100%; display:block; }
    a { color:inherit; text-decoration:none; }
    button { font-family:inherit; cursor:pointer; border:none; background:none; }

    .container { max-width:1120px; margin:0 auto; padding:0 16px; }
    .page-shell { min-height:100vh; display:flex; flex-direction:column; }
    main { flex:1; }

    /* --- HEADER / NAV --- */
    .site-header {
      position:sticky; top:0; z-index:40;
      background:rgba(199,207,209,0.96);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid var(--brand-highlight);
    }
    .nav-inner { height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
    
    .nav-brand {
      font-family:'Poppins',sans-serif; font-weight:700; font-size:1.1rem;
      letter-spacing:0.02em; padding:4px 6px; border-radius:6px; transition:opacity var(--transition-fast);
    }
    .nav-brand:hover { opacity:0.85; }

    .nav-links-desktop { display:none; align-items:center; gap:24px; font-size:0.9rem; flex:1; justify-content:center; }
    .nav-link { position:relative; padding:6px 4px; font-family:'Poppins',sans-serif; font-weight:600; transition:color var(--transition-fast); }
    .nav-link::after {
      content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
      border-radius:999px; background:var(--brand-primary); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-fast);
    }
    .nav-link:hover::after, .nav-link:focus-visible::after { transform:scaleX(1); }
    
    .nav-link.active-page { color: var(--brand-accent); }
    .nav-link.active-page::after { transform:scaleX(1); background:var(--brand-accent); }

    .nav-right { display:flex; align-items:center; gap:8px; }
    .lang-select { background:rgba(199,207,209,0.95); border:1px solid var(--brand-highlight); border-radius:999px; padding:4px 10px; font-size:0.82rem; outline:none; min-width:60px; font-weight:500; cursor: pointer; }

    .nav-mobile-toggle { display:inline-flex; width:40px; height:40px; border-radius:14px; border:1px solid var(--brand-highlight); background:var(--brand-surface); align-items:center; justify-content:center; transition:transform var(--transition-fast), background var(--transition-fast); }
    .nav-burger { width:19px; height:2px; background:var(--brand-primary); position:relative; transition:background var(--transition-fast); }
    .nav-burger::before, .nav-burger::after { content:""; position:absolute; left:0; width:19px; height:2px; background:var(--brand-primary); transition:transform var(--transition-fast); }
    .nav-burger::before { top:-6px; } .nav-burger::after { top:6px; }
    .nav-mobile-toggle.is-open .nav-burger { background:transparent; }
    .nav-mobile-toggle.is-open .nav-burger::before { transform:translateY(6px) rotate(45deg); }
    .nav-mobile-toggle.is-open .nav-burger::after { transform:translateY(-6px) rotate(-45deg); }

    /* FIX: Added visibility hidden for accessibility */
    .nav-links-mobile { 
      max-height:0; overflow:hidden; opacity:0; visibility:hidden;
      background:rgba(199,207,209,0.98); border-bottom:1px solid var(--brand-highlight); 
      transition: all 0.5s ease-in-out; 
      display:flex; flex-direction:column; 
    }
    .nav-links-mobile.is-open { max-height:100vh; opacity:1; visibility:visible; overflow-y:auto; }
    .nav-links-mobile-inner { padding:12px 0 20px; display:flex; flex-direction:column; }
    .nav-link-mobile { text-align:left; padding:10px 0; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem; border-bottom:1px solid rgba(0,0,0,0.03); }
    .nav-link-mobile:last-child { border-bottom:none; }

    /* --- ARTICLE PAGE SPECIFIC --- */
    .article-layout {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 0 80px;
    }

    .back-link {
      display:inline-flex; align-items:center; gap:6px;
      font-size:0.85rem; font-weight:600; color:var(--brand-muted);
      margin-bottom:24px; transition: color 0.2s;
    }
    .back-link:hover { color:var(--brand-primary); }

    .article-header { margin-bottom: 32px; animation: heroIntro 0.7s ease-out both; }
    .article-meta { 
      font-size: 0.9rem; 
      color: var(--brand-accent); 
      font-weight: 500; 
      margin-bottom: 12px; 
      display: flex; 
      align-items: center; 
      gap: 8px;
    }
    .meta-separator { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-muted); }
    
    .article-title {
      font-family: 'Poppins', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    @media (min-width: 768px) { .article-title { font-size: 2.5rem; } }

    /* Article Content Typography */
    .article-content {
      font-family: 'Lora', serif; /* Serif for reading */
      font-size: 1.125rem;
      color: rgba(30,30,30,0.95);
      line-height: 1.8;
    }
    .article-content p { margin-bottom: 24px; }
    .article-content strong { font-weight: 700; color: var(--brand-primary); }

    /* Images */
    .article-figure { margin: 40px 0; border-radius: var(--radius-xl); overflow: hidden; background: #ccc; }
    .article-image { width: 100%; height: auto; display: block; }
    .article-caption {
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
      color: var(--brand-muted);
      margin-top: 8px;
      text-align: center;
      font-style: italic;
    }

    /* Gallery Grid */
    .article-gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin: 40px 0;
    }
    @media (min-width: 640px) { .article-gallery { grid-template-columns: 1fr 1fr; } }
    .gallery-item { border-radius: var(--radius-xl); overflow: hidden; background: #ccc; }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

    /* Footer & Utils */
    .site-footer { border-top:1px solid var(--brand-highlight); background:rgba(199,207,209,0.98); padding:24px 0; font-size:0.85rem; color:rgba(30,30,30,0.8); margin-top:40px; }
    .footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
    .footer-left { font-family:'Poppins',sans-serif; font-weight:500; }

    /* Floating Buttons */
    .whatsapp-help-btn { position:fixed; right:18px; bottom:18px; z-index:50; background:#25D366; color:#ffffff; border-radius:999px; padding:10px 18px; display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.88rem; box-shadow:0 12px 25px rgba(0,0,0,0.18); border:none; transition:transform 0.2s, background 0.2s; cursor:pointer; }
    .whatsapp-help-btn:hover { transform:translateY(-2px); background:#1ebe5b; }
    .whatsapp-help-btn span:first-child{ width:22px; height:22px; border-radius:999px; background:rgba(0,0,0,0.08); display:inline-flex; align-items:center; justify-content:center; font-size:0.9rem; }
    
    .back-to-top { position:fixed; right:18px; bottom:80px; padding:8px 14px; border-radius:999px; border:1px solid var(--brand-highlight); background:var(--brand-surface); font-size:0.8rem; color:var(--brand-primary); opacity:0; pointer-events:none; transition:0.3s; z-index:40; }
    .back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }

    /* Modal Styles */
    .modal { position:fixed; inset:0; display:none; z-index:60; overflow-y:auto; padding:16px; }
    .modal--open { display:flex; }
    .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(2px); z-index:0; }
    .modal-dialog { position:relative; z-index:1; width:100%; max-width:440px; background:var(--brand-surface); border-radius:var(--radius-xl); border:1px solid var(--brand-highlight); padding:24px; margin:auto; animation:modalIn 0.25s ease-out forwards; }
    .modal-header { display:flex; justify-content:space-between; margin-bottom:16px; }
    .modal-title { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.1rem; }
    .modal-close { width:32px; height:32px; border-radius:999px; border:1px solid var(--brand-highlight); display:flex; align-items:center; justify-content:center; cursor:pointer; }
    
    .form-group { margin-bottom:14px; } .form-label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:6px; }
    
    /* FIX: Set 16px font size on inputs to prevent iOS Zoom */
    .form-input, .form-textarea { 
      width:100%; border-radius:10px; border:1px solid var(--brand-highlight); 
      padding:10px; font-size:1rem; /* Changed from 0.9rem */
      background:#dde4e6; outline:none; 
    }
    .form-input:focus, .form-textarea:focus { border-color:var(--brand-accent); background:var(--brand-surface); }
    .form-error { color:#b91c1c; font-size:0.8rem; display:none; margin-top:4px; }
    .form-error.is-visible { display:block; }
    .modal-footer { margin-top:20px; display:flex; justify-content:flex-end; gap:8px; }
    .btn { padding:10px 20px; border-radius:10px; font-weight:600; cursor:pointer; }
    .btn-primary { background:var(--brand-primary); color:#fff; } .btn-secondary { background:var(--brand-surface); border:1px solid var(--brand-highlight); }

    /* Animations */
    .js-reveal { opacity:0; transform:translateY(16px); transition:0.6s ease-out; }
    .js-reveal.is-visible { opacity:1; transform:translateY(0); }
    @keyframes heroIntro { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
    @keyframes modalIn { from { opacity:0; transform:translateY(16px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }

    /* Responsive */
    @media (min-width:768px){ .nav-links-desktop { display:flex; } .nav-mobile-toggle { display:none; } .back-to-top { bottom:88px; } }