/*
 * Theme Name:        CleanOut Junkers
 * Theme URI:         https://cleanoutjunkers.com
 * Author:            CleanOut Junkers
 * Author URI:        https://cleanoutjunkers.com
 * Description:       A dark luxury-industrial WordPress theme for CleanOut Junkers — junk removal and dumpster rental services.
 * Version:           1.0.0
 * Requires at least: 6.0
 * Tested up to:      6.5
 * Requires PHP:      8.0
 * License:           GNU General Public License v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       cleanout-junkers
 * Tags:              custom-background, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments
 */

/* =============================================================================
   DESIGN TOKEN SYSTEM — CSS CUSTOM PROPERTIES
   All visual values live here. Edit this file to retheme the entire site.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COLOR PALETTE
     ---------------------------------------------------------------------------
     Primary palette follows a dark luxury-industrial direction:
     deep charcoal backgrounds, warm off-white text, orange accent energy.
  --------------------------------------------------------------------------- */

  /* Base surfaces */
  --color-black:          #0a0a0a;   /* Deepest background, nav, footers        */
  --color-dark:           #0f0f0f;   /* Primary dark section background          */
  --color-dark-mid:       #161616;   /* Cards, panels on dark backgrounds        */
  --color-dark-surface:   #1e1e1e;   /* Input backgrounds, subtle separators     */
  --color-charcoal:       #2a2a2a;   /* Borders on dark, hover states            */

  /* Light surfaces */
  --color-light:          #f5f0eb;   /* Primary off-white section background     */
  --color-light-mid:      #ece8e2;   /* Secondary light background, cards        */
  --color-light-surface:  #faf8f5;   /* Lightest surface, form backgrounds       */
  --color-white:          #ffffff;

  /* Accent — Orange energy */
  --color-accent:         #f4621f;   /* Primary CTA, highlights, icons           */
  --color-accent-hover:   #e0521a;   /* Hover/active state for accent            */
  --color-accent-dark:    #c94310;   /* Pressed / deep accent                    */
  --color-accent-light:   #ff7a3d;   /* Lighter accent for glows, tags           */
  --color-accent-muted:   rgba(244, 98, 31, 0.12); /* Translucent accent tint    */

  /* Text */
  --color-text-primary:   #f5f0eb;   /* Body text on dark backgrounds            */
  --color-text-secondary: #a8a29e;   /* Muted / secondary text on dark           */
  --color-text-tertiary:  #6b6560;   /* Placeholder, disabled text on dark       */
  --color-text-dark:      #1a1714;   /* Body text on light backgrounds           */
  --color-text-dark-muted:#5a534e;   /* Muted text on light backgrounds          */

  /* Semantic */
  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-error:          #ef4444;
  --color-info:           #3b82f6;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     Bebas Neue — condensed slab display, all-caps power for headings.
     DM Sans     — geometric humanist, clean and readable for body copy.
  --------------------------------------------------------------------------- */

  --font-display:   'Bebas Neue', 'Impact', sans-serif;
  --font-body:      'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:    clamp(0.70rem,  0.68rem + 0.10vw, 0.75rem);  /* 11–12px  */
  --text-sm:    clamp(0.825rem, 0.80rem + 0.12vw, 0.875rem); /* 13–14px  */
  --text-base:  clamp(0.9375rem,0.92rem + 0.12vw, 1rem);     /* 15–16px  */
  --text-md:    clamp(1rem,     0.97rem + 0.15vw, 1.125rem); /* 16–18px  */
  --text-lg:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);  /* 18–20px  */
  --text-xl:    clamp(1.25rem,  1.10rem + 0.70vw, 1.5rem);   /* 20–24px  */
  --text-2xl:   clamp(1.5rem,   1.30rem + 1.00vw, 2rem);     /* 24–32px  */
  --text-3xl:   clamp(2rem,     1.70rem + 1.50vw, 2.75rem);  /* 32–44px  */
  --text-4xl:   clamp(2.5rem,   2.00rem + 2.50vw, 3.75rem);  /* 40–60px  */
  --text-5xl:   clamp(3rem,     2.40rem + 3.00vw, 5rem);     /* 48–80px  */
  --text-hero:  clamp(3.5rem,   2.80rem + 3.50vw, 6.5rem);   /* 56–104px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.10em;
  --tracking-widest: 0.20em;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------------------------------------------------------------------------
     SPACING SCALE
     8px base grid. Names reference the multiplier.
  --------------------------------------------------------------------------- */

  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-28:   7rem;      /* 112px */
  --space-32:   8rem;      /* 128px */

  /* Section vertical padding — fluid */
  --section-padding-sm:  clamp(3rem,   5vw,  5rem);    /* compact sections   */
  --section-padding-md:  clamp(4rem,   7vw,  7rem);    /* standard sections  */
  --section-padding-lg:  clamp(5rem,  10vw, 10rem);    /* hero/feature sections */

  /* ---------------------------------------------------------------------------
     LAYOUT
  --------------------------------------------------------------------------- */

  --container-max:    1320px;
  --container-wide:   1520px;
  --container-narrow: 860px;
  --container-px:     clamp(1rem, 4vw, 2.5rem); /* Horizontal gutter */

  /* Grid gaps */
  --gap-sm:  clamp(1rem,   2vw, 1.5rem);
  --gap-md:  clamp(1.5rem, 3vw, 2rem);
  --gap-lg:  clamp(2rem,   4vw, 3rem);

  /* Header */
  --header-height: 80px;

  /* ---------------------------------------------------------------------------
     BORDERS & RADIUS
  --------------------------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --border-thin:   1px solid;
  --border-medium: 2px solid;
  --border-thick:  3px solid;

  --border-dark:   1px solid rgba(255, 255, 255, 0.08);
  --border-light:  1px solid rgba(0, 0, 0, 0.10);
  --border-accent: 1px solid rgba(244, 98, 31, 0.35);

  /* ---------------------------------------------------------------------------
     SHADOWS
  --------------------------------------------------------------------------- */

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.30),
                 0 1px 2px rgba(0, 0, 0, 0.20);

  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.35),
                 0 2px 4px rgba(0, 0, 0, 0.20);

  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.45),
                 0 5px 10px rgba(0, 0, 0, 0.25);

  --shadow-xl:   0 20px 50px rgba(0, 0, 0, 0.55),
                 0 10px 20px rgba(0, 0, 0, 0.30);

  --shadow-inset:0 2px 8px rgba(0, 0, 0, 0.40) inset;

  /* Accent glow */
  --shadow-accent-sm:  0 2px 12px rgba(244, 98, 31, 0.25);
  --shadow-accent-md:  0 4px 25px rgba(244, 98, 31, 0.35);
  --shadow-accent-lg:  0 8px 40px rgba(244, 98, 31, 0.45);

  /* Card shadows */
  --shadow-card:       0 2px 20px rgba(0, 0, 0, 0.50),
                       0 1px 4px rgba(0, 0, 0, 0.30);

  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.65),
                       0 3px 12px rgba(0, 0, 0, 0.40);

  /* ---------------------------------------------------------------------------
     TRANSITIONS & ANIMATION
  --------------------------------------------------------------------------- */

  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base:  all var(--duration-base) var(--ease-out);
  --transition-color: color var(--duration-fast) var(--ease-out),
                      background-color var(--duration-fast) var(--ease-out),
                      border-color var(--duration-fast) var(--ease-out);

  /* ---------------------------------------------------------------------------
     GRADIENTS
  --------------------------------------------------------------------------- */

  /* Dark overlays for hero images */
  --gradient-hero:        linear-gradient(
                            135deg,
                            rgba(10, 10, 10, 0.92) 0%,
                            rgba(15, 15, 15, 0.75) 50%,
                            rgba(10, 10, 10, 0.85) 100%
                          );

  --gradient-hero-bottom: linear-gradient(
                            to top,
                            rgba(10, 10, 10, 1.00) 0%,
                            rgba(10, 10, 10, 0.60) 40%,
                            rgba(10, 10, 10, 0.00) 100%
                          );

  /* Accent gradients */
  --gradient-accent:      linear-gradient(135deg, #f4621f 0%, #e0521a 100%);
  --gradient-accent-h:    linear-gradient(to right, #f4621f 0%, #ff7a3d 100%);

  /* Dark surface gradients */
  --gradient-dark:        linear-gradient(180deg, #0f0f0f 0%, #161616 100%);
  --gradient-dark-card:   linear-gradient(145deg, #1e1e1e 0%, #161616 100%);

  /* Section dividers */
  --gradient-fade-down:   linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
  --gradient-fade-up:     linear-gradient(to top,    transparent 0%, rgba(0,0,0,0.6) 100%);

  /* ---------------------------------------------------------------------------
     Z-INDEX SCALE
  --------------------------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-toast:    500;

}

/* =============================================================================
   GLOBAL RESET & BASE STYLES
   A minimal, intentional reset. Not a kitchen-sink normalize.
   ============================================================================= */

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

html {
  font-size: 100%; /* 16px base */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      var(--weight-regular);
  line-height:      var(--leading-normal);
  color:            var(--color-text-dark);
  background-color: var(--color-dark);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-display);
  font-weight:  var(--weight-regular); /* Bebas Neue only has one weight */
  line-height:  var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: inherit;
}

p {
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-accent-hover);
}

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

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Focus styles — accessible, on-brand */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Selection color */
::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Scrollbar styling — webkit */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--color-charcoal);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* =============================================================================
   UTILITY CLASSES
   Single-purpose helpers used across all template parts.
   ============================================================================= */

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Section base */
.section {
  padding-block: var(--section-padding-md);
}

.section--sm {
  padding-block: var(--section-padding-sm);
}

.section--lg {
  padding-block: var(--section-padding-lg);
}

/* Dark/light section variants */
.section--dark {
  background-color: var(--color-dark);
  color: var(--color-text-primary);
}

.section--dark-mid {
  background-color: var(--color-dark-mid);
  color: var(--color-text-primary);
}

.section--light {
  background-color: var(--color-light);
  color: var(--color-text-dark);
}

.section--light-mid {
  background-color: var(--color-light-mid);
  color: var(--color-text-dark);
}

/* Section label (eyebrow text above heading) */
.section-label {
  display: inline-block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-3);
}

