/* =================================================================
   THE ONE PUBLIC HEADER  (Humera, 25 Oct 2026)
   "everything should be coming from one place ... where are you aligning,
    what is the text and everything ... all the links aligned to the right."

   Every public page (home, features, how it works, pricing, about, compare,
   sources, privacy, terms, contact, free score, log in, sign up ...) draws
   its header from templates/_public_header.html and styles it from THIS file.
   Nothing else may style the header. Change a setting here and it changes
   on every page.
================================================================= */
:root {
    --ph-height: 60px;                      /* bar height; also the space left above the page */
    --ph-pad-x: 5%;                         /* space left and right of the bar */
    --ph-menu-align: space-between;         /* logo on the left, menu and button pushed to the RIGHT */
    --ph-gap: 8px;                          /* space between menu links */
    --ph-font: 'DM Sans', sans-serif;
    --ph-font-size: 13px;                   /* menu text size */
    --ph-logo-font: 'DM Serif Display', serif;
    --ph-logo-size: 18px;
    --ph-bg: #1a1a2e;                       /* bar colour */
    --ph-link: #cbd5e1;
    --ph-link-hover: #ffffff;
    --ph-accent: #f0a500;                   /* logo word, button, underline */
    --ph-accent-dark: #d4920a;
}

.site-header, .site-header * { box-sizing: border-box; }
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--ph-height);
    padding: 0 var(--ph-pad-x);
    background: var(--ph-bg);
    display: flex; align-items: center; justify-content: var(--ph-menu-align);
    font-family: var(--ph-font); line-height: 1.6; text-align: left;
}
.site-header-spacer { height: var(--ph-height); }

.site-header .nav-logo { font-family: var(--ph-logo-font); font-size: var(--ph-logo-size); font-weight: 400; color: #fff; text-decoration: none; letter-spacing: 0; }
.site-header .nav-logo span { color: var(--ph-accent); }
.site-header .nav-links { display: flex; gap: var(--ph-gap); align-items: center; }
.site-header .nav-link { position: relative; color: var(--ph-link); text-decoration: none; font-size: var(--ph-font-size); padding: 6px 12px; transition: color 0.2s; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--ph-link-hover); }
.site-header .nav-link::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 1px; background: var(--ph-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.site-header .nav-link:hover::after, .site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-cta { background: var(--ph-accent); color: var(--ph-bg); font-size: var(--ph-font-size); font-weight: 600; padding: 8px 18px; text-decoration: none; transition: background 0.2s; }
.site-header .nav-cta:hover { background: var(--ph-accent-dark); }

.site-header .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.site-header .hamburger span { width: 22px; height: 2px; background: #fff; display: block; transition: all 0.3s; }
.mobile-menu { display: none; position: fixed; top: var(--ph-height); left: 0; right: 0; background: var(--ph-bg); padding: 16px var(--ph-pad-x); flex-direction: column; gap: 4px; z-index: 99; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--ph-font); }
.mobile-menu a { color: var(--ph-link); text-decoration: none; font-size: 15px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-menu a:last-child { border-bottom: none; color: var(--ph-accent); font-weight: 600; }
.mobile-menu.open { display: flex; }

/* Phones and small tablets: the menu folds into the button. */
@media (max-width: 900px) {
    .site-header .nav-links .nav-link { display: none; }
    .site-header .hamburger { display: flex; }
}
@media (max-width: 540px) {
    :root { --ph-pad-x: 20px; --ph-logo-size: 17px; }
}