/* ============================================================
   GMC brand overrides for the licensed Vixto template (NAK-298)
   ============================================================
   Loaded LAST (precedence "blog-theme-2"), after bootstrap.min.css and
   vixto.css. This file re-brands the template's accent colors and logo
   sizing only — vixto.css itself is never edited, so future template
   updates can be dropped in without a merge. Do not add page layout or
   component structure here beyond the small, clearly-labeled exceptions
   at the bottom that the static template has no equivalent for (GMC has
   no demo/stock imagery to fill the template's decorative image slots).

   Source hex values are read from src/features/gmc/design/tokens.css
   (--brand family) and hardcoded here because this file sits outside the
   app's CSS bundling pipeline (it is served as a static asset under
   /public, not imported through app/globals.css).
     --brand:     #EC7336 (logo orange)
     --brand-600: #D9612A
     --brand-700: #B8480A
   ============================================================ */

:root {
  /* vixto.css defines these on :root; the two accent colors below are
     what nearly every var-driven highlight in the template resolves to
     (buttons, active/hover states, badge backgrounds, scrollbar thumb). */
  --dl-primary-color: #EC7336;
  --dl-secondary-color: #B8480A;
}

/* ---- Hardcoded (non-variable) accent hexes in vixto.css ----------------
   A handful of selectors in vixto.css hardcode the template's original
   accent hex (#f9e498) instead of referencing --dl-primary-color, so the
   :root override above does not reach them. Mirrored 1:1 here with the
   GMC brand hex so every occurrence of the template's highlight color
   re-brands consistently. */
::selection {
  background-color: #EC7336;
  color: var(--dl-heading-color);
}

-webkit-::selection {
  background-color: #EC7336;
  color: var(--dl-heading-color);
}

::-moz-selection {
  background-color: #EC7336;
  color: var(--dl-heading-color);
}

.subscribe-form .form-control:focus {
  border: 1px solid #EC7336;
}

.subscribe-form button {
  background-color: #EC7336;
}

.pagination-wrap a:hover,
.pagination-wrap a.active {
  background-color: #EC7336;
}

/* ---- Link / nav hover (JS-free replacement) ----------------------------
   vixto.css's nav-menu hover effect (a per-letter color wipe) depends on
   main.js wrapping every letter in its own <span> — jQuery/template JS is
   intentionally not imported (NAK-298 rev 5 decision log), so that
   animation never fires. This is a plain, non-animated hover so nav links
   still give visible feedback without the template's JS. */
.main-header-wapper .nav-menu > li > a:hover {
  color: var(--dl-secondary-color);
  text-decoration: underline;
}

.mobile-navigation-menu .nav-menu li > a:hover {
  color: var(--dl-secondary-color);
}

/* ---- GMC logo lockup sizing --------------------------------------------
   The template's .site-logo / .about-widget .logo rules size a text
   wordmark (.site-title); GMC renders an <img> lockup instead, so give it
   an explicit height rather than inheriting the text line-height. */
.site-logo img {
  width: auto;
  display: block;
}

/* vixto caps the footer logo box at 130px wide (sized for their compact
   wordmark) — the wide GMC lockup letterboxes inside it. Size by height. */
.footer-widget .about-widget .logo {
  width: auto;
}
.footer-widget .about-widget .logo img {
  height: 36px;
  width: auto;
}

/* ============================================================
   GMC structural additions
   ============================================================
   Vixto has no template-native equivalent for these two cases. Both are
   layout-only (no color/branding decisions) and kept to the minimum
   needed so the reused template classes render correctly without the
   content the static demo assumed would be there.
   ============================================================ */

/* subscribe.html's .subscribe-page-inner is a 2-column grid (form +
   decorative photo). GMC does not have stock/demo photography to fill the
   image half (the plan explicitly excludes copying template demo images),
   so the empty-state newsletter landing renders the form alone; without
   this, half the grid would sit blank. */
.subscribe-page-inner--no-image {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}

/* The listing/article "type" badge (Report/Article) reuses the visual
   language of .post-meta's category link but has no destination page to
   link to, so it is a <span> rather than an <a>. Mirrors
   `.post-meta li a`'s declarations from vixto.css for visual parity. */
.post-meta li span.post-meta__badge {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--dl-heading-color);
}

/* Vertical rhythm between the article/report body and the subscribe +
   Copilot CTA blocks that follow it — vixto.css's single-page layout has
   no equivalent trailing-blocks slot to size for. */
.content-page__extra {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

/* Report page deck embed + PDF/deck action buttons — Vixto has no concept
   of an embedded HTML deck, so this box borrows the template's sharp-corner,
   bordered-box visual language (see .post-card) rather than introducing a
   new rounded-corner style. */
.content-report__deck {
  margin: 30px 0;
  border: 1px solid var(--dl-border-color);
  background: var(--dl-white-color);
  overflow: hidden;
}
.content-report__deck iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.content-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0 0 30px;
}

@media (max-width: 640px) {
  .content-report__deck iframe {
    aspect-ratio: 4 / 3;
  }
}

/* Vixto references img/page-header.jpg (a stock photo not licensed into this
   repo); the file would 404 under public/. Replace the photo with a quiet
   GMC-brand gradient so the listing page header never issues a broken
   request (Codex review P2). */
