/*
Theme Name: Pro Motion
Theme URI: https://promotiontshirts.com
Author: Pro Motion T-Shirts & Embroidery
Author URI: https://promotiontshirts.com
Description: A bold, motorsport-inspired one-page theme for Pro Motion T-Shirts & Embroidery — custom screen printing, embroidery & contract work in Ventura, CA. Phone-first quotes. Fully customizable header, footer, widgets, fonts and colors via the WordPress Customizer.
Version: 1.10.3
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: promotion
Tags: one-page, custom-colors, custom-logo, custom-menu, editor-style, footer-widgets, full-width-template, sticky-post, threaded-comments
*/

/* ============================================================
   Base resets + variables
   The CSS custom properties are injected from the Customizer
   in functions.php (promotion_customizer_css). Everything
   below consumes those variables.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --pm-primary:#c8202a; --pm-bg:#0c0c0e; --pm-surface:#000; --pm-surface2:#17171a;
  --pm-text:#f4f1ec; --pm-text2:#c9c7c2; --pm-muted:#9a9aa0; --pm-line:rgba(255,255,255,0.12);
  --pm-header:rgba(12,12,14,0.92); --pm-header-pos:sticky; --pm-zoom:1;
  --pm-nav-size:15px; --pm-nav-gap:22px; --pm-seclogo:46px;
  --pm-heading:'Barlow Condensed',sans-serif; --pm-body:'Barlow',system-ui,sans-serif;
  --pm-footer-font:'Barlow Condensed',sans-serif; --pm-head-color:#f4f1ec; --pm-link:#c8202a;
}

body {
  margin:0; background:var(--pm-bg); color:var(--pm-text);
  font-family:var(--pm-body); -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
input, textarea, button { font-family:inherit; }
/* Native selects (incl. form plugins that inherit theme colors): keep text
   legible on the dark theme and make the dropdown list match the surface. */
select {
  color:var(--pm-text);
  background-color:var(--pm-surface2);
  border:1px solid var(--pm-line);
  color-scheme:var(--pm-scheme,dark);
}
select option { color:var(--pm-text); background-color:var(--pm-surface2); }
::placeholder { color:var(--pm-muted); }
img { max-width:100%; height:auto; }

@keyframes pmMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Site wrapper applies the global font-size zoom */
.pm-site { max-width:100%; overflow-x:hidden; background:var(--pm-bg); zoom:var(--pm-zoom,1); }

/* Gallery tab active state handled inline via JS; button base */
.pm-tab {
  font-family:var(--pm-heading); font-weight:800; text-transform:uppercase;
  letter-spacing:0.05em; font-size:16px; padding:11px 22px; border-radius:5px; cursor:pointer;
  background:transparent; color:var(--pm-text2); border:1px solid var(--pm-line);
}
.pm-tab.is-active { background:var(--pm-primary); color:#fff; border:1px solid var(--pm-primary); }

/* ---------- Gallery tiles (shared) ---------- */
.pm-tile {
  position:relative; border:1px solid var(--pm-line); background:var(--pm-surface2);
  background-image:repeating-linear-gradient(45deg,rgba(128,128,128,0.10) 0 10px,transparent 10px 20px);
  display:flex; align-items:flex-end; padding:12px; overflow:hidden; border-radius:6px;
}
.pm-tile > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.pm-tile-dot { position:absolute; top:10px; left:10px; width:10px; height:10px; background:var(--pm-primary); z-index:1; }
.pm-tile-label {
  position:relative; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:11px;
  letter-spacing:0.03em; color:var(--pm-muted); text-transform:uppercase; line-height:1.3;
}

/* ---------- Gallery layouts ---------- */
/* Showcase — big stage + thumbnail rail */
.pm-gallery--showcase { display:block; }
.pm-stage { position:relative; }
.pm-stage-main .pm-tile { aspect-ratio:16/10; width:100%; }
.pm-stage-main .pm-tile-label { font-size:13px; }
.pm-stage-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border:none; border-radius:50%; cursor:pointer;
  background:var(--pm-primary); color:#fff; font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.pm-stage-prev { left:14px; }
.pm-stage-next { right:14px; }
.pm-rail { display:flex; gap:8px; overflow-x:auto; margin-top:12px; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--pm-primary) var(--pm-surface2); }
.pm-rail::-webkit-scrollbar { height:8px; }
.pm-rail::-webkit-scrollbar-thumb { background:var(--pm-primary); border-radius:8px; }
.pm-thumb { flex:0 0 auto; width:104px; padding:0; border:2px solid transparent; border-radius:8px; background:none; cursor:pointer; }
.pm-thumb .pm-tile { aspect-ratio:1/1; border-radius:6px; }
.pm-thumb.is-active { border-color:#fff; }

/* Grid — uniform squares */
.pm-gallery--grid { display:grid; grid-template-columns:repeat(var(--pm-gcols,4),1fr); gap:12px; }
.pm-gallery--grid .pm-tile { aspect-ratio:1/1; }

/* Masonry — staggered heights via CSS columns */
.pm-gallery--masonry { column-count:var(--pm-gcols,4); column-gap:12px; }
.pm-gallery--masonry .pm-tile { break-inside:avoid; margin:0 0 12px; width:100%; }
.pm-gallery--masonry .pm-tile:nth-child(3n+1) { min-height:260px; }
.pm-gallery--masonry .pm-tile:nth-child(3n+2) { min-height:200px; }
.pm-gallery--masonry .pm-tile:nth-child(3n)   { min-height:320px; }

/* Carousel — horizontal swipe/scroll row with snap */
.pm-gallery--carousel {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:12px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--pm-primary) var(--pm-surface2);
}
.pm-gallery--carousel::-webkit-scrollbar { height:8px; }
.pm-gallery--carousel::-webkit-scrollbar-thumb { background:var(--pm-primary); border-radius:8px; }
.pm-gallery--carousel .pm-tile {
  flex:0 0 auto; width:calc((100% - (var(--pm-gcols,4) - 1) * 12px) / var(--pm-gcols,4));
  aspect-ratio:1/1; scroll-snap-align:start;
}

/* Responsive: collapse the two-column grids on small screens */
@media (max-width: 860px) {
  .pm-hero-grid,
  .pm-about-grid,
  .pm-contact-grid { grid-template-columns:1fr !important; }
  .pm-stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .pm-services-grid,
  .pm-steps-grid { grid-template-columns:1fr !important; }
  .pm-footer-grid { grid-template-columns:1fr !important; }
  .pm-hero-logo { width:clamp(200px,70vw,360px) !important; }
  /* Gallery mobile: 2-up grid/masonry, ~1.3 tiles for the carousel */
  .pm-gallery--grid { grid-template-columns:repeat(2,1fr) !important; }
  .pm-gallery--masonry { column-count:2 !important; }
  .pm-gallery--carousel .pm-tile { width:72% !important; }
  .pm-stage-main .pm-tile { aspect-ratio:4/3; }
  .pm-stage-nav { width:40px; height:40px; font-size:24px; }
  .pm-thumb { width:76px; }
}
@media (max-width: 480px) {
  .pm-gallery--masonry { column-count:1 !important; }
  .pm-gallery--carousel .pm-tile { width:84% !important; }
}

/* WordPress admin bar offset for the sticky header */
.admin-bar header.pm-header { top:32px; }
@media screen and (max-width:782px){ .admin-bar header.pm-header { top:46px; } }