/* Keywords Everywhere site chrome (header + footer)
 *
 * Extracted 2026-07-06 from the Free Marketing Tools project
 * (keywordseverywhere.com/tools/, source: code/assets/css/tools.css)
 * for reuse on keywordseverywhere.com/seo-news/.
 *
 * Contains ONLY the shared page chrome:
 *   - design tokens (:root custom properties)
 *   - base reset + Poppins typography + page background
 *   - .container layout primitive
 *   - .site-header  (slim red brand bar: logo + wordmark, optional pill)
 *   - .page-hero    (light hero band with the page H1)
 *   - .site-footer  (sitewide mega footer: link columns + legal row)
 *   - .back-to-top  (floating button, wired by assets/js/back-to-top.js)
 *   - mobile breakpoints at 640px and 420px
 *
 * Visual identity matches keywordseverywhere.com:
 *   - Poppins type (weights 300/400/600/700 via Google Fonts)
 *   - Red/maroon brand bar (#a63534 family)
 *   - Light grey page background (#f7f8fa), white cards
 */

:root {
    /* Brand */
    --brand-red:       #a63534;
    --brand-red-dark:  #8e2c2b;
    --brand-red-light: #cb5f59;
    --brand-red-soft:  #fdecec;
    --brand-red-tint:  rgba(166, 53, 52, 0.10);

    /* Ink (text + border greys) */
    --ink:        #14181d;
    --ink-700:    #41494f;
    --ink-500:    #6b7280;
    --ink-400:    #9ca3af;
    --ink-300:    #d1d5db;
    --ink-200:    #e5e7eb;
    --ink-100:    #eef0f3;
    --ink-50:     #f4f6f9;
    --ink-25:     #fafbfd;

    /* Layered shadow stack */
    --shadow-xs: 0 1px 2px rgba(20, 24, 29, 0.04);
    --shadow-sm: 0 1px 2px rgba(20, 24, 29, 0.04), 0 2px 6px rgba(20, 24, 29, 0.04);
    --shadow-md: 0 1px 3px rgba(20, 24, 29, 0.05), 0 6px 16px rgba(20, 24, 29, 0.06);
    --shadow-lg: 0 1px 3px rgba(20, 24, 29, 0.06), 0 12px 32px rgba(20, 24, 29, 0.08);
    --shadow-xl: 0 1px 3px rgba(20, 24, 29, 0.08), 0 20px 50px rgba(20, 24, 29, 0.12);

    /* Type / numeric helpers */
    --tnum: "tnum" 1, "kern" 1;
    --mono: SFMono-Regular, ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;

    /* Accent (links inside page content) */
    --link:       #1858a8;
    --link-dark:  #0d3a76;

    /* Semantic palette (status badges etc.) */
    --good-bg:    #d1fae5;
    --good-fg:    #065f46;
    --mid-bg:     #fef3c7;
    --mid-fg:     #92400e;
    --bad-bg:     #fee2e2;
    --bad-fg:     #991b1b;

    /* Focus ring used by form inputs */
    --focus-ring: 0 0 0 4px rgba(166, 53, 52, 0.18);

    /* Radii */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-700);
    background-color: #f7f8fa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    color: #0056b3;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================================================
   Site header (slim red brand bar)

   Carries only the brand lockup (logo + wordmark) on the left and an
   optional action pill on the right. The page-level heading lives below
   in .page-hero on the light background, matching the pattern on
   keywordseverywhere.com.
   ======================================================================== */
.site-header {
    position: relative;
    background-color: #a63534;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, #b03a39 0%, #a63534 60%, #8e2c2b 100%);
    background-size: 256px 256px, auto;
    background-blend-mode: overlay, normal;
    color: #fff;
    padding: 12px 0;
    overflow: hidden;
}

/* NOTE: the source project's edge-to-edge container overrides
   (.site-header > .container and .page-hero > .container) were removed
   for /news/, which uses a centered content column; the header and hero
   align with it (see README.md in the chrome package). */

/* Hairline accent at the very bottom of the red bar. Reads as a
   deliberate seam between the branded top bar and the light hero
   section below. */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 18%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.18) 82%,
        transparent 100%);
    pointer-events: none;
}

.site-header .container {
    position: relative;
    z-index: 1;
}

/* Top row inside the red header: brand on the left, optional widget on
   the right. The red bar holds nothing else, so the bar's height is
   controlled by .site-header's padding plus this row's content height
   (~62px total on desktop). */
.site-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.site-header .brand img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 12px;
    /* Hairline white ring + warm shadow gives the logo a "minted coin"
       feel on the red field instead of looking pasted in. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 6px 18px rgba(60, 12, 12, 0.32);
}

.site-header .brand-name {
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-header .brand-suffix {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    letter-spacing: 0;
    text-transform: none;
}

/* Optional action pill for the right side of the red bar. This is the
   outline-button style the source project uses for its "Log in" link
   (.login-link there); renamed purpose-neutral here. Use it for a nav
   link or CTA, or delete it if the bar only carries the brand. */
