/*======================================
Theme Name: HEYDAY-Framework
Description: This is a child theme that does not contain any design settings
Version: 1.0
Author: Christoph
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/* ==========================================================
   Christoph.css — lightweight design-token starter for Divi 5
   Purpose: use Divi for layout/design, CSS variables for reusable values
   Usage in Divi fields: var(--text-card-title), var(--space-md), etc.
   ========================================================== */

:root {
  /* ------------------------------
     BRAND COLORS
     Adjust per project
	  --color-primary: #24313d;

  ------------------------------ */
  --color-primary: #0058cf;
  --color-primary-dark: #941616;
  --color-secondary: #e6f8ff;
  --color-accent-1: #be1c1c;
  --color-accent-2: #0058cf;  	
  --color-dark: #24313d;
  --color-text: #2d3748;
  --color-muted: #64748b;
  --color-light: #f5f8fb;
  --color-white: #ffffff;
  --color-border: #dbe3ea;
	
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);

  /* ------------------------------
     TYPOGRAPHY SCALE
     Use these directly in Divi font-size fields
  ------------------------------ */
  /* ------------------------------
     FONT SIZE HERO
  ------------------------------ */
  --text-hero-h1: clamp(3rem, 2.55rem + 1.2vw, 3.75rem);   /* 48–60px */
  --text-hero-h2: clamp(2.25rem, 2rem + 0.8vw, 2.75rem);    /* 36–44px */
  --text-hero-h3: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem); /* 20–24px */
  --text-hero-p:  clamp(2.6rem, 2.1rem + 2vw, 4.25rem);
  --heading-hero-font: "Montserrat", sans-serif;
  --heading-hero-weight: 600;
  --heading-hero-line-height: 1.1;
  --heading-hero-letter-spacing: -0.015em;
  --heading-hero-margin-bottom: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
  
	
	
  --text-page-title: clamp(2.25rem, 1.9rem + 1.4vw, 3.5rem);
  --text-section-title: clamp(1.9rem, 1.55rem + 1vw, 2.75rem);
  --text-subtitle: clamp(1.25rem, 1.1rem + .45vw, 1.65rem);
  --text-card-title: clamp(1.25rem, 1.12rem + .35vw, 1.55rem);
  --text-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --text-small: clamp(.875rem, .84rem + .12vw, .975rem);
  --text-button: clamp(.95rem, .9rem + .15vw, 1.05rem);
  --text-eyebrow: clamp(.78rem, .74rem + .1vw, .875rem);

  /* Optional adjustments */
  --text-card-title-smaller: calc(var(--text-card-title) * .92);
  --text-card-title-larger: calc(var(--text-card-title) * 1.08);
  --text-body-smaller: calc(var(--text-body) * .92);
  --text-body-larger: calc(var(--text-body) * 1.08);

  /* ------------------------------
     FONT WEIGHTS
  ------------------------------ */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ------------------------------
     LINE HEIGHTS
  ------------------------------ */
  --lh-tight: 1.1;
  --lh-heading: 1.18;
  --lh-subtitle: 1.35;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  /* ------------------------------
     LETTER SPACING
  ------------------------------ */
  --ls-tight: -0.03em;
  --ls-heading: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.12em;

  /* ------------------------------
     SPACING SCALE
     Use for padding/margins/gaps in Divi fields
  ------------------------------ */
  --space-2xs: clamp(.25rem, .2rem + .2vw, .375rem);
  --space-xs: clamp(.5rem, .45rem + .25vw, .75rem);
  --space-sm: clamp(.75rem, .65rem + .35vw, 1rem);
  --space-md: clamp(1rem, .85rem + .55vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + .9vw, 2.25rem);
  --space-xl: clamp(2.25rem, 1.7rem + 1.7vw, 3.75rem);
  --space-2xl: clamp(3rem, 2.2rem + 2.6vw, 5.5rem);
  --space-section: clamp(4rem, 3rem + 3vw, 7rem);

  /* ------------------------------
     WIDTHS
  ------------------------------ */
  --width-content: 1320px;
  --width-narrow: 860px;
  --width-text: 720px;
  --width-card-text: 88%;

  /* ------------------------------
     RADIUS
  ------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ------------------------------
     SHADOWS
  ------------------------------ */
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-card: 0 14px 36px rgba(0, 0, 0, .10);
  --shadow-card-hover: 0 22px 48px rgba(0, 0, 0, .14);
  --shadow-icon: 0 10px 24px rgba(0, 0, 0, .16);
  --shadow-hero: 0 24px 60px rgba(0, 0, 0, .22);

  /* ------------------------------
     BORDERS
  ------------------------------ */
  --border-thin: 1px solid var(--color-border);
  --border-icon: 3px solid var(--color-white);

  /* ------------------------------
     MOTION
  ------------------------------ */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 420ms ease;
  --hover-lift: -6px;
  --hover-image-scale: 1.03;
  --hover-arrow-shift: .35rem;

  /* ------------------------------
     SERVICE CARD TOKENS
  ------------------------------ */
  --service-card-radius: var(--radius-lg);
  --service-card-bg: var(--color-white);
  --service-card-shadow: var(--shadow-card);
  --service-card-shadow-hover: var(--shadow-card-hover);
  --service-icon-size: 120px;
  --service-icon-svg-size: 64px;
  --service-icon-bg: var(--color-primary);
  --service-icon-border: var(--border-icon);
  --service-icon-shadow: var(--shadow-icon);
  --service-icon-overlap: -60px;
}

/* ==========================================================
   OPTIONAL UTILITY CLASSES
   Add these classes to Divi modules/groups when helpful.
   They are optional; you can also use variables directly in Divi fields.
   ========================================================== */

.text-hero {
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--weight-extrabold);
  color: var(--color-white);
}

.text-section-title {
  font-size: var(--text-section-title);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
}

.text-card-title {
  font-size: var(--text-card-title);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  color: var(--color-text);
}

.text-small {
  font-size: var(--text-small);
  line-height: var(--lh-body);
  color: var(--color-muted);
}

.text-eyebrow {
  font-size: var(--text-eyebrow);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.link-cta {
  font-size: var(--text-button);
  line-height: 1;
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}

.link-cta:hover {
  color: var(--color-primary);
}

.card-base {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.service-icon-circle {
  width: var(--service-icon-size);
  height: var(--service-icon-size);
  border-radius: var(--radius-circle);
  background: var(--service-icon-bg);
  border: var(--service-icon-border);
  box-shadow: var(--service-icon-shadow);
}

.service-icon-circle img,
.service-icon-circle svg {
  width: var(--service-icon-svg-size);
  height: auto;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}