/* ============================================================
   A&M Brand Blocks — Slim Brand Layer
   ------------------------------------------------------------
   Token-/Font-Quelle für alle Blocks dieses Plugins. Bewusst
   schlank gehalten — kein Avada-Override, keine
   .am-*-Helper-Class-Library (die lebt in der Avada-Variante
   des Brand-Layers).
   ============================================================ */


/* ------------------------------------------------------------
   FONTS – Roboto Variable, self-hosted
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}


/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --brand-primary:        #CC0000;
  --brand-primary-dark:   #990000;
  --brand-primary-glow:   #E8001F;
  --brand-primary-shade:  #7A0000;

  /* Neutrals */
  --navy:                 #1a2744;
  --ink:                  #1a1a1a;
  --ink-2:                #4a4a4a;
  --ink-3:                #7a7a7a;
  --line:                 #e8e6e1;
  --surface:              #f5f4f2;
  --surface-2:            #fafaf8;
  --white:                #ffffff;

  /* Semantic */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-on-dark:    #ffffff;
  --fg-on-dark-2:  rgba(255,255,255,0.65);
  --fg-on-dark-3:  rgba(255,255,255,0.4);
  --fg-accent:     var(--brand-primary);
  --bg-1:          var(--white);
  --bg-2:          var(--surface);
  --bg-3:          var(--surface-2);
  --bg-dark:       var(--ink);
  --bg-accent:     var(--brand-primary);
  --border-1:      var(--line);
  --border-2:      rgba(255,255,255,0.1);

  /* Type families */
  --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type roles – all headlines run Medium (500) */
  --t-display: 500 clamp(3rem, 5vw, 4.25rem)/1.05 var(--font-display);
  --t-h1:      500 clamp(2.5rem, 4vw, 3.5rem)/1.1 var(--font-display);
  --t-h2:      500 clamp(2rem, 3vw, 2.75rem)/1.15 var(--font-display);
  --t-h3:      500 1.5rem/1.3 var(--font-sans);
  --t-h4:      500 1.15rem/1.4 var(--font-sans);
  --t-lead:    400 1.125rem/1.65 var(--font-sans);
  --t-body:    400 1rem/1.7 var(--font-sans);
  --t-small:   400 0.875rem/1.55 var(--font-sans);
  --t-caption: 500 0.75rem/1.4 var(--font-sans);

  --t-eyebrow-size: 0.78rem;
  --t-eyebrow-tracking: 0.12em;

  /* Spacing */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px; --s-9: 80px; --s-10: 120px;

  --section-pad-desktop: 120px;
  --section-pad-tablet:   80px;
  --section-pad-mobile:   64px;

  --container-max: 1280px;
  --container-pad: 80px;

  /* Radii */
  --r-button: 100px;
  --r-card:  10px;
  --r-pill: 100px;
  --r-image:  8px;

  /* Shadows */
  --shadow-card:       0 4px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-cta:        0 4px 16px rgba(204,0,0,0.25);
  --shadow-cta-hover:  0 8px 24px rgba(204,0,0,0.30);
  --shadow-overlay:    0 20px 60px rgba(0,0,0,0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 400ms;
}


/* ------------------------------------------------------------
   MINIMAL BODY-RESET — alles Weitere kommt aus den Block-CSS
   ------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  /* Safety-Net: verhindert horizontale Scrollbars wenn ein alignfull-
     Block oder Sticky-Wrapper minimal über 100vw rausragt. `clip` statt
     `hidden` damit position:sticky-Ketten nicht brechen. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font: var(--t-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
a:hover { color: var(--brand-primary-dark); }

/* ------------------------------------------------------------
   FOCUS — kein Default-Browser-Outline bei Mausklick, dezenter
   Brand-Ring bei Keyboard-Nav (Accessibility erhalten).
   ------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Buttons + Pill-Links haben eigenen Radius, Offset passt sich an */
.ams-btn:focus-visible,
.ams-header__cta:focus-visible,
.ams-header__phone:focus-visible {
  outline-offset: 3px;
  border-radius: 100px;
}