/*
 Theme Name:   alayer.ai Child
 Theme URI:    https://alayer.ai
 Description:  Child theme for alayer.ai — brand color update aligned to logo palette
 Author:       alayer.ai
 Author URI:   https://alayer.ai
 Template:     alayer-theme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  alayer-child
*/

/*
 * ─────────────────────────────────────────────────────────
 * HOW TO FIND YOUR PARENT THEME SLUG:
 * WordPress Admin → Appearance → Themes → click your active
 * theme → the slug is in the URL: ?theme=SLUG_IS_HERE
 * Replace REPLACE_WITH_PARENT_THEME_SLUG above with that value
 * ─────────────────────────────────────────────────────────
 *
 * LOGO PALETTE
 * ─────────────────────────────────────────────────────────
 * Navy primary        #0d1f42
 * Navy deep           #0a1836
 * Navy mid            #1a3a6e
 * Teal                #1d7a9a
 * Green (top layer)   #2e9b5a
 * Green deep          #1a6e3a
 * Gold ring           #b8860b
 * Gold mid            #d4a017
 * Gold light          #f5d060
 * Text on dark        #dde4f4
 * Text muted          #8a97b8
 * ─────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════
   1. CSS VARIABLES
   ══════════════════════════════════════════════ */
:root {
  --c-navy:          #0d1f42;
  --c-navy-deep:     #0a1836;
  --c-navy-mid:      #1a3a6e;
  --c-navy-light:    #3a6bc4;
  --c-teal:          #1d7a9a;
  --c-green:         #2e9b5a;
  --c-green-deep:    #1a6e3a;
  --c-gold:          #b8860b;
  --c-gold-mid:      #d4a017;
  --c-gold-light:    #f5d060;
  --c-text-dark:     #0d1f42;
  --c-text-light:    #dde4f4;
  --c-text-muted:    #8a97b8;
  --c-bg-light:      #f0f3f8;
  --c-bg-white:      #ffffff;
  --c-border:        rgba(29, 122, 154, 0.25);

  /* Typography */
  --font-primary:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       'DM Mono', 'Fira Code', monospace;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(13, 31, 66, 0.08);
  --shadow-md:  0 6px 24px rgba(13, 31, 66, 0.12);
  --shadow-lg:  0 16px 48px rgba(13, 31, 66, 0.18);
}

/* ══════════════════════════════════════════════
   2. GOOGLE FONTS IMPORT
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════
   3. BASE RESET & BODY
   ══════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary) !important;
  color: var(--c-text-dark) !important;
  background-color: var(--c-bg-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════
   4. TYPOGRAPHY
   ══════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
  font-weight: 300 !important;
  color: var(--c-navy) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem) !important; }

p {
  font-family: var(--font-primary) !important;
  line-height: 1.7 !important;
  color: #3a4a6a !important;
}

strong, b {
  font-weight: 600 !important;
  color: var(--c-navy) !important;
}

a {
  color: var(--c-teal) !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

a:hover {
  color: var(--c-gold) !important;
}

code, pre, .mono {
  font-family: var(--font-mono) !important;
}

/* ══════════════════════════════════════════════
   5. HEADER & NAVIGATION
   ══════════════════════════════════════════════ */
header,
.site-header,
#masthead,
.header-wrap,
.nav-wrapper,
.navbar {
  background-color: var(--c-navy) !important;
  border-bottom: 1px solid var(--c-navy-mid) !important;
  box-shadow: 0 2px 16px rgba(10, 24, 54, 0.3) !important;
}

/* Site title / logo text fallback */
.site-title a,
.site-title {
  color: var(--c-text-light) !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em !important;
}

/* Nav links */
.nav-menu a,
.menu-item a,
.main-navigation a,
header nav a {
  color: var(--c-text-light) !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  padding: 6px 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}

.nav-menu a:hover,
.menu-item a:hover,
.main-navigation a:hover {
  color: var(--c-gold-light) !important;
  border-bottom-color: var(--c-gold) !important;
}

.current-menu-item > a,
.current_page_item > a {
  color: var(--c-gold-light) !important;
  border-bottom-color: var(--c-gold) !important;
}