/* Section headings */
.section-title {
  font-size:      var(--text-4xl);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom:  var(--space-4);
}

.section-subtitle {
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  max-width:   60ch;
  margin-bottom: var(--space-8);
}

.section--light .section-subtitle {
  color: var(--color-text-dark-muted);
}

/* Text alignment helpers */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* Display helpers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accent text */
.text-accent {
  color: var(--color-accent);
}

/* Divider line */
.divider {
  width: 60px;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-8);
}

.divider--center {
  margin-inline: auto;
}

/* =============================================================================
   BUTTON SYSTEM
   All button variants defined in one place.
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height:    1;
  border-radius:  var(--radius-sm);
  border:         2px solid transparent;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     var(--transition-base);
  text-decoration: none;
}

/* Primary — solid orange */
.btn--primary {
  background: var(--gradient-accent);
  color:       var(--color-white);
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-accent-sm);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background:   var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow:   var(--shadow-accent-md);
  transform:    translateY(-2px);
  color:        var(--color-white);
}

.btn--primary:active {
  transform:  translateY(0);
  box-shadow: var(--shadow-accent-sm);
}

/* Secondary — outlined */
.btn--secondary {
  background:   transparent;
  color:        var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.30);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-accent);
  color:        var(--color-accent);
  background:   var(--color-accent-muted);
}

