/* Social Points Media - marketing site.
   Bootstrap 5 does the grid, spacing, buttons and forms. This file adds only
   what Bootstrap has no opinion about: the brand palette, the section rhythm,
   and a handful of components that repeat across the site. */

:root {
    --spm-blue:      #134280;
    --spm-blue-700:  #0d3163;
    --spm-blue-300:  #4f7ab5;
    --spm-blue-50:   #eef3fa;

    --spm-orange:    #ef7a23;
    --spm-orange-600:#d3670f;
    --spm-orange-50: #fef3e9;

    --spm-ink:       #1b2430;
    --spm-muted:     #5b6779;
    --spm-line:      #e4e9f0;
    --spm-cream:     #fbfaf8;

    --spm-radius:    14px;
    --spm-shadow:    0 10px 34px rgba(19, 66, 128, .09);
    --spm-shadow-lg: 0 22px 60px rgba(19, 66, 128, .16);

    /* Bootstrap's own variables, so its components inherit the brand. */
    --bs-primary: #134280;
    --bs-link-color: #134280;
    --bs-link-hover-color: #0d3163;
    --bs-body-color: var(--spm-ink);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-radius: var(--spm-radius);
}

body { background: #fff; color: var(--spm-ink); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .spm-display {
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--spm-blue);
}

p { color: var(--spm-muted); }
.lead { color: var(--spm-muted); font-size: 1.12rem; line-height: 1.7; }

/* ------------------------------------------------------------------ links */

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* --------------------------------------------------------------- buttons */

.btn { font-weight: 650; border-radius: 10px; padding: .72rem 1.4rem; }
.btn-lg { padding: .9rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: .45rem 1rem; }