/* Mobile hamburger */
.menu-toggle,
.hamburger {
  color: var(--c-text-light) !important;
}

/* ══════════════════════════════════════════════
   6. HERO SECTION
   ══════════════════════════════════════════════ */
.hero,
.hero-section,
.home-banner,
.page-hero,
.hero-wrap {
  background: linear-gradient(
    140deg,
    var(--c-navy-deep)   0%,
    var(--c-navy)        45%,
    #0f2a58              80%,
    #102240              100%
  ) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle geometric texture on hero */
.hero::before,
.hero-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(29,122,154,0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(46,155,90,0.08) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

.hero h1,
.hero-section h1,
.hero .title {
  color: var(--c-bg-white) !important;
  font-weight: 200 !important;
}

.hero h1 em,
.hero h1 strong {
  color: var(--c-gold-light) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.hero p,
.hero-section p,
.hero .subtitle {
  color: var(--c-text-muted) !important;
}

/* ══════════════════════════════════════════════
   7. BUTTONS
   ══════════════════════════════════════════════ */

/* Primary */
.btn,
.button,
.btn-primary,
a.btn-primary,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
[class*="cta-btn"],
[class*="cta-button"] {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--c-navy) !important;
  color: var(--c-text-light) !important;
  font-family: var(--font-primary) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 12px rgba(13, 31, 66, 0.3) !important;
}

.btn:hover,
.button:hover,
.btn-primary:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--c-navy-mid) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(13, 31, 66, 0.4) !important;
  color: var(--c-text-light) !important;
}

