/* ==========================================================
AZ GLOBAL SYSTEM 2025 – MASTER CSS
Version: v4.1 (Blå/Rød + Divi Fonts + Optimized)
========================================================== */

/* ------------------------------
0. Root-variabler
------------------------------ */
:root {
  --az-primary: #1D3F72;      /* Brand-blå */
  --az-secondary: #C62828;   /* Brand-rød */

  --az-text-dark: #1D1D1D;
  --az-text-muted: #5A6472;

  --az-bg-body: #F5F7FA;
  --az-bg-light: #F9FAFC;
  --az-white: #FFFFFF;

  --az-border-soft: #D7DFE8;
  --az-border-light: #E3E8EF;   /* Tilføjet i v4.1 */

  --az-radius-sm: 6px;
  --az-radius-md: 10px;
  --az-radius-lg: 16px;

  --az-shadow-soft: 0 8px 24px rgba(10, 34, 64, 0.08);
  --az-shadow-hard: 0 14px 40px rgba(10, 34, 64, 0.18);

  --az-font-body: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --az-font-heading: "Merriweather", "Times New Roman", serif;
}

/* ------------------------------
1. Base / reset
------------------------------ */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
body.et_divi_theme,
body.et_pb_pagebuilder_layout {
  margin: 0;
  padding: 0;
  font-family: var(--az-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--az-text-dark);
  background: var(--az-bg-body) !important;
}

/* Billeder – CLS optimering */
img {
  max-width: 100%;
  height: auto;
  display: block;
  content-visibility: auto;
}

/* Links */
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------
2. Layoutcontainere & sektioner
------------------------------ */
.az-page-wrapper {
  background: var(--az-bg-body);
}

.az-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .az-container {
    padding: 0 16px;
  }
}

.az-section {
  margin: 80px 0;
  content-visibility: auto;
}

.az-section--tight {
  margin: 50px 0;
}

.az-section--flush {
  margin: 0;
}

/* ------------------------------
3. Typografi – overskrifter & tekst
------------------------------ */
.az-heading-xl,
.az-heading-lg,
.az-heading-md,
.az-heading-sm {
  margin: 0 0 20px;
  font-family: var(--az-font-heading);
  color: var(--az-primary);
  line-height: 1.3;
  font-weight: 600; /* MATCHER din Merriweather 600 font */
}

.az-heading-xl {
  font-size: clamp(32px, 4vw, 40px);
}

.az-heading-lg {
  font-size: clamp(26px, 3vw, 32px);
}

.az-heading-md {
  font-size: clamp(22px, 2.4vw, 26px);
}

.az-heading-sm {
  font-size: clamp(18px, 2vw, 20px);
}

/* Intro / leadtekst */
.az-lead {
  font-size: 18px;
  line-height: 1.8;
  color: var(--az-text-muted);
  max-width: 780px;
}

/* Brødtekst */
.az-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--az-text-dark);
}

/* Små noter */
.az-note {
  font-size: 14px;
  color: var(--az-text-muted);
}

/* ------------------------------
4. Cards / bokse
------------------------------ */
.az-card {
  background: var(--az-white);
  border-radius: var(--az-radius-md);
  box-shadow: var(--az-shadow-soft);
  padding: 24px;
  border: 1px solid var(--az-border-light);
  overflow: hidden;
  transition: all .25s ease;
}

.az-card--bordered {
  box-shadow: none;
  border: 1px solid var(--az-border-soft);
}

/* ------------------------------
5. Grid system (v4.1 unified)
------------------------------ */

.az-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 600px) {
  .az-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
AZ – BY-GRID (BLUE/RED THEME)
========================================================== */

.az-geo-section {
  padding: 80px 20px;
  background: var(--az-bg-light);
  text-align: center;
}

.az-section-title {
  font-family: var(--az-font-heading);
  font-size: 32px;
  color: var(--az-primary);
  margin-bottom: 16px;
}

.az-section-intro {
  font-size: 17px;
  color: var(--az-text-dark);
  margin-bottom: 40px;
}

.az-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Titel */
.az-card h3 {
  font-family: var(--az-font-heading);
  font-size: 20px;
  color: var(--az-primary);
  margin: 14px 16px 4px;
}

/* Undertekst */
.az-card p {
  font-size: 15px;
  color: #555;
  margin: 0 16px 18px;
}

/* Hover-effekt */
.az-card:hover {
  border-color: var(--az-secondary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}