/*
Theme Name:  DPS Front Page
Theme URI:   https://divinesolutionsinc.net/
Description: Child theme for Driver Portal System. Adds a contact bar carrying the business name, address and phone, centres the home hero, swaps in the rebuilt vector logo, and removes the duplicate Platform button from the header. Deactivating it restores the parent theme exactly.
Author:      Divine Solutions Inc
Template:    driver-portal-system-theme_v3.0.1_1
Version:    1.0.3
Text Domain: dps-front
*/

/* ============================================================
   0. THE HORIZONTAL SCROLL BUG   <-- read this one
   A stylesheet on the site contains:

       @media (min-width: 0px) { .container { width: 750px; } }

   min-width:0px matches every screen ever made, so .container is
   pinned to 750px at all times. On any phone the whole site is
   750px wide inside a ~390px window, which means every page
   scrolls sideways and the right-hand side is cut off.

   Restoring width:100% lets the existing max-width rules cap it
   at 1140/1160 on desktop, which is what they were written to do.
   Verified on the live page: document scrollWidth went from 750
   to 375 at a 375px viewport, with nothing left overflowing.

   This is the single highest-impact line in this file.
   ============================================================ */
.container {
  width: 100% !important;
}

/* ============================================================
   1. THE DUPLICATE PLATFORM BUTTON
   The header renders /platform/ twice: once in the nav menu and
   again as a ghost button. Hiding the button leaves one route
   there and one clear call to action.
   ============================================================ */
.site-header .header-cta .btn--ghost,
.site-header .header-cta a[href*="/platform/"].btn--ghost {
  display: none !important;
}

/* ============================================================
   2. THE LOGO
   The parent hard-codes dps-logo-on-black.jpg in three places.
   `content:` swaps the rendered image without touching markup;
   matching on the src means all three update at once.
   ============================================================ */
img[src*="dps-logo-on-black"] {
  content: url("img/dps-icon-dark.svg");
  width: auto;
  height: 42px;
  background: none !important;
}
.site-header .site-branding img[src*="dps-logo-on-black"] { height: 42px; }

/* the badge's hard black tile would still show behind a transparent logo */
.hero-logo-badge { background: none !important; }

/* ============================================================
   3. CONTACT BAR  (injected by functions.php)
   Carries name, address and phone on every page -- the NAP triple
   that Google Business Profile and carrier vetting look for.
   ============================================================ */