.header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.header-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;   /* pin: beat the global a:hover link-blue rule */
}
.header-pill-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ========================================================================
   Page hero

   Sits directly under the red top bar on the light page background.
   Carries the page-level H1 (and an optional one-line description) so
   the band has the same height on every page.
   ======================================================================== */
.page-hero {
    background: transparent;
    padding: 20px 0 10px;
}
.page-hero h1 {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0;
    color: #962F2E;
}
.page-hero-description {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-700, #4a5260);
}

/* ========================================================================
   Footer
   Sitewide mega footer, ported 2026-07-08 from the live footer on
   keywordseverywhere.com (synced 2026-07-09 against the homepage): five
   uppercase-heading link columns, a supported-sites row and a legal row
   on the page-background tint (#f7f8fa, matching body). Sizes
   and colors are the live page's computed values (headings 12.8px/700,
   links 11.5px #007bff, hairline row dividers #edf4f8). Markup lives in
   includes/footer.php.
   ======================================================================== */
.site-footer {
    border-top: 1px solid #e5e7eb;
    padding: 48px 0;
    background: #f7f8fa;
    color: var(--ink-700, #41494f);
    font-size: 14.4px;
    font-weight: 300;
}

/* All footer links: the live theme's plain blue, no underline. */
.site-footer a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease-in;
}
.site-footer a:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Five link columns, matching the live grid (col-6 col-md-4 col-lg):
   five from 992px, three at 768-991px, two below 768px. */
.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.site-footer-heading {
    margin: 0 0 16px;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-700, #41494f);
}

.site-footer-nav {
    display: flex;
    flex-direction: column;
}
.site-footer-nav a {
    font-size: 11.5px;
    font-weight: 400;
    padding: 3px 0;
}

/* "Supported sites": a wrapped inline list, so horizontal gaps. */
.site-footer-works {
    flex-direction: row;
    flex-wrap: wrap;
}
.site-footer-works a {
    padding: 3px 18px 3px 0;
}

/* Hairline-divided rows below the columns (supported sites, legal). */
.site-footer-row {
    border-top: 1px solid #edf4f8;
    margin-top: 24px;
    padding-top: 24px;
}

/* Legal row: copyright left, legal links right; stacks centered on mobile. */
.site-footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
.site-footer-copy {
    margin: 0;
    font-size: 11.5px;
    font-weight: 400;
    color: #646f79;
}
.site-footer-legal-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.site-footer-legal-nav a,
.site-footer-cookie-link {
    font-size: 11.5px;
    font-weight: 400;
    padding: 3px 12px 3px 0;
}

/* The Cookie Preferences trigger is a <button> (it opens the consent
   modal via data-open-cookie-settings) dressed as a footer link. */
.site-footer-cookie-link {
    background: none;
    border: 0;
    margin: 0;
    font-family: inherit;
    line-height: inherit;
    color: #007bff;
    cursor: pointer;
    transition: color 0.3s ease-in;
}
.site-footer-cookie-link:hover {
    color: #0056b3;
}

@media (max-width: 991px) {
    .site-footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .site-footer-legal {
        flex-direction: column;
        text-align: center;
    }
    .site-footer-legal-nav {
        justify-content: center;
    }
}

/* ========================================================================
   Back-to-top button (wired by assets/js/back-to-top.js)

   Markup pattern any page can drop in once, just before </body>:
     <button type="button" class="back-to-top" id="back-to-top"
             aria-label="Back to top" hidden>
       <svg viewBox="0 0 24 24" width="20" height="20" ...>...</svg>
     </button>
   ======================================================================== */
.back-to-top {
    /* Fixed bottom-right, lifted clear of badges (e.g. reCAPTCHA) that
       live at ~14px from each edge. */
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 50;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.12s;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: var(--brand-red-dark, #a32626); }
.back-to-top:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 3px;
}
@media (max-width: 480px) {
    .back-to-top { bottom: 78px; right: 14px; width: 40px; height: 40px; }
}

/* ========================================================================
   Mobile breakpoints (project convention: 640px and 420px)
   ======================================================================== */
@media (max-width: 640px) {
    .site-header {
        padding: 8px 0;
    }
    .site-header-top {
        gap: 8px;
        row-gap: 8px;
    }
    /* Compact brand so the wordmark fits cleanly alongside any right-
       side widget. Without these overrides a long wordmark at 24px /
       1.5px tracking wraps to multiple lines and the right-side widget
       breaks to its own row, eating 90-130px of vertical space. */
    .site-header .brand img {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    .site-header .brand-name {
        font-size: 15px;
        letter-spacing: 0.5px;
        gap: 0;
    }
    /* The "by Keywords Everywhere" suffix is cosmetic on a screen this
       narrow; the logo + wordmark already brand the page. */
    .site-header .brand-suffix {
        display: none;
    }
    .header-pill {
        padding: 5px 12px;
        font-size: 12px;
    }
    .page-hero {
        padding: 14px 0 6px;
    }
    .page-hero h1 {
        font-size: 20px;
    }
    .page-hero-description {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    /* At iPhone-SE width (375px) and similar, step the wordmark down
       once more so it always wins the row. */
    .site-header .brand-name {
        font-size: 14px;
        letter-spacing: 0.3px;
    }
}