/*
Theme Name: AgenticPress (Astra Child)
Theme URI: https://agenticpress.ai
Description: Universal AgenticPress design system. Locked-in primitives only: typography, layout, spacing, cards, footer. Per-client tokens (colors, fonts, logo) live in Astra Customizer.
Author: AgenticPress
Author URI: https://agenticpress.ai
Template: astra
Version: 0.3.0
Text Domain: astra-child
*/

/* ============================================================
   DESIGN TOKENS
   Defaults below get overridden per-client via Astra Customizer
   "Additional CSS" using the same variable names.
   ============================================================ */

:root {
  /* Brand color slots : override per client */
  --ap-primary:        #c4a070;
  --ap-primary-dark:   #a8845a;
  --ap-primary-light:  #ebd9bb;
  --ap-accent:         #6e828e;
  --ap-dark:           #1a1a1a;
  --ap-mid:            #6b6b6b;
  --ap-mid-soft:       #9a9a9a;
  --ap-light:          #fafafa;
  --ap-bg-alt:         #f5f0e8;
  --ap-border:         rgba(0,0,0,0.08);

  /* Typography : override per client */
  --ap-font-heading:   'Playfair Display', Georgia, serif;
  --ap-font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --ap-container:      1200px;
  --ap-container-tight: 880px;
  --ap-container-wide: 1440px;
  --ap-gutter:         clamp(20px, 4vw, 48px);

  /* Section rhythm */
  --ap-section-y:      clamp(64px, 8vw, 120px);
  --ap-section-y-sm:   clamp(48px, 6vw, 80px);

  /* Spacing scale */
  --ap-space-xs:       8px;
  --ap-space-sm:       16px;
  --ap-space-md:       24px;
  --ap-space-lg:       40px;
  --ap-space-xl:       64px;
  --ap-space-2xl:      96px;

  /* Radius / shadow / motion */
  --ap-radius-sm:      4px;
  --ap-radius-md:      8px;
  --ap-radius-lg:      16px;
  --ap-shadow-sm:      0 2px 8px rgba(0,0,0,0.06);
  --ap-shadow-md:      0 8px 24px rgba(0,0,0,0.08);
  --ap-shadow-lg:      0 16px 48px rgba(0,0,0,0.12);
  --ap-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ap-dur:            300ms;
}

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

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ============================================================
   TYPOGRAPHY
   Per CLAUDE.md: H1 clamp(34-56), H2 clamp(26-38), H3 20-22, body 15-16.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--ap-font-heading);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.5vw, 38px); }
h3 { font-size: clamp(20px, 2vw, 22px); }
h4 { font-size: 18px; }

body, p, li, .entry-content {
  font-family: var(--ap-font-body);
  font-size: clamp(15px, 1vw, 16px);
  line-height: 1.7;
  color: var(--ap-dark);
}

/* Eyebrow / kicker */
.ap-eyebrow,
.eyebrow {
  font-family: var(--ap-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-primary);
}

/* ============================================================
   LAYOUT : CONTAINERS & SECTIONS
   ============================================================ */

.ap-container,
.ast-container {
  max-width: var(--ap-container);
  margin-inline: auto;
  padding-inline: var(--ap-gutter);
}

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

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

.ap-section--light { background: var(--ap-light); color: var(--ap-dark); }
.ap-section--alt   { background: var(--ap-bg-alt); color: var(--ap-dark); }
.ap-section--dark  { background: var(--ap-dark);  color: rgba(255,255,255,0.85); }

.ap-section--dark h1, .ap-section--dark h2,
.ap-section--dark h3, .ap-section--dark h4,
.ap-section--dark h5, .ap-section--dark h6 { color: #fff; }

/* ============================================================
   CARDS : Locked-in: hover lift + shadow transition
   ============================================================ */

.ap-card {
  background: #fff;
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-sm);
  transition: transform var(--ap-dur) var(--ap-ease),
              box-shadow var(--ap-dur) var(--ap-ease);
  overflow: hidden;
}

.ap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ap-shadow-md);
}

.ap-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.ap-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ap-ease);
}
.ap-card:hover .ap-card__media img { transform: scale(1.04); }

.ap-card__body { padding: var(--ap-space-lg); }

/* ============================================================
   BUTTONS
   Only styles the .ap-btn utility class for places that need a
   plain HTML button (forms, custom CTAs). Page-builder buttons
   (Spectra, Kadence, Astra Pro) keep their per-block configuration.
   ============================================================ */

.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--ap-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ap-primary);
  color: #fff;
  border: 1px solid var(--ap-primary);
  border-radius: var(--ap-radius-sm);
  cursor: pointer;
  transition: all var(--ap-dur) var(--ap-ease);
}

.ap-btn:hover {
  background: var(--ap-primary-dark);
  border-color: var(--ap-primary-dark);
  color: #fff;
}

.ap-btn--ghost {
  background: transparent;
  color: var(--ap-primary);
}
.ap-btn--ghost:hover {
  background: var(--ap-primary);
  color: #fff;
}

/* ============================================================
   FORMS
   ============================================================ */

input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], input[type="number"],
textarea, select {
  font-family: var(--ap-font-body);
  font-size: 15px;
  padding: 12px 16px;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
  color: var(--ap-dark);
  transition: border-color var(--ap-dur) var(--ap-ease);
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-primary) 20%, transparent);
}

/* ============================================================
   FOOTER : Approved 4-column dark template (April 2026)
   Apply by adding class .ap-footer to the footer container.
   ============================================================ */

.ap-footer {
  background: #111;
  color: rgba(255,255,255,0.6);
  padding-block: 80px 0;
}

.ap-footer a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color var(--ap-dur) var(--ap-ease);
}
.ap-footer a:hover { color: #fff; }

.ap-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  max-width: var(--ap-container);
  margin-inline: auto;
  padding-inline: var(--ap-gutter);
  padding-bottom: 64px;
}

.ap-footer__col h4,
.ap-footer__col .ap-footer__title {
  font-family: var(--ap-font-heading);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ap-primary);
  margin-bottom: 20px;
}

.ap-footer__brand img,
.ap-footer__logo {
  max-height: 60px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 16px;
}

.ap-footer__disclaimer {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-top: 16px;
  line-height: 1.6;
}

.ap-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px var(--ap-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--ap-container);
  margin-inline: auto;
  font-size: 13px;
  color: rgba(255,255,255,0.3);
}

.ap-footer__social {
  display: flex; gap: 16px;
}
.ap-footer__social svg {
  width: 18px; height: 18px;
  fill: currentColor;
  transition: color var(--ap-dur) var(--ap-ease);
}
.ap-footer__social a:hover svg { color: var(--ap-primary); }

@media (max-width: 768px) {
  .ap-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .ap-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   ANTI-PATTERN PREVENTION (CLAUDE.md)
   These are guardrails : apply as needed.
   ============================================================ */

/* Hide stray emoji that snuck into copy : designers should use SVG. */
.ap-no-emoji { font-feature-settings: "liga" 0; }

/* Ensure embeds (Matterport, IDX, video) sit in a styled container. */
.ap-embed-wrap {
  border-radius: var(--ap-radius-lg);
  overflow: hidden;
  box-shadow: var(--ap-shadow-sm);
}

/* ============================================================
   ASTRA-SPECIFIC TWEAKS
   Map Astra's CSS variables to ours so customizer settings flow through.
   ============================================================ */

:root {
  /* When Astra's global colors are set, surface them via our slots
     so per-block CSS can reference --ap-* uniformly. */
  --ap-primary: var(--ast-global-color-0, #c4a070);
  --ap-dark:    var(--ast-global-color-3, #1a1a1a);
}