/* ===================================================================
   Shared navbar - 2026 treatment
   -------------------------------------------------------------------
   Loaded from header.aspx, so it covers the 34 public pages that
   include the root navibar.aspx. The portal and advertiser sections
   keep their own navibar copies and are untouched by this file.

   Loaded AFTER css/custom.css so it wins on equal specificity; the
   !important flags are only where the theme uses a heavier selector.

   The navbar is flat - no dropdowns. That is deliberate (see the note
   in navibar.aspx) and it is what makes the padding below safe to set:
   the theme draws each dropdown caret as an ABSOLUTELY POSITIONED
   pseudo-element pinned near the top of the anchor,

       .header .dropdown > a:after{ position:absolute; top:8px; }

   so while dropdowns existed, changing the link padding moved the text
   but left the chevrons stranded above it. With no .dropdown items in
   this navbar, that constraint is gone. If a dropdown is ever added
   back, this padding has to be revisited together with that caret.

   To revert everything: remove the <link> in header.aspx.
   Bump the ?v= on that link whenever this file changes, or Cloudflare
   will keep serving the previously cached copy.
   =================================================================== */

.header{
  background:#fff !important;
  background-image:none !important;      /* drops images/sitebg.gif */
  border-bottom:1px solid #e2e8f0 !important;
  box-shadow:none !important;
}

/* Even padding puts the links on the row's true centre. The theme ships
   an asymmetric top/bottom pair, which sat the labels below centre and
   left a band of dead white under the bar. */
.header .navbar-nav > li > a{
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  text-transform:none !important;
  font-size:15px;
  font-weight:600;
  color:#4e5c6d;
  letter-spacing:0;
  padding-top:32px !important;
  padding-bottom:32px !important;
}
.header .navbar-nav > li > a:hover,
.header .navbar-nav > li > a:focus,
.header .navbar-nav > li.active > a,
.header .navbar-nav > li.open > a{
  color:#0d1826 !important;
  background:transparent !important;
}

/* ---- one row, vertically centred -------------------------------------
   In the theme's markup the logo and the menu are two STACKED blocks:

       .header > .container                (logo, topbar, mobile toggle)
       .header > .navbar-collapse          (> .container > ul.navbar-nav)

   They only appeared side by side because of floats, which is why the
   logo never shared a centre line with the links and why the row kept a
   band of dead space. Laying the header out as a flex row puts them on
   one line and centres them against each other, instead of nudging
   margins until it looks close.

   Desktop only: below 992px the theme collapses the menu into a panel
   under the logo, which is the correct mobile behaviour. */
@media (min-width:992px){
  .header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    /* keeps the bar's content on the same 1120px measure as the page
       while the white background still spans the full width */
    padding-left:max(24px, calc((100% - 1120px) / 2));
    padding-right:max(24px, calc((100% - 1120px) / 2));
  }
  .header > .container,
  .header > .navbar-collapse,
  .header > .navbar-collapse > .container{
    width:auto; max-width:none; margin:0; padding:0;
  }
  .header .navbar-nav{
    float:none !important;
    display:flex;
    align-items:center;
    margin:0;
  }
  .header .navbar-nav > li{ float:none; }
}

/* The logo is a 242x36 GIF. Scaled down a little it sits better against
   15px labels; the margin is dropped because flex handles the centring. */
.header .logo img{ height:30px; width:auto; margin:0 !important; }

/* Registration is the primary action on every public page. */
.sc-nav-cta{
  display:inline-block;
  background:#e0342b;
  color:#fff;
  border-radius:8px;
  padding:9px 18px;
  font-size:14.5px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  transition:background .16s ease;
  /* An inline-block sits on the text BASELINE by default, which parks the
     pill lower than the plain links beside it. Middle puts its centre on
     the row's centre instead. */
  vertical-align:middle;
}
.header .navbar-nav > li > a:hover .sc-nav-cta,
.header .navbar-nav > li > a:focus .sc-nav-cta{ background:#b8241c; color:#fff; }

/* keyboard users need to see where they are */
.header .navbar-nav > li > a:focus-visible{ outline:3px solid #7aa7ff; outline-offset:2px; }

/* On small screens the theme un-fixes the header and the links stack
   into the collapsed panel, where a full-width button reads better than
   a floating pill. */
@media (max-width:991px){
  .header .navbar-nav > li > a{ padding-top:12px !important; padding-bottom:12px !important; }
  .header .logo img{ margin:14px 0 !important; }
  .sc-nav-cta{ display:block; text-align:center; }
}

/* ===================================================================
   Footer - 2026
   -------------------------------------------------------------------
   Shared by every public page, so this one block lifts all of them.

   What changed from footer-v1 and why:
     * Labels were forced to ALL CAPS by the theme, with a chevron AND a
       full-width rule on all ten rows. That read as furniture rather
       than navigation. Sentence case, no chevrons, no per-row rules.
     * Terms and Privacy appeared twice - once in the Legal column and
       again in the bottom bar. The duplicates are gone.
     * support@star-clicks.com was missing entirely, despite being the
       address the rest of the app tells people to write to. It is now
       the first thing in the Contact column.
     * "Site Links" mixed destinations with account actions. Split into
       Product and Legal.
   =================================================================== */
.sc-ft{
  background:#0d1826; color:#93a5b8; padding:56px 0 0;
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6;
}
.sc-ft *{ box-sizing:border-box; font-family:inherit; }
.sc-ft__wrap{ max-width:1120px; margin:0 auto; padding:0 22px; }
.sc-ft__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:36px; }
@media (max-width:860px){ .sc-ft__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .sc-ft__grid{ grid-template-columns:1fr; } }

.sc-ft h4{
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; margin:0 0 15px;
}
.sc-ft a{ color:#93a5b8; font-size:14.5px; display:block; padding:6px 0; text-decoration:none; }
.sc-ft a:hover{ color:#fff; }

.sc-ft__logo{ height:30px; width:auto; }
.sc-ft__about{ margin:14px 0 0; font-size:14.5px; color:#93a5b8; max-width:38ch; line-height:1.65; }
.sc-ft__seal{ display:inline-block; padding:0; margin-top:18px; }
.sc-ft__seal img{ height:56px; width:auto; opacity:.92; }

.sc-ft__contact{ margin:0; font-size:14.5px; color:#93a5b8; line-height:1.9; }
.sc-ft__contact a{ display:inline; padding:0; color:#c9d6e4; text-decoration:underline; }
.sc-ft__contact a:hover{ color:#fff; }

.sc-ft__bar{
  margin-top:44px; border-top:1px solid rgba(255,255,255,.1); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-size:13px; color:#7b8da0;
}
.sc-ft__bar span{ font-variant-numeric:tabular-nums; }