/* Ghost — text only */
.btn--ghost {
  background:   transparent;
  color:        var(--color-accent);
  border-color: transparent;
  padding-inline: var(--space-2);
}

.btn--ghost:hover {
  color:        var(--color-accent-hover);
  background:   var(--color-accent-muted);
}

/* Size variants */
.btn--sm {
  padding:   var(--space-3) var(--space-5);
  font-size: var(--text-sm);
}

.btn--lg {
  padding:   var(--space-5) var(--space-10);
  font-size: var(--text-xl);
}

.btn--xl {
  padding:   var(--space-6) var(--space-12);
  font-size: var(--text-2xl);
}

/* Full width */
.btn--block {
  width: 100%;
}

/* Icon-only */
.btn--icon {
  padding:       var(--space-3);
  border-radius: var(--radius-full);
  aspect-ratio:  1;
}

/* =============================================================================
   WordPress Required Styles
   These classes are expected by WordPress core and plugins.
   ============================================================================= */

/* Alignment */
.alignleft  { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-inline: auto; margin-block: var(--space-4); }
.alignwide  { margin-inline: calc(-1 * var(--container-px)); }
.alignfull  { margin-inline: calc(-50vw + 50%); width: 100vw; }

/* Captions */
.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  text-align:  center;
  margin-top:  var(--space-2);
}

/* Galleries */
.gallery { display: grid; gap: var(--space-3); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Sticky post */
.sticky { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); }

/* Screen reader text */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}