/* ================================================================
   BUBS DISPOSAL — Header
   3-row layout: trust ribbon / brand bar (schedule | logo | call) / nav
   Brand tokens come from style.css. No grid hacks, no !important
   except where overriding GeneratePress defaults.
   ================================================================ */

/* ----- ROW 1: Trust ribbon -----------------------------------------
   Google reviews chip on the left, 4 USPs distributed equal-spaced,
   Driver Login on the right. Background off-white for soft contrast
   against the navy brand bar below.
*/
.bubs-trust-bar {
  background: var(--bubs-off-white);
  border-bottom: 1px solid var(--bubs-hairline-dark);
}
.bubs-trust-bar-inner {
  max-width: var(--bubs-max-width);
  margin: 0 auto;
  padding: 9px var(--bubs-content-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bubs-trust-item {
  font-family: var(--bubs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bubs-ink);
  white-space: nowrap;
}
.bubs-trust-google {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: var(--bubs-radius-pill);
  background: var(--bubs-white);
  font-family: var(--bubs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bubs-ink);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--bubs-transition-base), box-shadow var(--bubs-transition-base);
}
.bubs-trust-google:hover,
.bubs-trust-google:focus-visible {
  border-color: var(--bubs-orange);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--bubs-ink);
}
.bubs-trust-google .g-label { font-weight: 800; }
.bubs-trust-google .g-stars {
  color: #f5a623;
  font-size: 13px;
  line-height: 1;
}
.bubs-trust-google .g-rating { font-weight: 800; }
.bubs-trust-google .g-count {
  font-weight: 600;
  opacity: 0.75;
}
.bubs-trust-login {
  font-family: var(--bubs-font-body);
  color: var(--bubs-ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color var(--bubs-transition-fast);
}
.bubs-trust-login:hover,
.bubs-trust-login:focus-visible { color: var(--bubs-orange); }
.bubs-trust-login .arrow {
  display: inline-block;
  transition: transform var(--bubs-transition-fast);
}
.bubs-trust-login:hover .arrow,
.bubs-trust-login:focus-visible .arrow { transform: translateX(3px); }

/* ----- ROW 2: Brand bar -------------------------------------------
   Three-zone grid: Schedule Service (left) | Logo (center) | Phone (right).
   GeneratePress emits `.site-branding-container` as the flex parent
   for branding; we override to a 3-column grid so the injected CTAs
   on either side of the logo land in their own cells.
*/
.site-header {
  background: var(--bubs-navy);
  padding: 0;
  border-bottom: 1px solid var(--bubs-hairline);
}
.site-header .inside-header {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.site-header .site-branding-container {
  grid-row: 1;
  max-width: var(--bubs-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 24px var(--bubs-content-padding);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--bubs-space-md);
}
.site-header .site-logo {
  justify-self: center;
}
.site-header .site-logo img,
.site-header .header-image img,
.site-header img.is-logo-image {
  display: block;
  max-height: 88px;
  width: auto;
  height: auto;
}
/* Hide WP's text site-title (empty container that ships with GP) */
.site-header .site-branding,
.site-header .main-title,
.site-header .site-description,
.site-header p.site-title { display: none; }

/* Left + Right CTAs injected via generate_before_logo / generate_after_logo */
.bubs-header-cta-left  { justify-self: start; }
.bubs-header-cta-right { justify-self: end; }
.bubs-header-cta-link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--bubs-white);
  text-decoration: none;
  font-family: var(--bubs-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color var(--bubs-transition-fast);
}
.bubs-header-cta-link:hover,
.bubs-header-cta-link:focus-visible {
  color: var(--bubs-orange);
}
.bubs-header-cta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color var(--bubs-transition-fast);
}
.bubs-header-cta-link:hover .bubs-header-cta-label,
.bubs-header-cta-link:focus-visible .bubs-header-cta-label {
  color: var(--bubs-orange);
}
.bubs-header-cta-phone {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* GP creates a mobile-only nav toggle wrapper inside .inside-header.
   Hide it on desktop; mobile rules below re-enable it. */
@media (min-width: 881px) {
  nav#mobile-menu-control-wrapper { display: none; }
  .site-header nav#site-navigation .menu-toggle { display: none; }
}

/* ----- STICKY NAV ON SCROLL — DESKTOP ONLY -------------------------
   Uses `position: sticky` so there's NO layout jump when scrolling.
   The nav strip naturally scrolls with content until it reaches the
   viewport top, then stays pinned. Trust bar + brand bar scroll above
   and disappear off-screen — no display:none toggling, no padding hack.
   Mobile uses no sticky behavior (header scrolls away normally). */
@media (min-width: 881px) {
  nav#site-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
  }
}

