/*
 * Rock Your World Wisconsin -- global brand styling.
 * Application-layer supplement to the Atomik theme (concrete/themes/atomik).
 * Every color/type value below is sourced from the confirmed entries in
 * /home/rockyourworldwi/migration/branding.md. Values branding.md flagged as
 * NOT confirmed (the #2D7AC0 blue's placement, and Montserrat/Raleway/
 * ClashDisplay on-page usage) are deliberately NOT used here.
 */

/* ---------- Self-hosted webfonts ---------- */
/* ClashGrotesk: self-hosted in WP too (theme asset, not a Google Font) -- replicate. */
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../../fonts/ClashGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../../fonts/ClashGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Poppins + Bebas Neue: WP self-hosts these too (Elementor "load Google Fonts
   locally"), so we self-host rather than link to the Google Fonts CDN. */
@font-face {
  font-family: 'Poppins';
  src: url('../../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand palette (confirmed values only; see branding.md sec. 2) ---------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: #cd783e;         /* burnt-orange brand accent (--minimog-color-primary) */
  --bs-primary-rgb: 205, 120, 62;
  --bs-secondary: #000000;       /* --minimog-color-secondary */
  --bs-secondary-rgb: 0, 0, 0;
  --bs-link-color: #000000;      /* --minimog-color-link */
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: #999999; /* --minimog-color-link-hover */
  --bs-link-hover-color-rgb: 153, 153, 153;
  --bs-body-color: #666666;      /* --minimog-color-text */
  --bs-body-bg: #ffffff;
  --bs-body-font-family: 'Poppins', Helvetica, Arial, sans-serif;
  --bs-heading-color: #000000;   /* --minimog-color-heading */
}

/* The mobile nav's slide-out panel sits off-screen at rest via
   position:fixed; right:0; transform:translateX(100%) (see the 1199px
   breakpoint rules below) -- browsers still count that off-screen box
   toward the page's scrollable area, so the whole page picked up a
   horizontal scrollbar and the panel/toggler could only be reached by
   scrolling right. Clipping x-overflow here is the standard fix for this
   transform+fixed slide-panel pattern. */
html, body {
  overflow-x: hidden;
}

/* ---------- Base type ---------- */
.theme-atomik {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 28px;
  color: #666666;
  background-color: #ffffff;
  overflow-x: hidden;
}

.theme-atomik h1,
.theme-atomik h2,
.theme-atomik h3,
.theme-atomik h4,
.theme-atomik h5,
.theme-atomik h6 {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #000000;
  text-transform: none;
  letter-spacing: normal;
  clear: both;
}
.theme-atomik h1 { font-size: 38px; }
.theme-atomik h2 { font-size: 34px; }
.theme-atomik h3 { font-size: 30px; }
.theme-atomik h4 { font-size: 26px; }
.theme-atomik h5 { font-size: 22px; }
.theme-atomik h6 { font-size: 18px; }

/* ---------- Links (body content) ---------- */
.theme-atomik .ccm-page a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
  color: #000000;
  text-decoration: underline;
  transition: color .15s ease;
}
.theme-atomik .ccm-page a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover,
.theme-atomik .ccm-page a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):focus {
  color: #999999;
}

/* ---------- Buttons (branding.md sec. 7) ---------- */
.theme-atomik .btn-primary,
.theme-atomik .btn-secondary,
.theme-atomik .btn-outline-primary,
.theme-atomik .btn-outline-secondary {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
  padding: 0 25px;
  min-height: 45px;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .2s ease, background-color .15s ease, color .15s ease;
}

/* Primary = solid black. Per branding.md the primary button does not shift
   color on hover -- only a soft ring/glow appears. */
.theme-atomik .btn-primary {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}
.theme-atomik .btn-primary:hover,
.theme-atomik .btn-primary:focus {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .5);
}

