@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;
    }

    * { 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);
      line-height: 1.5;
    }
    body.no-scroll { overflow: hidden; }

    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; padding:4px 6px; border-radius:6px; transition:opacity 0.2s; }
    .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 0.2s; }
    .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 0.2s; }
    .nav-link:hover::after, .nav-link:focus-visible::after { transform:scaleX(1); }
    
    /* Active State for Blog */
    .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:0.2s; }
    .nav-burger { width:19px; height:2px; background:var(--brand-primary); position:relative; transition:0.2s; }
    .nav-burger::before, .nav-burger::after { content:""; position:absolute; left:0; width:19px; height:2px; background:var(--brand-primary); transition:0.2s; }
    .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); }

    .nav-links-mobile { max-height:0; overflow:hidden; opacity:0; background:rgba(199,207,209,0.98); border-bottom:1px solid var(--brand-highlight); transition:0.5s ease-in-out; display:flex; flex-direction:column; }
    .nav-links-mobile.is-open { max-height:100vh; opacity:1; 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; }
    .nav-link-mobile.active-page { color: var(--brand-accent); }

    /* --- BLOG POST STYLES --- */
    .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; } }

    /* Typography */
    .article-content { font-family: 'Lora', serif; font-size: 1.125rem; color: rgba(30,30,30,0.95); line-height: 1.8; }
    .article-content p { margin-bottom: 24px; }
    .article-content h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.6rem; margin: 48px 0 16px; line-height: 1.3; }
    .article-content h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.3rem; margin: 32px 0 12px; }
    .article-content strong { font-weight: 700; color: var(--brand-primary); }
    .article-content ul { list-style: disc; padding-left: 20px; margin-bottom: 24px; }
    .article-content li { margin-bottom: 8px; }

    /* Highlights / Blockquotes */
    .highlight-box { background: rgba(76, 92, 104, 0.08); border-left: 4px solid var(--brand-accent); padding: 20px; margin: 32px 0; border-radius: 0 12px 12px 0; }
    .highlight-box strong { display: block; margin-bottom: 4px; font-family: 'Poppins', sans-serif; }

    /* 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; }

    /* Share Section */
    .article-footer { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--brand-highlight); display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; }
    .share-label { font-size:0.9rem; font-weight:600; }

    /* 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; }

    .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: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 */
    .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; }
    .form-input, .form-textarea { width:100%; border-radius:10px; border:1px solid var(--brand-highlight); padding:10px; font-size: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); }

    .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); } }

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