/* ----- ROW 3: Primary nav -----------------------------------------
   Edge-justified — Dumpsters anchors left, Contact anchors right,
   others distribute equally. Hover state grows a 2px orange underline
   from center. No background-fill chunkiness.
*/
nav#site-navigation {
  grid-row: 2;
  width: 100%;
}
.main-navigation {
  background: var(--bubs-navy);
  border-top: 1px solid var(--bubs-hairline);
  padding: 0;
  min-height: 0;
}
.main-navigation .inside-navigation {
  max-width: var(--bubs-max-width);
  margin: 0 auto;
  padding: 0 var(--bubs-content-padding);
}
.main-navigation .main-nav { width: 100%; }
.main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Body-class prefix bumps specificity above GP's customizer inline rule:
   `.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--accent); }`
   which would otherwise tint hover + current links blue (--accent: #1e73be). */
body.has-bubs-header .main-navigation .main-nav > ul > li > a {
  display: block;
  padding: 22px 0;
  color: var(--bubs-white);
  background: transparent;
  font-family: var(--bubs-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  transition: color var(--bubs-transition-fast);
}
body.has-bubs-header .main-navigation .main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--bubs-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--bubs-transition-slow);
}
body.has-bubs-header .main-navigation .main-nav > ul > li:hover > a,
body.has-bubs-header .main-navigation .main-nav > ul > li:focus-within > a,
body.has-bubs-header .main-navigation .main-nav > ul > li.current-menu-item > a,
body.has-bubs-header .main-navigation .main-nav > ul > li.current_page_item > a,
body.has-bubs-header .main-navigation .main-nav > ul > li.current-menu-ancestor > a {
  color: var(--bubs-white);
  background: transparent;
}
body.has-bubs-header .main-navigation .main-nav > ul > li:hover > a::after,
body.has-bubs-header .main-navigation .main-nav > ul > li:focus-within > a::after,
body.has-bubs-header .main-navigation .main-nav > ul > li.current-menu-item > a::after,
body.has-bubs-header .main-navigation .main-nav > ul > li.current_page_item > a::after {
  transform: scaleX(1);
}