/* Secondary = transparent/outline black, fills solid black on hover. */
.theme-atomik .btn-secondary,
.theme-atomik .btn-outline-primary,
.theme-atomik .btn-outline-secondary {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}
.theme-atomik .btn-secondary:hover,
.theme-atomik .btn-secondary:focus,
.theme-atomik .btn-outline-primary:hover,
.theme-atomik .btn-outline-primary:focus,
.theme-atomik .btn-outline-secondary:hover,
.theme-atomik .btn-outline-secondary:focus {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* ---------- Header / Top Navigation Bar (branding.md sec. 4) ---------- */
.theme-atomik .ccm-block-top-navigation-bar .navbar {
  background-color: #ffffff;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.theme-atomik .ccm-block-top-navigation-bar .navbar.fixed-top {
  background-color: #ffffff !important; /* stay white when pinned, per branding.md sec. 4 */
}
.theme-atomik .ccm-block-top-navigation-bar .navbar-brand img.logo {
  max-height: 55px;
  width: auto;
}

/* The nav is pinned (position: fixed) whenever sticky nav is on, which takes
   it out of normal document flow -- without this, page content (e.g. the
   Home hero heading) renders underneath it, clipped by the bar. Push the
   page content down by the bar's own height instead of chasing the live
   site's scroll-triggered JS toggle; :has() keeps this correctly off in
   edit mode, where the template doesn't apply "fixed-top" at all. */
.theme-atomik:has(.ccm-block-top-navigation-bar .navbar.fixed-top) {
  padding-top: 90px;
}
.theme-atomik .ccm-block-top-navigation-bar .nav-link {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}
.theme-atomik .ccm-block-top-navigation-bar .nav-link:hover,
.theme-atomik .ccm-block-top-navigation-bar .nav-link.active {
  color: #999999;
}

/* Mobile breakpoint + right-slide overlay panel (branding.md sec. 4: 1199px
   breakpoint, slide-out from the right, full-height, white background).
   Paired with the custom "navbar-expand-xl" block template (instead of
   Atomik's stock "navbar-expand-lg") so the collapse actually triggers at
   1199px rather than Bootstrap's default 991px. */
@media (max-width: 1199.98px) {
  .theme-atomik .ccm-block-top-navigation-bar .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh !important;
    width: 300px;
    max-width: 85vw;
    background-color: #ffffff;
    overflow-y: auto;
    padding: 5rem 1.5rem 2rem;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1050;
    display: block !important;
  }
  .theme-atomik .ccm-block-top-navigation-bar .navbar-collapse.show {
    transform: translateX(0) !important;
  }
  .theme-atomik .ccm-block-top-navigation-bar .navbar-collapse.collapsing {
    height: 100vh !important;
    transition: transform .3s ease;
  }
  .theme-atomik .ccm-block-top-navigation-bar .navbar-nav {
    width: 100%;
  }
  .theme-atomik .ccm-block-top-navigation-bar .nav-link {
    text-align: left;
  }
}

/* ---------- Footer (branding.md sec. 2 & 5) ---------- */
.theme-atomik footer {
  background-color: #f6f6f6;
  color: #666666;
}
.theme-atomik footer a {
  color: #666666;
}
.theme-atomik footer a:hover {
  color: #cd783e;
}
.theme-atomik footer .footer-brand-logo img {
  max-height: 60px;
  width: auto;
}
.theme-atomik footer .concrete-branding {
  border-top: 1px solid #e6e6e6;
  padding-top: .5rem;
}
.theme-atomik footer .concrete-branding .col-md-6:first-child {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .02em;
}

/* ==========================================================================
   Home page rebuild -- additional global tokens (block-type-level only,
   never page/block-ID-specific; see /home/rockyourworldwi/migration/branding.md
   for source values, all sampled live via getComputedStyle 2026-08-17).
   ========================================================================== */

/* Montserrat: used for the hero's italic subtitle line, self-hosted to match
   the existing pattern (Poppins/Bebas Neue/ClashGrotesk are self-hosted too). */
