/*
Theme Name:  Clean Simple
Theme URI:   https://brb.com
Author:      BRB
Author URI:  https://brb.com
Description: A minimal WordPress theme for clean content presentation. Dark header and footer frame a light content area.
Version:     0.0.9
Requires at least: 6.0
Tested up to: 6.7
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: clean-simple
Tags:        minimal, responsive, custom-colors, custom-logo, custom-menu, featured-images
*/

/* ============================================================
   CARTRIDGE GREY — DESIGN TOKENS
   Seven-token color system. All tokens defined here for
   use across current and future development phases.

   Surface layers (light to dark):
     --color-shell      primary page background
     --color-vent       elevated surfaces, cards
     --color-shadow     borders, dividers, muted UI
     --color-stripe     section headers, nav bars
     --color-faceplate  header, footer, body text on light

   Accent:
     --color-button-a   primary CTAs, active states
     --color-button-b   hover states on CTAs
   ============================================================ */

:root {

  /* --- Color Palette --- */
  --color-shell:     #C8C5C0;
  --color-vent:      #A8A6A1;
  --color-shadow:    #7A7975;
  --color-stripe:    #2E2E2E;
  --color-faceplate: #1A1A1A;
  --color-button-a:  #C8001A;
  --color-button-b:  #9C0014;

  /* --- Typography --- */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* --- Type Scale --- */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   24px;
  --text-xl:   36px;
  --text-2xl:  52px;
  --text-3xl:  72px;

  /* --- Spacing Scale --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* --- Layout --- */
  --navbar-h:      52px;
  --content-width: 820px;
  --wide-width:    1140px;
  --radius:        4px;

  /* --- Motion --- */
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --trans: 0.18s var(--ease);

}

/* ============================================================
   BASE RESET
   ============================================================ */

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

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

body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: 1.7;
  color:       var(--color-faceplate);
  background:  var(--color-faceplate);
  margin:      0;
  padding:     0;
}

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

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

a:hover,
a:focus {
  color:           var(--color-button-b);
  text-decoration: underline;
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.skip-link {
  position:        absolute;
  top:             -100%;
  left:            var(--space-4);
  background:      var(--color-button-a);
  color:           #ffffff;
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     600;
  padding:         var(--space-2) var(--space-4);
  border-radius:   var(--radius);
  z-index:         9999;
  transition:      top var(--trans);
  text-decoration: none;
}

.skip-link:focus {
  top:   var(--space-2);
  color: #ffffff;
}

/* ============================================================
   SCREEN READER TEXT
   ============================================================ */

.screen-reader-text {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* ============================================================
   WORDPRESS ALIGNMENT CLASSES
   ============================================================ */

.alignleft {
  float:         left;
  margin-right:  var(--space-5);
  margin-bottom: var(--space-4);
}

.alignright {
  float:         right;
  margin-left:   var(--space-5);
  margin-bottom: var(--space-4);
}

.aligncenter {
  display:       block;
  margin-left:   auto;
  margin-right:  auto;
  margin-bottom: var(--space-4);
}

.alignwide {
  max-width:    var(--wide-width);
  margin-left:  auto;
  margin-right: auto;
}

.alignfull {
  max-width:   100%;
  width:       100vw;
  margin-left: calc(50% - 50vw);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration:       0.01ms !important;
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior:           auto !important;
  }
}