/*
Theme Name: Slopriot
Theme URI: https://slopriot.com
Author: Slopriot
Author URI: https://slopriot.com
Description: Custom theme for Slopriot — AI video content agency. Minimal, bold, gen-z coded.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: slopriot
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
   :root {
    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'Space Mono', monospace;

    /* Colors */
    --color-black:  #000000;
    --color-white:  #ffffff;
    --color-cream:  #F5F2E8;
    --color-blue:   #0178BD;
    --color-orange: #FF751F;
    --color-accordion-bg: #EDE8DD;

    /* Spacing scale — adjust freely, everything below references these */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  8rem;

    /* Radii + misc */
    --radius-sm: 4px;
    --radius-md: 8px;
    --container-width: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-black);
    background-color: var(--color-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a {
    color: inherit;
    text-decoration: none;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--space-sm);
}

   h1 { font-size: clamp(2.4rem, 8vw, 3.4rem)}
   h2 { font-size: clamp(1.85rem, 5.5vw, 2.1rem)}
   h3 { font-size: clamp(1.2rem, 4vw, 1.4rem)}

p {
    margin: 0 0 var(--space-sm);
    font-size: 1rem;
}

.label-mono,
.tag-mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.label-services,
.tag-services {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 5rem;
  line-height: 1;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

@media (max-width: 768px) {
    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.section-black {
    background-color: var(--color-black);
    color: var(--color-white);
    padding-top: var(--space-lg);
}

@media (max-width: 768px) {
    .section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .section-black {
        padding-top: 2.5rem;
    }
}

.section-cream {
    background-color: var(--color-cream);
    color: var(--color-black);
}

.section-white {
    background-color: var(--color-white);
    color: var(--color-black);
}

.text-blue   { color: var(--color-blue); }
.text-orange { color: var(--color-orange); }
.text-cream  { color: var(--color-cream); }

.btn {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-primary {
    background-color: var(--color-blue);
    color: var(--color-cream);
}

.btn-link {
    font-family: var(--font-mono);
    color: var(--color-orange);
    font-size: 0.9rem;
    background: none;
    padding: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

.numbered-item {
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.numbered-item .num {
    font-family: var(--font-mono);
    color: var(--color-black);
    opacity: 0.4;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .numbered-item {
        margin-bottom: var(--space-md);
    }
}

/* =========================================================
   TESTIMONIAL ALIGNMENT — intentionally right-aligned at
   every breakpoint, including mobile. This is a deliberate
   design choice, not a bug — do not add a mobile override
   that changes this to text-align: left.
   ========================================================= */
/* No override added here on purpose — Bootstrap's .text-end
   class (already applied in home.php on the testimonial column)
   has no responsive variant in use, so it stays text-align:right
   at every viewport width with zero extra CSS needed. */

/* =========================================================
   MONTHLY REPORT IMAGE — mobile right-bleed
   Desktop behavior (centered, max-width: 900px, fully contained)
   is set inline in home.php and is untouched by this rule.
   On mobile, the image breaks out of the container and bleeds
   off the right edge instead of shrinking to fit — same pattern
   as the Trackr dashboard screenshot reference.
   ========================================================= */
@media (max-width: 768px) {
    .report-image-wrap {
        max-width: none;
        width: calc(100% + 1.25rem);
        margin-left: 0;
        margin-right: -1.25rem;
        overflow: hidden;
    }

    .report-image-wrap img {
        width: 138%;
        max-width: none;
        height: auto;
    }
}

.video-ticker-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* The track holds 13 real videos on first paint; a second identical
   set is cloned in by JS once the first set has started loading
   (see the ticker-loop script near the bottom of home.php), keeping
   the DOM at 13 concurrent video loads instead of 26 on first paint.
   The -50% animation math below still assumes exactly 2 equal sets
   back-to-back, so it keeps working once the clone is appended. */
.video-ticker-track {
  display: flex;
  gap: 20px; /* Even spacing between your videos */
  width: max-content;
  animation: continuousScroll 45s linear infinite;
}

/* Pause scrolling when user hovers */
.video-ticker-track:hover {
  animation-play-state: paused;
}

/* Enforces strict 9:16 layout rules on the video items */
.video-ticker-item {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 9 / 16; /* Locked vertical proportions */
  border-radius: 8px; /* Optional: smooth corners */
  overflow: hidden;
  background-color: #1a1a1a; /* fallback while video paints, avoids a flash of pure black/white */
}

/* Ensure the video fills the 9:16 item frame perfectly */
.video-ticker-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .video-ticker-item {
    width: 132px;
  }
}

/* The keyframe animation moving left, accounting for the 20px gap */
@keyframes continuousScroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(calc(-50% - 10px));
  }
}

/* =========================================================
   10. SITE HEADER & LOGO CUSTOMIZATION
   ========================================================= */

/* One: Make the header background black */
.site-header {
  background-color: var(--color-black);
}

/* Two: Style the text-based site logo */
.site-logo {
  font-family: var(--font-mono);
  color: var(--color-cream);
  font-weight: 700;       /* Makes the Space Mono text look bold like a logo */
  text-transform: lowercase; /* Optional: forces uppercase layout if desired */
  text-decoration: none;  /* Strips default link underline */
  font-size: 1.25rem;     /* Adjust size to fit your layout */
  transition: opacity 0.2s ease; /* Smooth fade when hovering */
}

/* Ensure the blue color stays active when hovering or focusing */
.site-logo:hover,
.site-logo:focus {
  color: var(--color-blue);
  opacity: 0.85;          /* Gives a slight visual cue on hover */
  text-decoration: none;
}


/* =========================================================
   11. FAQ ACCORDION (used on single.php blog template)
   Built on Bootstrap's native .accordion component. No overrides
   here — it renders with Bootstrap's stock default styling
   (default borders, chevron icon, rounded corners, etc.) straight
   from bootstrap.min.css. .faq-section below only adds spacing
   above the block to separate it from the article text; it doesn't
   touch any .accordion-* class.
   ========================================================= */
.faq-section {
    padding-top: var(--space-md);
    margin-top: var(--space-lg);
}

.accordion-item {
  background-color: var(--color-accordion-bg);
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.accordion-button {
  background-color: var(--color-accordion-bg);
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-accordion-bg);
  color: var(--color-black);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* ======================================================
  12. Who We Serve Pages
  ======================================================= */
  .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
@media (max-width: 768px) {
    .comparison-grid { grid-template-columns: 1fr; }
}
.comparison-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
}
.comparison-card.is-us {
    background-color: var(--color-black);
    color: var(--color-cream);
}
.comparison-card.is-them {
    background-color: var(--color-accordion-bg);
    color: var(--color-black);
    opacity: 0.8;
}
.comparison-card h3 {
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: lowercase;
    margin-bottom: var(--space-sm);
}
.comparison-card ul { margin: 0; }
.comparison-card li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.18);
    font-size: 0.95rem;
    line-height: 1.4;
}
.comparison-card li:last-child { border-bottom: none; }
.hero-image-wrap img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    max-height: 460px;
}