/* Sub-menu dropdowns (white card under hovered top-level item) */
.main-navigation .main-nav ul ul {
  background: var(--bubs-white);
  box-shadow: var(--bubs-shadow-md);
  border-radius: 0 0 var(--bubs-radius-md) var(--bubs-radius-md);
  padding: 8px 0;
  min-width: 220px;
}
.main-navigation .main-nav ul ul li a {
  color: var(--bubs-ink);
  background: transparent;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.main-navigation .main-nav ul ul li:hover > a {
  background: var(--bubs-orange);
  color: var(--bubs-white);
}

/* ================================================================
   MOBILE — Salt-Booths-style drop-down drawer
   - Hide GP's native .menu-toggle (we render our own 3-span burger
     via bubs_render_burger() in hooks.php).
   - JS in header-sticky.js toggles `.is-open` on `.site-header`.
   - Drawer slides DOWN via max-height transition on nav#site-navigation.
   - Burger morphs to X when open (translateY + rotate on outer spans).
   ================================================================ */

/* Hide GP's native mobile chrome on every viewport — we use our own. */
nav#mobile-menu-control-wrapper { display: none !important; }
.site-header nav#site-navigation .menu-toggle { display: none !important; }

/* Burger button is mobile-only (display:none on desktop) */
.bubs-burger { display: none; }

@media (max-width: 880px) {
  .bubs-trust-bar { display: none; }

  /* Brand bar collapses to: logo (left) + burger (right).
     The left + right CTAs are display:none on mobile, so they drop
     out of grid auto-placement; only logo + burger remain. */
  .site-header .site-branding-container {
    grid-template-columns: 1fr auto;
    padding: 14px var(--bubs-content-padding);
    gap: 16px;
  }
  .site-header .site-logo { justify-self: start; }
  .site-header .site-logo img,
  .site-header .header-image img,
  .site-header img.is-logo-image { max-height: 50px; }
  .bubs-header-cta-left,
  .bubs-header-cta-right { display: none; }

  /* ----- Burger (3 spans, morphs to X on .site-header.is-open) ----- */
  .bubs-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    justify-self: end;
  }
  .bubs-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--bubs-white);
    transform-origin: center;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 200ms ease;
  }
  .site-header.is-open .bubs-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.is-open .bubs-burger span:nth-child(2) { opacity: 0; }
  .site-header.is-open .bubs-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .bubs-burger:focus-visible {
    outline: 2px solid var(--bubs-orange);
    outline-offset: 4px;
  }

  /* ----- Drawer: slides DOWN below the brand bar ----- */
  .main-navigation { border-top: 0; border-bottom: 0; }
  nav#site-navigation {
    display: block;  /* override any GP rule that hides nav on mobile */
    background: var(--bubs-navy);
    overflow: hidden;
    max-height: 0;
    transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 0;
  }
  .site-header.is-open nav#site-navigation {
    max-height: 85vh;
    overflow-y: auto;
    border-top: 1px solid var(--bubs-hairline);
    box-shadow: 0 18px 30px -16px rgba(0,0,0,0.5);
  }

  .main-navigation .inside-navigation {
    padding: 0;
    max-width: 100%;
  }

  /* Stacked menu items — Anton, generous padding, hairline dividers */
  .main-navigation .main-nav > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .main-navigation .main-nav > ul > li {
    width: 100%;
    border-top: 1px solid var(--bubs-hairline);
  }
  .main-navigation .main-nav > ul > li:first-child { border-top: 0; }

  body.has-bubs-header nav#site-navigation .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: var(--bubs-font-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bubs-white);
    background: transparent;
    line-height: 1;
    transition: color 0.2s ease, background 0.2s ease;
  }
  body.has-bubs-header nav#site-navigation .main-nav > ul > li > a::after {
    display: none;
  }
  body.has-bubs-header nav#site-navigation .main-nav > ul > li:hover > a,
  body.has-bubs-header nav#site-navigation .main-nav > ul > li:focus-within > a,
  body.has-bubs-header nav#site-navigation .main-nav > ul > li.current-menu-item > a,
  body.has-bubs-header nav#site-navigation .main-nav > ul > li.current_page_item > a {
    color: var(--bubs-orange);
    background: rgba(255,255,255,0.03);
  }

  /* Call + Text buttons pinned at the bottom of the drawer.
     Injected by bubs_render_mobile_contact() via generate_inside_navigation. */
  .bubs-mobile-contact {
    display: flex;
    gap: 12px;
    padding: 20px 24px 28px;
    background: var(--bubs-navy-deep);
    border-top: 1px solid var(--bubs-hairline);
  }
  .bubs-mobile-contact .btn {
    flex: 1;
    text-align: center;
    padding: 14px 20px;
    font-family: var(--bubs-font-body);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .bubs-mobile-contact .btn-call {
    background: var(--bubs-orange);
    color: var(--bubs-white);
  }
  .bubs-mobile-contact .btn-call:hover,
  .bubs-mobile-contact .btn-call:focus-visible {
    background: var(--bubs-orange-deep);
  }
  .bubs-mobile-contact .btn-text {
    background: transparent;
    color: var(--bubs-white);
    border: 2px solid var(--bubs-white);
  }
  .bubs-mobile-contact .btn-text:hover,
  .bubs-mobile-contact .btn-text:focus-visible {
    background: var(--bubs-white);
    color: var(--bubs-navy);
  }

  /* Lock the page when drawer is open so the body doesn't scroll behind it */
  body.bubs-menu-open { overflow: hidden; }
}

/* Desktop: hide the mobile drawer contact block and burger entirely */
@media (min-width: 881px) {
  .bubs-mobile-contact { display: none; }
  .bubs-burger { display: none !important; }
}

/* ================================================================
   .bubs-svc page expansion: hide entry-title, expand to full width.
   ================================================================ */
body.has-bubs-svc .entry-header,
body.has-bubs-svc .entry-title,
body.has-bubs-svc article.page > .inside-article > .entry-header,
body.has-bubs-svc .featured-image,
body.has-bubs-svc .page-header-image { display: none; }

body.has-bubs-svc #page,
body.has-bubs-svc .site-content,
body.has-bubs-svc .site-main,
body.has-bubs-svc #primary,
body.has-bubs-svc .content-area,
body.has-bubs-svc .inside-article,
body.has-bubs-svc article.page,
body.has-bubs-svc .entry-content {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}
body.has-bubs-svc .site-content { display: block; }