.btn-brand { background: var(--spm-orange); border-color: var(--spm-orange); color: #fff; }
.btn-brand:hover, .btn-brand:focus {
    background: var(--spm-orange-600); border-color: var(--spm-orange-600); color: #fff;
}
.btn-navy { background: var(--spm-blue); border-color: var(--spm-blue); color: #fff; }
.btn-navy:hover, .btn-navy:focus { background: var(--spm-blue-700); border-color: var(--spm-blue-700); color: #fff; }

.btn-outline-navy { border: 2px solid var(--spm-blue); color: var(--spm-blue); background: transparent; }
.btn-outline-navy:hover { background: var(--spm-blue); color: #fff; }

.btn-ghost-light { border: 2px solid rgba(255,255,255,.42); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--spm-blue); border-color: #fff; }

/* -------------------------------------------------------------- sections */

.spm-section { padding: 5.5rem 0; }
.spm-section-sm { padding: 3.75rem 0; }
@media (max-width: 767.98px) {
    .spm-section { padding: 3.5rem 0; }
    .spm-section-sm { padding: 2.5rem 0; }
}

.spm-cream { background: var(--spm-cream); }
.spm-tint  { background: var(--spm-blue-50); }

/* A short label above a heading. Communicates section without another <h>. */
.spm-eyebrow {
    display: inline-block;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--spm-orange);
    margin-bottom: .7rem;
}

.spm-rule {
    width: 54px; height: 4px; border-radius: 2px;
    background: var(--spm-orange); margin: 1.1rem 0 0;
}
.spm-rule-center { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ hero */

.spm-hero {
    position: relative;
    background: linear-gradient(158deg, #0f2f5e 0%, var(--spm-blue) 46%, #1a5199 100%);
    color: #fff;
    overflow: hidden;
    padding: 6rem 0 6.5rem;
}
.spm-hero h1, .spm-hero h2 { color: #fff; }
.spm-hero p { color: rgba(255,255,255,.86); }

/* Soft shapes, purely decorative - hidden from assistive tech via aria-hidden
   on the element itself. */
.spm-blob {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(2px); opacity: .5;
}
.spm-blob-1 { width: 460px; height: 460px; right: -140px; top: -170px;
    background: radial-gradient(circle at 30% 30%, rgba(239,122,35,.55), transparent 62%); }
.spm-blob-2 { width: 380px; height: 380px; left: -130px; bottom: -170px;
    background: radial-gradient(circle at 60% 40%, rgba(79,122,181,.6), transparent 64%); }

.spm-hero-card {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.17);
    border-radius: var(--spm-radius);
    backdrop-filter: blur(6px);
    padding: 1.15rem 1.3rem;
}

/* ----------------------------------------------------------------- cards */

.spm-card {
    background: #fff;
    border: 1px solid var(--spm-line);
    border-radius: var(--spm-radius);
    padding: 1.75rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/*
 * Equal-height rows, without the side effect.
 *
 * Cards in a grid should match their row-mates, which needs height:100% against
 * a column the row has already stretched. But putting that on the component
 * itself breaks any column holding MORE than one card: each of them then tries
 * to be the full column height and the stack runs past the column - which is
 * what happened in the contact and article sidebars.
 *
 * Scoping it to a card that is its column's only child gives grids their equal
 * heights and leaves stacked cards at their natural size.
 */
[class*="col-"] > .spm-card:only-child { height: 100%; }
.spm-card:hover { transform: translateY(-4px); box-shadow: var(--spm-shadow); border-color: #d5dfec; }
.spm-card h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.spm-card p  { font-size: .95rem; margin-bottom: 0; }

/* A link card should lift as one piece, and keep its text colour. */
a.spm-card { display: block; color: inherit; }
a.spm-card h3 { color: var(--spm-blue); }
a.spm-card:hover h3 { color: var(--spm-orange-600); }

.spm-icon {
    width: 50px; height: 50px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--spm-blue-50); color: var(--spm-blue);
    font-size: 1.32rem; margin-bottom: 1.05rem;
}
.spm-icon-orange { background: var(--spm-orange-50); color: var(--spm-orange-600); }

/* --------------------------------------------------------------- numbers */

.spm-stat { text-align: center; }
.spm-stat-value {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: 2.3rem; line-height: 1;
    color: var(--spm-blue);
}
.spm-stat-label { font-size: .88rem; color: var(--spm-muted); margin-top: .35rem; }

/* -------------------------------------------------------------- steps */

.spm-step-num {
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--spm-orange); color: #fff; font-weight: 800;
}

/* ------------------------------------------------------------- pricing */

.spm-price-card {
    background: #fff; border: 2px solid var(--spm-line);
    border-radius: 18px; padding: 2rem 1.75rem; height: 100%;
    display: flex; flex-direction: column;
}
.spm-price-card.is-featured {
    border-color: var(--spm-orange);
    box-shadow: var(--spm-shadow-lg);
}
.spm-price-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--spm-orange); color: #fff;
    font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: .35rem 1rem; border-radius: 99px; white-space: nowrap;
}
.spm-price-amount {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; font-size: 2.75rem; line-height: 1; color: var(--spm-blue);
}
.spm-feature-list { list-style: none; padding: 0; margin: 1.35rem 0 0; }
.spm-feature-list li {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .42rem 0; font-size: .94rem; color: var(--spm-ink);
}
.spm-feature-list li i { color: #2a9d5c; margin-top: .18rem; flex: 0 0 auto; }
.spm-feature-list li.is-off { color: #9aa5b4; }
.spm-feature-list li.is-off i { color: #c7cedb; }

/* ------------------------------------------------------------------ CTA */

.spm-cta {
    background: linear-gradient(140deg, var(--spm-blue) 0%, #17509b 100%);
    color: #fff; border-radius: 20px; padding: 3rem 2.5rem;
    position: relative; overflow: hidden;
}
.spm-cta h2 { color: #fff; }
.spm-cta p  { color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------- navbar */

.spm-nav {
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--spm-line);
}
.spm-nav .nav-link {
    font-weight: 600; color: var(--spm-ink); font-size: .95rem;
    padding: .5rem .85rem; border-radius: 8px;
}
.spm-nav .nav-link:hover,
.spm-nav .nav-link.active { color: var(--spm-blue); background: var(--spm-blue-50); }
.spm-nav .dropdown-menu {
    border: 1px solid var(--spm-line); border-radius: var(--spm-radius);
    box-shadow: var(--spm-shadow); padding: .5rem;
}
.spm-nav .dropdown-item { border-radius: 8px; padding: .55rem .75rem; font-size: .93rem; }
.spm-nav .dropdown-item:hover { background: var(--spm-blue-50); color: var(--spm-blue); }
.spm-brand img { height: 40px; width: auto; }

/* --------------------------------------------------------------- footer */

.spm-footer { background: #0e2949; color: rgba(255,255,255,.72); }
.spm-footer h4 {
    color: #fff; font-size: .82rem; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1rem;
}
.spm-footer a { color: rgba(255,255,255,.72); font-size: .93rem; }
.spm-footer a:hover { color: var(--spm-orange); }
.spm-footer-base { border-top: 1px solid rgba(255,255,255,.12); }

/* ------------------------------------------------------------- articles */

.spm-prose { font-size: 1.05rem; line-height: 1.78; color: #2c3644; }
.spm-prose h2 { font-size: 1.6rem; margin: 2.4rem 0 .9rem; }
.spm-prose h3 { font-size: 1.24rem; margin: 1.9rem 0 .7rem; }
.spm-prose p  { color: #2c3644; margin-bottom: 1.15rem; }
.spm-prose ul, .spm-prose ol { color: #2c3644; margin-bottom: 1.15rem; padding-left: 1.3rem; }
.spm-prose li { margin-bottom: .5rem; }
.spm-prose blockquote {
    border-left: 4px solid var(--spm-orange);
    padding: .3rem 0 .3rem 1.2rem; margin: 1.6rem 0;
    color: var(--spm-blue); font-size: 1.1rem; font-weight: 500;
}

/* ---------------------------------------------------------------- misc */

.spm-chip {
    display: inline-block; background: var(--spm-blue-50); color: var(--spm-blue);
    border-radius: 99px; padding: .3rem .85rem; font-size: .8rem; font-weight: 650;
}
.spm-shot {
    border-radius: var(--spm-radius); border: 1px solid var(--spm-line);
    box-shadow: var(--spm-shadow); width: 100%; height: auto; display: block;
}

/* Fade content in as it scrolls into view.
 *
 * Both rules hang off .spm-js, which head.php sets on <html> from an inline
 * script. Nothing else can hide this content: if scripting is off or that
 * script never runs, the class is absent and every .spm-reveal element renders
 * normally. Hiding content by default and relying on JS to bring it back means
 * a single script failure blanks the page - and the reveal is decoration, so it
 * must never be load-bearing.
 *
 * Anyone asking for reduced motion opts out of the whole thing. */
@media (prefers-reduced-motion: no-preference) {
    .spm-js .spm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
    .spm-js .spm-reveal.is-in { opacity: 1; transform: none; }
}

.spm-skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--spm-blue); color: #fff; padding: .75rem 1.15rem; border-radius: 0 0 10px 0;
}
.spm-skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------------------
   Wide gutters on narrow screens

   A .row.g-5 sets --bs-gutter-x to 3rem, which gives the row -24px side
   margins - but its .container still pads by only 12px, so the row hangs 12px
   past the viewport and the page scrolls sideways. Below the sm breakpoint the
   container is fluid, so there is no spare width to absorb it.

   Columns are stacked full width at this size, so a 3rem horizontal gutter buys
   nothing visually. Drop the horizontal gutter back to the container's own and
   leave the vertical gutter alone - that is the spacing that matters here.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ---------------------------------------------------------------- details */

/* The audit results use <details> so they expand with no JavaScript at all.
   Only the default disclosure triangle needs removing - the chevron in the
   markup is the affordance, and it turns over when the panel opens. */
details.spm-card > summary::-webkit-details-marker { display: none; }
details.spm-card > summary::marker { content: ""; }
details.spm-card > summary .bi-chevron-down { transition: transform .2s ease; }
details.spm-card[open] > summary .bi-chevron-down { transform: rotate(180deg); }
details.spm-card:hover { transform: none; box-shadow: none; }
details.spm-card > summary:focus-visible {
    outline: 3px solid var(--spm-orange); outline-offset: 3px; border-radius: 8px;
}