.page-content-wrap {
  background-image: linear-gradient(135deg, #fdf3ec 0%, #f9dfcd 55%, #f6cdb2 100%);
}

/* ---- NAK-298 rev 6 (full-fidelity port) additions ----------------------- */

/* widget-banner has no template-native "promo box" variant (the static demo
   only ever puts a plain image banner there) — this reuses widget-subscribe's
   box treatment (padding/background) with a brand gradient so the Copilot
   CTA reads as a highlighted aside consistent with the rest of the sidebar,
   per the port plan's "brand-gradient block" instruction. */
.widget-banner--cta {
  background: linear-gradient(135deg, #fdf3ec 0%, #f9dfcd 55%, #f6cdb2 100%);
  padding: 30px;
}

.widget-banner--cta .subscribe-heading {
  margin-bottom: 15px;
}

/* No override needed for post-social-share's "email" item (a GMC addition —
   there is no template-native mail-share icon): vixto.css's base
   `.post-social-share li a` rule already gives every item a brand-color
   circular badge with a white icon, and only named networks
   (facebook/twitter/instagram/pinterest) override that background color —
   "email" simply falls through to the same default treatment. */

/* ---- NAK-298 rev 7 (/blog = index.html port) additions ------------------ */

/* index.html's `.cat-text` assumes short single-word category labels inside
   a fixed 90px circular box (see vixto.css). The port plan's category-section
   substitutes real content-piece titles for the template's stock category
   names (GMC has no separate "category" taxonomy) — widen the box and clamp
   to 3 lines so a full article/report title never overflows the thumbnail. */
.category-card .cat-text {
  width: 140px;
  height: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-items: center;
}

/* Vixto gates body scroll behind a JS-added `loaded` class (site-preloader
   pattern in main.js). Template JS is intentionally not imported, so the
   class never appears and body would stay overflow:hidden forever — unlock
   scroll unconditionally, preserving the template's overflow-x:hidden. */
body:not(.loaded) {
  overflow: hidden auto;
}

/* ---- Dashboard-CSS leak fixes (NAK-298) --------------------------------
   app/globals.css loads on every route (root layout), including the blog
   surface, and defines a bare `.row` utility (display:flex;
   align-items:center; gap:10px) that collides with Bootstrap's grid `.row`
   here: the 10px flex gap made an exact-fit col-lg-8 + col-lg-4 pair
   overflow by 10px and wrap, dropping the sidebar below the main column.
   Restore Bootstrap's own defaults inside the blog theme. */
.blog-theme .row {
  align-items: normal;
  gap: 0;
}

/* ---- Static hero carousel (no swiper JS) --------------------------------
   The featured-post hero is a swiper carousel in the template; without
   swiper's JS+CSS the slides are block-level and stack vertically. Recreate
   the horizontal band as a pure-CSS scroll-snap strip: slides keep their
   template size classes (slide-size-*), scroll horizontally, and snap. */
.blog-theme .featured-post-wrap .swiper {
  overflow: hidden;
}
.blog-theme .featured-post-wrap .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.blog-theme .featured-post-wrap .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.blog-theme .featured-post-wrap .swiper-slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

/* ---- Header simplification (owner review 2026-07-26) --------------------
   The top-header ticker bar is removed; the logo/nav row itself carries the
   tinted background instead (same tone the bar used, --dl-bg-light-red). */
.bottom-header {
  background: #f6f3ed;
}
/* Slightly slimmer header row (template default is 90px), and breathing
   room between the header and the hero band so slide images never touch
   the nav row (owner review 2026-07-26). */
.main-header-wapper {
  height: 72px;
}
.featured-post-wrap {
  margin-top: 28px;
}
/* vixto.css caps .site-logo at max-width:110px (sized for their short text
   wordmark); the GMC lockup is a wide 442x64 SVG, so the cap letterboxed it
   down to ~16px of visible height. Lift the cap and size by height. */
.main-header-wapper .site-logo {
  max-width: none;
}
.site-logo img {
  height: 36px;
}
/* Header Subscribe CTA: match its height to the logo's icon square
   (= logo height, 36px) so the row reads as one line. */
.menu-right-item .default-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
}
/* Brand-orange buttons read wrong with the template's dark text — use white
   (covers the header Subscribe CTA and every other default-btn). */
.blog-theme .default-btn,
.blog-theme .default-btn:hover,
.blog-theme .default-btn::before,
.blog-theme .default-btn::after {
  color: #fff;
}

/* Author-box role chip: brand-orange background needs white text (the
   template's dark body color was tuned for its light-yellow accent). */
.single-post-author .author-info h3 span {
  color: #fff;
}

/* Box icons (mail/chat circles above subscribe & CTA boxes): the template
   tuned the glyph color for its light-yellow accent — on the GMC orange
   circles the icons must be white. */
.blog-theme .subscribe-icon,
.blog-theme .widget-subscribe .subscribe-heading .subscribe-icon,
.blog-theme .subscribe-icon svg {
  color: #fff;
}

/* Article-page engagement CTAs (self-serve Copilot vs paid custom report):
   two equal cards under the author box, template box language. */
.content-engage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.content-engage-card {
  background: var(--dl-bg-light-red);
  padding: 30px;
}
.content-engage-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.content-engage-card p {
  margin-bottom: 18px;
}
@media (max-width: 767px) {
  .content-engage-grid {
    grid-template-columns: 1fr;
  }
}