/* Sidebar off sitewide (design directive).
   GP renders the sidebar as <div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
   and sets `.site-content .content-area { width: 70% }`. We hide the
   sidebar element AND bump specificity above GP so .content-area gets
   the freed 30% (otherwise carryover pages render with a 30% empty
   gap on the right — the "weird gap" reported on thank-you, etc.). */
body .widget-area.sidebar,
body #right-sidebar,
body #left-sidebar,
body #secondary,
body aside.sidebar { display: none !important; }
body.right-sidebar .content-area,
body.left-sidebar .content-area,
body.both-sidebars .content-area,
body .site-content .content-area,
body .site-content #primary {
  width: 100%;
  max-width: none;
  float: none;
}

/* ================================================================
   SUPPORTING PAGES — thank-you, schedule, driver-resources, blog
   These pages didn't get the full-bleed .bubs-svc template (they
   carry plain content like forms or password gates). Give them a
   clean styled entry-title + sensible content padding so they don't
   render with GP's default chrome gap.
   ================================================================ */
/* Push the outer #page container full-width so the footer (which sits
   INSIDE #page in GP's markup) spans the viewport instead of being
   squeezed to GP's default grid-container max-width. Applies to all
   non-.bubs-svc page templates (.has-bubs-page + .has-bubs-lp). */
body.has-bubs-page #page,
body.has-bubs-page .site.grid-container,
body.has-bubs-lp #page,
body.has-bubs-lp .site.grid-container {
  max-width: none !important;
  width: 100%;
  padding: 0;
  margin: 0;
}
body.has-bubs-page #content.site-content,
body.has-bubs-lp #content.site-content {
  max-width: none;
  padding: 0;
  margin: 0;
  display: block;
}

/* ================================================================
   PAID LANDING PAGES (.has-bubs-lp) — minimal chrome, no distractions.
   - Hide site header (LP hero already serves as the page header)
   - Hide site footer entirely (no exit links)
   - Full-bleed container chain (no white borders around .bubs-lp content)
   ================================================================ */
body.has-bubs-lp .site-header,
body.has-bubs-lp .bubs-trust-bar,
body.has-bubs-lp .bubs-footer,
body.has-bubs-lp #bubs-footer { display: none !important; }

body.has-bubs-lp #primary,
body.has-bubs-lp .content-area,
body.has-bubs-lp .site-main,
body.has-bubs-lp article.page,
body.has-bubs-lp .inside-article,
body.has-bubs-lp .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.has-bubs-page .entry-header {
  padding: 56px var(--bubs-content-padding) 0;
  margin: 0;
  text-align: center;
}
body.has-bubs-page .entry-title {
  font-family: var(--bubs-font-heading);
  color: var(--bubs-navy);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 32px;
}
body.has-bubs-page .inside-article {
  padding: 0;
  margin: 0 auto;
  max-width: var(--bubs-max-width);
  background: transparent;
}
body.has-bubs-page article.page,
body.has-bubs-page .site-main,
body.has-bubs-page #primary,
body.has-bubs-page .content-area,
body.has-bubs-page .site-content {
  padding: 0;
  margin: 0;
  background: transparent;
}
body.has-bubs-page .entry-content {
  padding: 0 var(--bubs-content-padding) 64px;
  margin: 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
body.has-bubs-page .entry-content p {
  font-size: 17px;
  line-height: 1.65;
}
body.has-bubs-page .entry-content iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--bubs-gray-light);
  border-radius: 4px;
}
body.has-bubs-page .entry-content form {
  background: var(--bubs-off-white);
  padding: 24px;
  border-radius: 4px;
  border: 1px solid var(--bubs-gray-light);
}
body.has-bubs-page .entry-content form input[type="password"] {
  padding: 10px 14px;
  margin: 0 8px;
}
body.has-bubs-page .entry-content form input[type="submit"] {
  background: var(--bubs-orange);
  color: var(--bubs-white);
  border: 0;
  padding: 10px 22px;
  font-family: var(--bubs-font-body);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;
}
body.has-bubs-page .entry-content form input[type="submit"]:hover {
  background: var(--bubs-orange-deep);
}

/* ================================================================
   BLOG INDEX HERO STRIP — navy band above the post grid
   ================================================================ */