/* Secondary / outline */
.btn-secondary,
.button-secondary,
.btn-outline,
a.btn-secondary {
  background-color: transparent !important;
  color: var(--c-gold-light) !important;
  border: 1.5px solid var(--c-gold) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.btn-outline:hover {
  background-color: var(--c-navy) !important;
  color: var(--c-navy-deep) !important;
  transform: translateY(-2px) !important;
}

/* Ghost / text button on dark */
.btn-ghost {
  background: transparent !important;
  color: var(--c-text-muted) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

.btn-ghost:hover {
  border-color: var(--c-teal) !important;
  color: var(--c-text-light) !important;
}

/* ══════════════════════════════════════════════
   8. CARDS & SERVICE BLOCKS
   ══════════════════════════════════════════════ */
.card,
.service-card,
.feature-box,
.icon-box,
[class*="service-item"],
[class*="feature-item"] {
  background: var(--c-bg-white) !important;
  border: 1px solid rgba(26, 58, 110, 0.1) !important;
  border-top: 3px solid var(--c-teal) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-top-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

.card:hover,
.service-card:hover,
.feature-box:hover,
.icon-box:hover {
  border-top-color: var(--c-gold) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

.card h3,
.service-card h3,
.feature-box h3,
.icon-box h3 {
  color: var(--c-navy) !important;
}

/* ══════════════════════════════════════════════
   9. SECTION BACKGROUNDS
   ══════════════════════════════════════════════ */

/* Light alternate sections */
.section-alt,
.bg-light,
.section-light {
  background-color: var(--c-bg-light) !important;
}

/* Dark sections */
.section-dark,
.bg-dark,
.dark-bg {
  background-color: var(--c-navy) !important;
}

.section-dark *,
.bg-dark *,
.dark-bg * {
  color: var(--c-text-light) !important;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
  color: var(--c-bg-white) !important;
}

/* Deep navy sections (CTA, footer CTA) */
.section-navy,
.cta-section {
  background: linear-gradient(135deg, var(--c-navy-deep), var(--c-navy)) !important;
}

/* ══════════════════════════════════════════════
   10. STAT / METRIC CALLOUTS
   ══════════════════════════════════════════════ */
.stat-number,
.metric-number,
.counter,
[class*="stat-value"],
[class*="metric-value"] {
  color: var(--c-gold) !important;
  font-weight: 700 !important;
  font-family: var(--font-primary) !important;
  letter-spacing: -0.03em !important;
}

.stat-label,
.metric-label {
  color: var(--c-text-muted) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════
   11. BADGE / PILL / FRAMEWORK TAGS
   ══════════════════════════════════════════════ */
.badge,
.pill,
.tag,
.label,
[class*="badge"],
[class*="cert-tag"],
[class*="framework-tag"] {
  display: inline-flex !important;
  align-items: center !important;
  background-color: rgba(26, 58, 110, 0.08) !important;
  color: var(--c-navy-mid) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 100px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  letter-spacing: 0.04em !important;
}

/* On dark backgrounds */
.dark-bg .badge,
.dark-bg .pill,
.dark-bg .tag,
.section-dark .badge {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--c-text-light) !important;
  border-color: rgba(29, 122, 154, 0.4) !important;
}

/* ══════════════════════════════════════════════
   12. PROCESS / STEPS SECTION
   ══════════════════════════════════════════════ */
.step-number,
.process-number,
[class*="step-num"] {
  background-color: var(--c-navy) !important;
  color: var(--c-gold-light) !important;
  border: 2px solid var(--c-gold) !important;
  font-weight: 600 !important;
}

.step-title,
.process-title {
  color: var(--c-navy) !important;
}

/* ══════════════════════════════════════════════
   13. ARISTOTLE CODE BLOCK
   ══════════════════════════════════════════════ */
.code-block,
.terminal,
.aristotle-demo,
pre,
code {
  background-color: var(--c-navy-deep) !important;
  color: #a8d8c8 !important;
  border: 1px solid var(--c-navy-mid) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-mono) !important;
}

.code-block .highlight,
.terminal .success {
  color: var(--c-green) !important;
}

.code-block .warning,
.terminal .warn {
  color: var(--c-gold-light) !important;
}

/* ══════════════════════════════════════════════
   14. FORMS
   ══════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--font-primary) !important;
  border: 1.5px solid rgba(26, 58, 110, 0.2) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  color: var(--c-text-dark) !important;
  background: var(--c-bg-white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--c-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(29, 122, 154, 0.15) !important;
}

label {
  font-weight: 500 !important;
  color: var(--c-navy) !important;
  font-size: 0.875rem !important;
}

/* ══════════════════════════════════════════════
   15. FOOTER
   ══════════════════════════════════════════════ */
footer,
.site-footer,
#colophon {
  background-color: var(--c-navy-deep) !important;
  color: var(--c-text-muted) !important;
  border-top: 2px solid var(--c-gold) !important;
}

footer h3,
footer h4,
.site-footer h3,
.site-footer h4 {
  color: var(--c-text-light) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

footer a,
.site-footer a {
  color: var(--c-text-muted) !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--c-gold-light) !important;
}

.footer-bottom,
.copyright {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(138, 151, 184, 0.6) !important;
  font-size: 0.8rem !important;
}

/* ══════════════════════════════════════════════
   16. COOKIE BANNER (Complianz)
   ══════════════════════════════════════════════ */
.cc-window,
.cmplz-cookiebanner,
[class*="cookie-banner"],
[class*="consent-bar"] {
  background-color: var(--c-navy) !important;
  border-top: 2px solid var(--c-gold) !important;
  color: var(--c-text-light) !important;
  font-family: var(--font-primary) !important;
}

.cc-btn,
.cmplz-btn,
[class*="cookie-btn"] {
  background-color: var(--c-navy) !important;
  color: var(--c-navy-deep) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════
   17. SCROLLBAR
   ══════════════════════════════════════════════ */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--c-bg-light); }
::-webkit-scrollbar-thumb  { background: var(--c-navy-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gold); }

/* ══════════════════════════════════════════════
   18. TEXT SELECTION
   ══════════════════════════════════════════════ */
::selection {
  background-color: var(--c-navy) !important;
  color: var(--c-navy-deep) !important;
}

/* ══════════════════════════════════════════════
   19. UTILITY CLASSES
   ══════════════════════════════════════════════ */
.text-gold    { color: var(--c-gold) !important; }
.text-teal    { color: var(--c-teal) !important; }
.text-green   { color: var(--c-green) !important; }
.text-navy    { color: var(--c-navy) !important; }
.text-muted   { color: var(--c-text-muted) !important; }
.bg-navy      { background-color: var(--c-navy) !important; }
.bg-gold      { background-color: var(--c-navy) !important; }
.border-gold  { border-color: var(--c-gold) !important; }
.border-teal  { border-color: var(--c-teal) !important; }