/*
Theme Name: DET3D Modern Theme
Theme URI: https://detroit3d.com/
Author: DET3D
Author URI: https://detroit3d.com/
Description: A fresh, modern, technical WordPress theme for DET3D (Detroit3D.com) — a Detroit-area design and drone services company offering drone mapping, 3D scanning, photogrammetry, aerial imaging, interactive 3D, and UX/product design. Cloud/sky-inspired palette with sparing orange accents, subtle motion, and a strong design-token system. Block-editor compatible, accessibility-first, and performance-minded.
Version: 1.1.4
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: det3d
Tags: business, portfolio, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, editor-style, threaded-comments, translation-ready, full-width-template, two-columns, right-sidebar
*/

/* =========================================================================
   DET3D Modern Theme — Foundation layer
   This file holds the design tokens (CSS custom properties), CSS reset,
   base typography, and accessibility primitives. Component, layout, and
   homepage section styles live in /assets/css/main.css.
   See /docs/DESIGN_SYSTEM.md for the full system documentation.
   ========================================================================= */

/* ----------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* --- Color: cloud / sky palette (harmonized to the DET3D logo) --- */
  /* Logo blue #72cbf2 (hue ~200) and logo orange #fb7a41 (hue ~18) are */
  /* a near-complementary pair. Neutrals carry a slight cool/blue tint  */
  /* so the whole system reads as one family. See docs/DESIGN_SYSTEM.md.*/
  --det3d-white:        #ffffff;
  --det3d-cloud-50:     #f4f9fd; /* page background, faint sky tint */
  --det3d-cloud-100:    #e7f1f9;
  --det3d-cloud-200:    #d7e7f2; /* borders */
  --det3d-cloud-300:    #b6d1e4;
  --det3d-sky-100:      #e3f4fd;
  --det3d-sky-300:      #9bd8f6;
  --det3d-sky-400:      #72cbf2; /* LOGO BLUE */
  --det3d-sky-500:      #3aa9e6; /* primary interactive blue */
  --det3d-sky-700:      #1c6c9c; /* links / deep sky (AA on white) */
  --det3d-slate-500:    #5a6b7e; /* muted text (cool blue-grey) */
  --det3d-slate-700:    #324559; /* secondary body text */
  --det3d-slate-900:    #14202d; /* primary text, dark sections */
  --det3d-ink:          #0c1620; /* headings, footer bg */

  /* --- Accent: DET3D orange (use sparingly) ----------------------- */
  --det3d-orange-400:   #fd9762;
  --det3d-orange-500:   #fb7a41; /* LOGO ORANGE — accent, icons, highlights */
  --det3d-orange-600:   #e35d22; /* CTA / hover (white-text contrast) */
  --det3d-orange-700:   #c64c17; /* deep accent for text on light */

  /* --- Semantic tokens -------------------------------------------- */
  --det3d-bg:                var(--det3d-cloud-50);
  --det3d-bg-elevated:       var(--det3d-white);
  --det3d-bg-sunken:         var(--det3d-cloud-100);
  --det3d-surface-glass:     rgba(255, 255, 255, 0.65);
  --det3d-text:              var(--det3d-slate-900);
  --det3d-text-muted:        var(--det3d-slate-500);
  --det3d-heading:           var(--det3d-ink);
  --det3d-link:              var(--det3d-sky-700);
  --det3d-link-hover:        var(--det3d-orange-600);
  --det3d-border:            var(--det3d-cloud-200);
  --det3d-border-strong:     var(--det3d-cloud-300);
  --det3d-hairline:          rgba(58, 169, 230, 0.32); /* soft logo-blue separator lines */
  --det3d-hairline-light:    rgba(114, 203, 242, 0.32); /* blue separators on dark */
  --det3d-accent:            var(--det3d-orange-500);
  --det3d-accent-hover:      var(--det3d-orange-600);
  --det3d-focus-ring:        var(--det3d-sky-500);

  /* --- Typography ------------------------------------------------- */
  --det3d-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --det3d-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --det3d-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Fluid type scale (clamp: min, fluid, max) */
  --det3d-text-xs:   0.78rem;
  --det3d-text-sm:   0.875rem;
  --det3d-text-base: 1rem;
  --det3d-text-lg:   1.125rem;
  --det3d-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --det3d-text-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --det3d-text-3xl:  clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --det3d-text-4xl:  clamp(2.4rem, 1.8rem + 3vw, 4rem);

  --det3d-leading-tight: 1.12;
  --det3d-leading-snug:  1.3;
  --det3d-leading-normal:1.65;
  --det3d-tracking-tight: -0.02em;
  --det3d-tracking-wide:  0.08em;
  --det3d-weight-normal: 400;
  --det3d-weight-medium: 500;
  --det3d-weight-semibold: 600;
  --det3d-weight-bold: 700;

  /* --- Spacing scale (8px base) ----------------------------------- */
  --det3d-space-1:  0.25rem;
  --det3d-space-2:  0.5rem;
  --det3d-space-3:  0.75rem;
  --det3d-space-4:  1rem;
  --det3d-space-5:  1.5rem;
  --det3d-space-6:  2rem;
  --det3d-space-7:  3rem;
  --det3d-space-8:  4rem;
  --det3d-space-9:  6rem;
  --det3d-space-10: 8rem;

  /* --- Layout ----------------------------------------------------- */
  --det3d-container:      1200px;
  --det3d-container-wide: 1440px;
  --det3d-container-narrow: 760px;
  --det3d-gutter: clamp(1rem, 4vw, 2.5rem);
  --det3d-section-y: clamp(3.5rem, 7vw, 7rem);

  /* --- Border radius ---------------------------------------------- */
  --det3d-radius-sm:  6px;
  --det3d-radius-md:  10px;
  --det3d-radius-lg:  16px;
  --det3d-radius-xl:  24px;
  --det3d-radius-pill: 999px;

  /* --- Shadows / elevation ---------------------------------------- */
  --det3d-shadow-xs: 0 1px 2px rgba(24, 34, 46, 0.06);
  --det3d-shadow-sm: 0 2px 8px rgba(24, 34, 46, 0.07);
  --det3d-shadow-md: 0 8px 24px rgba(24, 34, 46, 0.10);
  --det3d-shadow-lg: 0 18px 48px rgba(24, 34, 46, 0.14);
  --det3d-shadow-accent: 0 8px 22px rgba(251, 122, 65, 0.32);

  /* --- Motion ----------------------------------------------------- */
  --det3d-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --det3d-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --det3d-dur-fast: 140ms;
  --det3d-dur: 240ms;
  --det3d-dur-slow: 520ms;

  /* --- Z-index ---------------------------------------------------- */
  --det3d-z-header: 100;
  --det3d-z-overlay: 200;
  --det3d-z-skip: 300;
}