@font-face {
  font-family: 'Montserrat';
  src: url('../../fonts/Montserrat-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root,
[data-bs-theme="light"] {
  /* Confirmed live via getComputedStyle: "Shows and Events" heading color
     and the testimonial position link color (both #2d7cc6/#2d7ac0 family). */
  --brand-feature-heading-blue: #2d7cc6;
  /* Confirmed live via getComputedStyle on the Story section's "Learn More"
     button -- a distinct light blue, not the site's orange primary. */
  --brand-story-button-blue: #5bc0de;
  /* Confirmed live: Story band bg #ececec, Testimonial band bg #a5a7aa. */
  --brand-story-band-bg: #ececec;
  --brand-testimonial-band-bg: #a5a7aa;
}

/* ---------- Hero Image block (block-type-level; only one instance on the
   site today, but scoped to the block type, not a page/block ID) ---------- */
.theme-atomik .ccm-block-hero-image {
  min-height: 450px;
}
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-cover,
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-image,
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text {
  min-height: 450px;
  height: 450px;
}
/* Reference site has no dark overlay on the hero photo. */
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-cover {
  background-color: transparent;
}
/* Left-aligned, vertically centered overlay text (stock template centers). */
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text {
  align-items: flex-start;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
  /* Soft glow around the whole content box, sampled live from
     .minimog-banner.minimog-box -- reference site has no dark overlay,
     just this subtle shadow keeping white text legible over the photo. */
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text h1,
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text .h1 {
  text-align: left;
  /* Reference site's H1 is not text-transformed -- Bebas Neue's own
     letterforms give the "shouty" look, sampled: textTransform: none. */
  color: #ffffff;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  /* !important needed: Atomik's own skin (default.css) has a higher-
     specificity responsive rule (div.theme-atomik div.ccm-block-hero-image
     div.ccm-block-hero-image-text .h1 { font-size: calc(1.775rem + 6.3vw) })
     that otherwise wins over this 3-class selector regardless of load order. */
  font-size: 71px !important;
}
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text p {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: #ffffff;
  text-align: left;
  margin-top: .5rem;
}
/* Slow hover zoom on the hero photo -- transform/timing sampled directly
   from the reference site's compiled CSS (.minimog-animation-zoom-in rule):
   transform: scale3d(1.1,1.1,1.1); transition: .75s cubic-bezier(0,0,.2,1). */
.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-image {
  transition: transform .75s cubic-bezier(0, 0, .2, 1);
  overflow: hidden;
}
.theme-atomik .ccm-block-hero-image:hover .ccm-block-hero-image-image {
  transform: scale3d(1.1, 1.1, 1.1);
}

/* ---------- Big display section headings (Story / "WHAT WE DO" / "From our
   Blog") -- reusable class applied via the content block's display_heading.php
   custom template (application/blocks/content/templates/display_heading.php),
   NOT a blanket h1-h6 rule: About Us's plain content-block headings render in
   Poppins on the reference site (sampled live), so a global tag-level rule
   would have wrongly restyled them. This is the "theme token" -- one rule,
   reusable anywhere the display_heading.php template is used. ---------- */
.section-heading-display h1,
.section-heading-display h2,
.section-heading-display h3,
.section-heading-display h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  color: #000000;
}

/* ---------- Gallery block, edge_to_edge.php template -- reference site's
   cells are square (1:1) and cropped, not letterboxed. ---------- */
.theme-atomik .ccm-block-gallery-edge-to-edge .ccm-block-gallery-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.theme-atomik .ccm-block-gallery-edge-to-edge .ccm-block-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Blog cards (page_list block, blog_card_grid.php template) --
   uniform card height and a fixed-aspect-ratio, cropped thumbnail; a
   neutral placeholder fills the thumbnail area for posts with no image
   block so cards never collapse to a different height. ---------- */
.theme-atomik .ccm-block-page-list-blog-card .card {
  height: 100%;
}
.theme-atomik .ccm-block-page-list-blog-card .card-thumbnail {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #ececec;
}
.theme-atomik .ccm-block-page-list-blog-card .card-thumbnail img,
.theme-atomik .ccm-block-page-list-blog-card .card-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.theme-atomik .ccm-block-page-list-blog-card .card-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
}
.theme-atomik .ccm-block-page-list-blog-card .card-thumbnail-placeholder svg {
  width: 25%;
  height: 25%;
}

/* ---------- "full_bleed" container (edge-to-edge, no padding) ---------- */
.theme-atomik .full-bleed-stripe {
  padding: 0;
}

/* ---------- Testimonial full-width gray band (block escapes the theme grid via application/blocks/testimonial/controller.php) ---------- */.theme-atomik .ccm-block-testimonial-wrapper {  background-color: var(--brand-testimonial-band-bg);  color: #ffffff;  padding: 60px 20px;}

/* ---------- Testimonial: quote_circle custom template ---------- */
.theme-atomik .ccm-block-testimonial-quote-circle {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
}
.theme-atomik .ccm-block-testimonial-quote-circle-paragraph {
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
.theme-atomik .ccm-block-testimonial-quote-circle-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: .75rem;
}
.theme-atomik .ccm-block-testimonial-quote-circle-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.theme-atomik .ccm-block-testimonial-quote-circle-name {
  color: #ffffff;
  font-weight: 700;
}
.theme-atomik .ccm-block-testimonial-quote-circle-position {
  color: #ffffff;
  opacity: .85;
  font-size: .9rem;
}

/* ---------- Feature blocks in the "grid_three" container (Shows and
   Events / Online / Our Store), stacked.php template ---------- */
.theme-atomik .stripe + .container .ccm-block-feature-stacked,
.theme-atomik .ccm-block-feature-stacked {
  text-align: center;
}
.theme-atomik .ccm-block-feature-stacked h4 {
  color: var(--brand-feature-heading-blue);
}
.theme-atomik .ccm-block-feature-stacked .fa,
.theme-atomik .ccm-block-feature-stacked .fas {
  font-size: 70px;
  color: #000000;
  margin-bottom: .5rem;
  display: inline-block;
}

/* ---------- Story section "Learn More" button (light blue, sampled live) --- */
.theme-atomik .btn-story-light {
  background-color: var(--brand-story-button-blue);
  border-color: var(--brand-story-button-blue);
  color: #ffffff;
  border-radius: 5px;
  min-width: 0;
  padding: 5px 30px;
  min-height: 0;
  font-weight: 400;
}
.theme-atomik .btn-story-light:hover,
.theme-atomik .btn-story-light:focus {
  background-color: var(--brand-story-button-blue);
  border-color: var(--brand-story-button-blue);
  color: #ffffff;
  opacity: .9;
}

/* ---------- Image block, align_right.php template -- reusable right-aligned
   wrapper (e.g. a signature graphic at the end of a text block). ---------- */
.theme-atomik .ccm-block-image-align-right {
  text-align: right;
}