.bubs-blog-hero {
  background: var(--bubs-navy);
  color: var(--bubs-white);
  padding: 80px var(--bubs-content-padding) 64px;
  text-align: center;
}
.bubs-blog-hero .wrap {
  max-width: var(--bubs-max-width-narrow);
  margin: 0 auto;
}
.bubs-blog-hero h1 {
  color: var(--bubs-white);
  font-size: clamp(48px, 7vw, 96px);
  margin: 18px 0 16px;
}
.bubs-blog-hero .lede {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ================================================================
   BLOG INDEX — 2-column card grid (1 col on mobile)
   ================================================================ */
body.has-bubs-page.blog .site-main,
body.home.blog .site-main,
body.has-bubs-page.blog #main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: var(--bubs-max-width);
  margin: 0 auto;
  padding: 64px var(--bubs-content-padding);
}
@media (max-width: 880px) {
  body.has-bubs-page.blog .site-main,
  body.home.blog .site-main,
  body.has-bubs-page.blog #main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px var(--bubs-content-padding);
  }
}

body.has-bubs-page.blog article.post {
  background: var(--bubs-white);
  border: 1px solid var(--bubs-hairline-dark);
  border-radius: 4px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--bubs-transition-base), box-shadow var(--bubs-transition-base);
}
body.has-bubs-page.blog article.post:hover {
  transform: translateY(-3px);
  box-shadow: var(--bubs-shadow-md);
}
body.has-bubs-page.blog article.post .inside-article {
  padding: 0;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Featured image — fixed aspect ratio so cards line up evenly */
body.has-bubs-page.blog .post-image {
  margin: 0;
  order: -1;
}
body.has-bubs-page.blog .post-image a {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
body.has-bubs-page.blog .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.has-bubs-page.blog article.post:hover .post-image img {
  transform: scale(1.04);
}

/* Title — Anton, navy, prominent */
body.has-bubs-page.blog .entry-header {
  padding: 28px 28px 0;
  margin: 0;
  text-align: left;
}
body.has-bubs-page.blog .entry-title {
  font-family: var(--bubs-font-heading);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: left;
  margin: 0 0 12px;
  color: var(--bubs-navy);
}
body.has-bubs-page.blog .entry-title a {
  color: var(--bubs-navy);
  text-decoration: none;
}
body.has-bubs-page.blog .entry-title a:hover { color: var(--bubs-orange); }

/* Meta line — small uppercase, gray */
body.has-bubs-page.blog .entry-meta {
  font-size: 11px;
  color: var(--bubs-gray);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
body.has-bubs-page.blog .entry-meta time,
body.has-bubs-page.blog .entry-meta .author-name {
  color: var(--bubs-gray);
}
body.has-bubs-page.blog .entry-meta time + time { display: none; } /* hide duplicate published time */

/* Summary body */
body.has-bubs-page.blog .entry-summary {
  padding: 0 28px;
  flex: 1;
}
body.has-bubs-page.blog .entry-summary p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bubs-ink);
  margin: 0 0 20px;
}
body.has-bubs-page.blog .read-more {
  display: inline-block;
  margin-top: 4px;
  color: var(--bubs-orange);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
}
body.has-bubs-page.blog .read-more::after {
  content: " \2192";
  transition: transform var(--bubs-transition-fast);
  display: inline-block;
  margin-left: 4px;
}
body.has-bubs-page.blog .read-more:hover::after {
  transform: translateX(3px);
}

/* Footer / category chip */
body.has-bubs-page.blog footer.entry-meta {
  padding: 0 28px 28px;
  margin: 16px 0 0;
  border-top: 1px solid var(--bubs-hairline-dark);
  padding-top: 16px;
}
body.has-bubs-page.blog footer.entry-meta .cat-links {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bubs-gray);
}
body.has-bubs-page.blog footer.entry-meta .cat-links a {
  color: var(--bubs-orange);
  text-decoration: none;
}
body.has-bubs-page.blog footer.entry-meta .cat-links a:hover {
  color: var(--bubs-orange-deep);
}
body.has-bubs-page.blog footer.entry-meta .gp-icon {
  margin-right: 6px;
  color: var(--bubs-gray);
}

/* Pagination */
body.has-bubs-page.blog .nav-links,
body.has-bubs-page.blog .pagination {
  grid-column: 1 / -1;
  padding: 32px var(--bubs-content-padding);
  text-align: center;
}