/* ----------------------------------------------------------------------
   2. RESET / NORMALIZE (lightweight, modern)
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--det3d-bg);
  color: var(--det3d-text);
  font-family: var(--det3d-font-sans);
  font-size: var(--det3d-text-base);
  line-height: var(--det3d-leading-normal);
  font-weight: var(--det3d-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }

/* ----------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--det3d-font-display);
  color: var(--det3d-heading);
  font-weight: var(--det3d-weight-bold);
  line-height: var(--det3d-leading-tight);
  letter-spacing: var(--det3d-tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--det3d-text-4xl); }
h2 { font-size: var(--det3d-text-3xl); }
h3 { font-size: var(--det3d-text-2xl); }
h4 { font-size: var(--det3d-text-xl); }
h5 { font-size: var(--det3d-text-lg); }
h6 {
  font-size: var(--det3d-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--det3d-tracking-wide);
  color: var(--det3d-text-muted);
}

p { line-height: var(--det3d-leading-normal); }
p, ul, ol, blockquote { max-width: 72ch; }

a {
  color: var(--det3d-link);
  text-decoration: none;
  transition: color var(--det3d-dur) var(--det3d-ease);
}
a:hover { color: var(--det3d-link-hover); }

strong, b { font-weight: var(--det3d-weight-semibold); }
code, pre, kbd { font-family: var(--det3d-font-mono); font-size: 0.9em; }

blockquote {
  border-left: 3px solid var(--det3d-accent);
  padding-left: var(--det3d-space-5);
  color: var(--det3d-slate-700);
  font-size: var(--det3d-text-lg);
}

/* Separators: theme <hr> and the WordPress separator block, in soft logo-blue
   (overrides the block's default dark currentColor line). */
hr,
.wp-block-separator:not(.is-style-dots) {
  border: 0;
  height: 1px;
  color: transparent;
  background-color: transparent;
  background-image: linear-gradient(90deg, transparent, var(--det3d-hairline) 18%, var(--det3d-hairline) 82%, transparent);
  opacity: 1;
  margin: var(--det3d-space-7) 0;
}
/* Keep the dotted separator style legible and on-brand */
.wp-block-separator.is-style-dots::before { color: var(--det3d-sky-500); }

/* ----------------------------------------------------------------------
   4. ACCESSIBILITY PRIMITIVES
   ---------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--det3d-focus-ring);
  outline-offset: 2px;
  border-radius: var(--det3d-radius-sm);
}
/* Remove the default ring only where we provide :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--det3d-white);
  clip: auto !important;
  clip-path: none;
  color: var(--det3d-slate-900);
  display: block;
  height: auto;
  left: 5px;
  top: 5px;
  padding: 12px 20px;
  width: auto;
  z-index: var(--det3d-z-skip);
  border-radius: var(--det3d-radius-md);
  box-shadow: var(--det3d-shadow-md);
}

.det3d-skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: var(--det3d-slate-900);
  color: var(--det3d-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--det3d-radius-md);
  z-index: var(--det3d-z-skip);
  transition: top var(--det3d-dur) var(--det3d-ease);
}
.det3d-skip-link:focus { top: 12px; color: var(--det3d-white); }

/* Respect reduced motion globally; section-level overrides also exist */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* WordPress alignment helpers used by classic + block content */
.alignwide { /* fully styled in main.css within .det3d-prose */ }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 var(--det3d-space-5) var(--det3d-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--det3d-space-4) var(--det3d-space-5); }
.wp-caption-text, .wp-block-image figcaption {
  font-size: var(--det3d-text-sm);
  color: var(--det3d-text-muted);
  margin-top: var(--det3d-space-2);
}
.sticky, .gallery-caption, .bypostauthor { /* required WP classes */ }