/* ══════════════════════════════════════════════════════════════════════
   Algarve Daily — shared site header (consistent across all pages).
   Self-contained: own fonts + scoped tokens on .site-mast so it never clashes
   with a page's own :root variables. Matches the Sunlit homepage masthead.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

.site-mast, .sm-drawer, .sm-scrim {
    --sm-card: #fffdf9; --sm-page: #f6f6f3; --sm-ink: #16191c; --sm-ink2: #3a4045;
    --sm-muted: #6b7177; --sm-muted2: #8b9197; --sm-line: #ebeeed; --sm-line2: #e3e6e5;
    --sm-terra: #f2604f; --sm-terra-deep: #d8442f;
    --sm-serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --sm-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.site-mast {
    background: var(--sm-card); border-bottom: 1px solid var(--sm-line);
    position: sticky; top: 0; z-index: 50; box-sizing: border-box;
}
.site-mast * { box-sizing: border-box; }
.sm-row {
    max-width: 1200px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 32px);
    display: flex; align-items: center; gap: 18px;
}
.sm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.sm-mark {
    width: 36px; height: 36px; border-radius: 10px; background: var(--sm-terra); color: #fff;
    display: grid; place-items: center; font: 700 21px/1 var(--sm-serif); flex: none;
    box-shadow: 0 2px 8px rgba(242, 96, 79, .35);
}
.sm-name { font: 600 20px/1 var(--sm-serif); letter-spacing: -.01em; color: var(--sm-ink); }
.sm-name small {
    display: block; font: 500 9px/1.2 var(--sm-mono); letter-spacing: .18em;
    text-transform: uppercase; color: var(--sm-muted2); margin-top: 3px;
}
.sm-nav { display: flex; gap: 3px; background: var(--sm-page); border-radius: 40px; padding: 5px; margin: 0 auto; }
.sm-nav a {
    font: 600 13.5px/1 var(--sm-serif); color: var(--sm-ink2); text-decoration: none;
    padding: 9px 15px; border-radius: 40px; white-space: nowrap; transition: background .15s, color .15s;
}
.sm-nav a:hover { color: var(--sm-ink); }
.sm-nav a.is-active { background: var(--sm-ink); color: #fff; }
.sm-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.sm-icon {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sm-line2);
    background: var(--sm-card); display: grid; place-items: center; cursor: pointer;
    color: var(--sm-ink2); text-decoration: none; transition: background .15s, border-color .15s;
}
.sm-icon:hover { background: var(--sm-page); border-color: var(--sm-muted2); }
.sm-icon svg { width: 19px; height: 19px; }
.sm-cta {
    font: 600 13.5px/1 var(--sm-serif); background: var(--sm-terra); color: #fff; text-decoration: none;
    padding: 11px 18px; border-radius: 40px; white-space: nowrap; transition: background .15s;
}
.sm-cta:hover { background: var(--sm-terra-deep); }
.sm-burger {
    display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sm-line2);
    background: var(--sm-card); place-items: center; cursor: pointer; color: var(--sm-ink2);
}
.sm-burger svg { width: 20px; height: 20px; }

/* Drawer */
.sm-scrim { position: fixed; inset: 0; background: rgba(22, 25, 28, .42); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 70; }
.sm-scrim.open { opacity: 1; pointer-events: auto; }
.sm-drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: min(320px, 84vw); z-index: 71;
    background: var(--sm-card); box-shadow: -8px 0 40px rgba(22, 25, 28, .18);
    transform: translateX(100%); transition: transform .24s cubic-bezier(.22, 1, .36, 1);
    display: flex; flex-direction: column; padding: 16px;
}
.sm-drawer.open { transform: translateX(0); }
.sm-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sm-drawer nav { display: flex; flex-direction: column; }
.sm-drawer nav a {
    font: 600 16px/1 var(--sm-serif); color: var(--sm-ink); text-decoration: none;
    padding: 13px 8px; border-bottom: 1px solid var(--sm-line);
}
.sm-drawer nav a:hover { color: var(--sm-terra); }
.sm-cta-full { display: block; text-align: center; margin-top: 16px; }

@media (max-width: 860px) {
    .sm-nav { display: none; }
    .sm-cta { display: none; }
    .sm-burger { display: grid; }
    .sm-name small { display: none; }
}

/* ── Notifications bell + dropdown (shared, ported from home-new.css Jul 2026) ── */
#notif-btn { position: relative; }
.notif-dot {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
    padding: 0 4px; border-radius: 9px; background: var(--sm-terra); color: #fff;
    font: 700 10px/18px var(--sm-mono); text-align: center; display: none;
    border: 2px solid var(--sm-card);
}
.notif-dot.on { display: block; }

.notif-panel {
    position: absolute; top: 62px; right: max(16px, calc((100vw - 1200px) / 2 + 16px));
    width: min(360px, calc(100vw - 32px));
    background: var(--sm-card); border: 1px solid var(--sm-line); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(22, 25, 28, .22); z-index: 60; overflow: hidden; display: none;
}
.notif-panel.open { display: block; }
.notif-panel > header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; border-bottom: 1px solid var(--sm-line);
    font: 600 12px/1 var(--sm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sm-muted);
}
.notif-panel > header button { background: none; border: 0; color: var(--sm-terra); font: 600 11px/1 var(--sm-mono); cursor: pointer; text-transform: uppercase; letter-spacing: .08em; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: block; padding: 13px 16px; border-bottom: 1px solid var(--sm-line); text-decoration: none; color: var(--sm-ink); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: #fff6f4; }
.notif-item .ni-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.notif-item .ni-tag { font: 700 9.5px/1 var(--sm-mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; background: var(--sm-page); color: var(--sm-muted); }
.notif-item .ni-tag.danger { background: #fdecea; color: #d8442f; }
.notif-item .ni-tag.warning { background: #fdf2e6; color: #b8791b; }
.notif-item .ni-time { font: 500 10px/1.4 var(--sm-mono); color: var(--sm-muted2); }
.notif-item .ni-title { font: 600 14px/1.3 var(--sm-serif); }
.notif-item .ni-body { font-size: 13px; color: var(--sm-muted); margin-top: 2px; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--sm-muted2); font-size: 14px; }