/* ═══════════════════════════════════════════════
   MOBILE.CSS — El Pòrtic
   Aquest fitxer s'aplica automàticament només
   quan la pantalla és <= 768px gràcies a:
   <link media="(max-width: 768px)">
   No calen @media queries aquí dins.
═══════════════════════════════════════════════ */

/* ── HEADER ─────────────────────────────────── */

.nav-wrapper        { display: none !important; }
.nav-hamburger      { display: flex !important; flex-direction: column; gap: 5px; background: transparent; border: 1.5px solid #E8E5DF; cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; transition: all 0.3s ease; padding: 0; }
.nav-hamburger span { display: block !important; width: 20px; height: 2.5px; background: #1A1614; border-radius: 4px; transition: all 0.3s ease; }
.nav-hamburger:hover { border-color: #D32F2F; }

.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── MENÚ MÒBIL ─────────────────────────────── */

.mobile-nav       { display: none !important; flex-direction: column; background: #FAF8F3; border-top: 1px solid #E8E5DF; padding: 0.5rem 0 1rem; width: 100%; }
.mobile-nav.open  { display: flex !important; }

.mobile-nav a {
    display: block !important;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #1A1614;
    text-decoration: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #F2EDE2;
    transition: all 0.2s ease;
}

.mobile-nav a:last-child { border-bottom: none; }

.mobile-nav a:hover,
.mobile-nav a.active {
    background: rgba(211, 47, 47, 0.06);
    color: #D32F2F;
    border-left-color: #D32F2F;
    padding-left: 1.75rem;
}

/* ── FOOTER ─────────────────────────────────── */

.footer-grid         { grid-template-columns: 1fr 1fr !important; gap: 2rem 1.5rem !important; }
.footer-newsletter   { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
.footer-newsletter-btn { width: 100%; text-align: center; }

/* ── DARK MODE ──────────────────────────────── */

[data-theme="dark"] .mobile-nav       { background: #1C1410 !important; border-top-color: #3C3430; }
[data-theme="dark"] .mobile-nav a     { color: #FAF8F3; border-bottom-color: #2C2420; }
[data-theme="dark"] .nav-hamburger    { border-color: #3C3430; }
[data-theme="dark"] .nav-hamburger span { background: #FAF8F3; }

/* ── FOOTER ─────────────────────────────────── */

.site-footer {
    padding: 2rem 0 1.25rem;
}

.footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1.5rem !important;
}

/* Primera secció (El Pòrtic) ocupa tota l'amplada */
.footer-grid .footer-section:first-child {
    grid-column: 1 / -1;
}

.footer-section h3 {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.footer-links li {
    margin-bottom: 0.6rem;
}

.footer-bottom {
    text-align: left;
    padding-top: 1.25rem;
}

/* Newsletter CTA */
.footer-newsletter {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
}

.footer-newsletter-btn {
    width: 100%;
    text-align: center;
    display: block;
}

/* ── TITULARS ────────────────────────────────── */

h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.4rem !important; }

.hero-title    { font-size: 1.75rem !important; line-height: 1.2 !important; }
.article-title { font-size: 1.65rem !important; line-height: 1.2 !important; }
.card-title    { font-size: 1.1rem  !important; line-height: 1.3 !important; }