.dps-util {
  background: #0e1116;
  border-bottom: 1px solid #23272f;
  font-size: 12.5px;
  font-family: Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
}
.dps-util__in {
  max-width: 1160px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 26px; min-height: 38px;
}
.dps-util__item {
  display: inline-flex; align-items: center; gap: 7px;
  color: #8d94a2; text-decoration: none;
}
.dps-util__item svg { width: 14px; height: 14px; flex: 0 0 14px; color: #E8B923; }
a.dps-util__item:hover { color: #F5F1E6; }
.dps-util__signin { margin-left: auto; color: #E8B923; font-weight: 700; text-decoration: none; }
.dps-util__signin:hover { text-decoration: underline; }

/* ============================================================
   4. THE HERO  -- two columns become one centred column
   Avada writes an inline --fontSize onto the h1, so the type
   rules need !important to win.
   ============================================================ */
.home-hero { position: relative; overflow: hidden; }

.home-hero > .container {
  display: block !important;
  max-width: 1000px !important;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* The road from the logo, as texture behind the headline.
   Opacity was .06 in 1.0.0, which measured fine against a flat swatch
   but was invisible on the live page. .13 reads as a road without
   competing with the headline; the mask fades it out before it
   reaches the paragraph. Checked on the live site at both widths. */
.home-hero::before {
  content: "";
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 1000px; max-width: 150%; height: 460px;
  background: url("img/road.svg") no-repeat center top / contain;
  opacity: .13;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent 88%);
  mask-image: linear-gradient(#000 45%, transparent 88%);
  pointer-events: none; z-index: 0;
}

.home-hero .hero-logo-badge { display: none !important; }

.home-hero .eyebrow { display: block; margin-bottom: 14px; }

.home-hero h1 {
  font-size: clamp(30px, 4.4vw, 54px) !important;
  line-height: 1.1 !important;
  max-width: 17ch;
  margin: 0 auto 20px !important;
}

.home-hero .lead { max-width: 64ch; margin: 0 auto 30px !important; }

.home-hero .hero-ctas,
.home-hero .hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.home-hero .hero-ctas { gap: 12px; }
.home-hero .hero-badges { gap: 28px; margin-top: 26px; }

/* The product card moves below the copy, full width and lifted.
   Selector matches the parent's own `.home-hero .container > .mock`
   specificity, otherwise its 420px cap wins and the card stays tiny. */
.home-hero .container > .mock {
  max-width: 920px !important;
  margin: 52px auto 0 !important;
  text-align: left;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .55);
}

/* The perspective tilt -- the product-shot look. Desktop only: on a narrow
   screen the card is nearly the full width and rotating it just clips the
   top edge. Missing from 1.0.0 and 1.0.1 by oversight. */
@media (min-width: 901px) {
  .home-hero > .container { perspective: 1500px; }
  .home-hero .container > .mock {
    transform: rotateX(7deg);
    transform-origin: 50% 0;
  }
}

/* ============================================================
   5. PHONES
   The address stays visible and wraps to its own row. Hiding it
   would defeat the point of the bar -- display:none text is
   discounted by search engines and by anyone verifying the
   business.
   ============================================================ */
@media (max-width: 900px) {
  .dps-util__in {
    flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px;
    padding-top: 7px; padding-bottom: 7px;
  }
  .dps-util__addr { order: 3; flex: 1 0 100%; }
  .dps-util__signin { order: 2; }
  .home-hero .container > .mock { margin-top: 36px !important; max-width: 100% !important; }
  .home-hero .hero-badges { gap: 12px; flex-direction: column; }
  .home-hero::before { height: 340px; }

  /* the card's inner grid stays two columns on phones in the parent
     theme, which squeezes the dial and the roster into ~100px each */
  .home-hero .mock-body { grid-template-columns: 1fr !important; }

  /* once stacked, the dial is a fixed-size block with no auto margins, so it
     sits hard against the left edge while its caption centres underneath */
  .home-hero .mock-body > div:first-child {
    display: flex; flex-direction: column; align-items: center;
  }
  .home-hero .mock-ring { margin-left: auto !important; margin-right: auto !important; }
}

/* ============================================================
   9. HEADER NAVIGATION  (added 27 Aug 2026)

   Two faults fixed together:

   A. The parent theme has no .sub-menu rules at all. Giving a menu
      item children therefore rendered them inline in the bar rather
      than in a dropdown. Rules below supply the missing dropdown.

   C. .site-branding carries flex:1 1 auto in the parent, so the logo
      absorbed every spare pixel and justify-content:space-between had
      nothing left to distribute -- the nav could never centre. Swapping
      the row for a 1fr/auto/1fr grid centres the middle column against
      the page, not against whatever the logo left over.

   Deliberately CSS-only. On phones the children simply show as an
   indented list inside the existing drawer, so nav.js is untouched and
   the menu toggle cannot regress.
   ============================================================ */

@media (min-width: 901px) {

  /* --- C. three-column header ------------------------------------ */
  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }
  /* .container carries a Bootstrap-style clearfix: ::before and ::after with
     content:" "; display:table. Harmless in a flex row -- but pseudo-elements
     become real GRID ITEMS. ::before claimed column 1, which pushed the logo
     into column 2 (so it looked centred), the nav into column 3, and dropped
     the CTA onto a second row inside a 68px-tall bar. Kill them, and pin the
     three real children explicitly so auto-placement cannot drift again. */
  .site-header .container::before,
  .site-header .container::after { content: none; display: none; }

  .site-branding { flex: 0 0 auto; grid-column: 1; grid-row: 1; justify-self: start; overflow: visible; }
  .primary-nav   { grid-column: 2; grid-row: 1; justify-self: center; }
  .header-cta    { grid-column: 3; grid-row: 1; justify-self: end; }

  .primary-nav > ul { flex-wrap: nowrap; }
  .primary-nav a    { white-space: nowrap; }

  /* --- A. dropdown ----------------------------------------------- */
  .primary-nav li { position: relative; }

  .primary-nav .menu-item-has-children > a::after {
    content: ' \25BE'; font-size: .68em; opacity: .75;
  }

  .primary-nav .sub-menu {
    position: absolute; top: 100%; left: -14px; z-index: 60;
    display: block;            /* beats the parent's ul{display:flex} */
    min-width: 200px; margin: 0; padding: 7px; gap: 0;
    list-style: none;
    background: var(--dps-panel);
    border: 1px solid var(--dps-border);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }

  /* the 14px gap between bar and panel would drop the hover, so bridge it */
  .primary-nav .sub-menu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  }

  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none;
  }

  .primary-nav .sub-menu li { width: auto; border: 0; }
  .primary-nav .sub-menu a {
    display: block; padding: 9px 11px; border-radius: 5px;
    font-size: .86rem; color: var(--dps-text-muted);
  }
  .primary-nav .sub-menu a:hover,
  .primary-nav .sub-menu a:focus {
    background: var(--dps-panel-raised); color: var(--dps-gold);
  }
}

/* --- phones: no hover exists, so just indent the children --------- */
@media (max-width: 900px) {
  .primary-nav .sub-menu {
    display: block; margin: 0; padding: 0 0 0 16px; list-style: none;
  }
  .primary-nav .sub-menu a {
    font-size: .9rem; color: var(--dps-text-dim); padding: 11px 4px;
  }
  .primary-nav .menu-item-has-children > a::after { content: ''; }
}


/* ============================================================
   10. THE 404 PAGE  (added 27 Aug 2026)

   Avada Builder and Avada Core are still active from the previous
   marketing site. On a 404 they inject a leftover Fusion block reading
   "Let's Supercharge Your Online Growth" -- via a hook, not the template,
   so index.php cannot remove it and both blocks render together.

   Hidden rather than fixed at the source because the real fix is
   deactivating the two Avada plugins, and other pages may still contain
   Fusion shortcodes that would break if they went away. Scoped to .error404
   so Fusion output anywhere else is untouched.
   ============================================================ */
body.error404 .fusion-fullwidth,
body.error404 .fusion-builder-row,
body.error404 .fusion-title { display: none !important; }