/* 1. Font Imports */
@import url("https://use.typekit.net/xmc6fed.css"); /* Brandon Grotesque */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap'); /* Lato */

:root {
  /* --- TYPOGRAPHY COLORS --- */
  --ar-text-section: #0A141F;
  --ar-text-header: #1f7999;
  --ar-text-headline: #848484;
  --ar-text-body: #7b7b7b;
  --ar-text-notes: #0A141F;

  /* --- TYPOGRAPHY FONTS --- */
  --ar-body-font-family: "brandon-grotesque", sans-serif;
  --bs-body-font-family: "brandon-grotesque", sans-serif;
  --ar-heading-font-family: "brandon-grotesque", sans-serif;
  --ar-notes-font-family: 'Lato', sans-serif;
  --ar-font-sans-serif: "brandon-grotesque", sans-serif;

  /* --- TYPOGRAPHY SIZES (REM based on 16px root) --- */
  /* Header: 30pt = 40px */
  --fs-header: 2.5rem; 
  /* Headline: 18pt = 24px */
  --fs-headline: 1.5rem; 
  /* Body/Section: 10pt = ~13.33px */
  --fs-body: 0.833rem; 
  /* Notes: 8pt = ~10.6px */
  --fs-notes: 0.667rem; 

  /* --- GLOBAL THEME VARIABLES --- */
  --ar-border-width: 1px;
  --ar-border-radius: 0.5rem;

  --ar-info: #15263f;
  --ar-info-rgb: 21, 38, 63;

  --ar-primary: #1f7999;
  --ar-primary-rgb: 31, 121, 153;

  --ar-link-color: #1f7999;
  --ar-link-hover-color: #066080;

  /* --- BRAND COLORS --- */
  --brand-navy: #14273E;
  --brand-turquoise: #1F7999;
  --brand-teal: #55AFB7;
  --brand-light-teal: #A9DEE7;
}

/* Brand Color Utility Classes */
.bg-brand-navy {
  background-color: var(--brand-navy) !important;
}

.bg-brand-turquoise {
  background-color: var(--brand-turquoise) !important;
}

.bg-brand-teal {
  background-color: var(--brand-teal) !important;
}

.bg-brand-light-teal {
  background-color: var(--brand-light-teal) !important;
}

.text-brand-navy {
  color: var(--brand-navy) !important;
}

.text-brand-turquoise {
  color: var(--brand-turquoise) !important;
}

.text-brand-teal {
  color: var(--brand-teal) !important;
}

.text-brand-light-teal {
  color: var(--brand-light-teal) !important;
}

.border-brand-navy {
  border-color: var(--brand-navy) !important;
}

.border-brand-turquoise {
  border-color: var(--brand-turquoise) !important;
}

.border-brand-teal {
  border-color: var(--brand-teal) !important;
}

.border-brand-light-teal {
  border-color: var(--brand-light-teal) !important;
}

.btn-brand-teal {
  background-color: var(--brand-teal);
  color: white;
  border-color: var(--brand-teal);
}

.btn-brand-teal:hover {
  background-color: #4a9da5;
  border-color: #4a9da5;
}

.btn-outline-brand-teal {
  background-color: transparent;
  color: var(--brand-teal);
  border: 2px solid var(--brand-teal);
}

.btn-outline-brand-teal:hover {
  background-color: var(--brand-teal);
  color: white;
}

.navbar .nav-link.active-brand-teal {
  color: var(--brand-teal) !important;
}

/* 2. Global Responsiveness & Body Reset */

/* Responsive scaling via HTML root size */
html {
  font-size: 16px; /* Desktop Default */
  scroll-behavior: smooth; /* Smooth scrolling for in-page anchors like #boeken */
}

@media (max-width: 991px) {
  html {
    font-size: 15px; /* Tablet scale */
  }
}

@media (max-width: 767px) {
  html {
    font-size: 14px; /* Mobile scale */
  }
}

body {
  font-family: var(--ar-body-font-family);
  font-weight: 400;             
  font-size: var(--fs-body);    
  line-height: 1.6;             
  color: var(--ar-text-body);   /* Applied #7b7b7b globally */
}

/* 3. Typography Utility Classes */

/* Section Text: #0A141F / 600 / 10pt */
.text-section {
  font-family: var(--ar-body-font-family);
  font-weight: 600;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.06rem; 
  color: var(--ar-text-section); /* #0A141F */
}

/* Header Text: #1f7999 / Bold / 30pt */
.text-header {
  font-family: var(--ar-heading-font-family);
  font-weight: 400; 
  font-size: var(--fs-header);
  line-height: 1.1; 
  color: var(--ar-text-header); /* #1f7999 */
}

/* Headline Text: #848484 / Medium / 18pt */
.text-headline {
  font-family: var(--ar-heading-font-family);
  font-weight: 500;
  font-size: var(--fs-headline);
  line-height: 1.3;
  color: var(--ar-text-headline); /* #848484 */
}

/* Notes Text: #0A141F / Lato / 8pt */
.text-notes {
  font-family: var(--ar-notes-font-family);
  font-weight: 400;
  font-size: var(--fs-notes);
  line-height: normal;
  color: var(--ar-text-notes); /* #0A141F */
}

/* 4. Bootstrap Heading Overrides */
/* Ensures <h1> and <h3> tags automatically pick up the new colors/sizes */
h1, .h1 {
  font-family: var(--ar-heading-font-family);
  font-weight: 400;
  font-size: var(--fs-header);
  line-height: 1.1;
  color: var(--ar-text-header);
}

h3, .h3 {
  font-family: var(--ar-heading-font-family);
  font-weight: 500;
  font-size: var(--fs-headline);
  line-height: 1.3;
  color: var(--ar-text-headline);
}

/* 5. Theme Components Overrides (Buttons & Accordion) */

.btn-primary {
  --ar-btn-bg: #1f7999;
  --ar-btn-border-color: #1f7999;
  --ar-btn-hover-bg: #066080;
  --ar-btn-hover-border-color: #066080;
  --ar-btn-active-bg: #066080;
  --ar-btn-active-border-color: #066080;
  --ar-btn-disabled-bg: #1f7999;
  --ar-btn-disabled-border-color: #1f7999;
}
.btn-info {
  --ar-btn-bg: #15263f;
  --ar-btn-border-color: #15263f;
  --ar-btn-hover-bg: #000d26;
  --ar-btn-hover-border-color: #000d26;
  --ar-btn-active-bg: #000d26;
  --ar-btn-active-border-color: #000d26;
  --ar-btn-disabled-bg: #15263f;
  --ar-btn-disabled-border-color: #15263f;
}
.btn-outline-primary {
  --ar-btn-color: #1f7999;
  --ar-btn-border-color: #1f7999;
  --ar-btn-hover-bg: #1f7999;
  --ar-btn-hover-border-color: #1f7999;
  --ar-btn-active-bg: #1f7999;
  --ar-btn-active-border-color: #1f7999;
  --ar-btn-disabled-color: #1f7999;
  --ar-btn-disabled-border-color: #1f7999;
}
.btn-outline-info {
  --ar-btn-color: #15263f;
  --ar-btn-border-color: #15263f;
  --ar-btn-hover-bg: #15263f;
  --ar-btn-hover-border-color: #15263f;
  --ar-btn-active-bg: #15263f;
  --ar-btn-active-border-color: #15263f;
  --ar-btn-disabled-color: #15263f;
  --ar-btn-disabled-border-color: #15263f;
}
.accordion-button:not(.collapsed)::after {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%231f7999'%3e%3cpath%20d='M.5%206.3c.6-.6%201.6-.6%202.3%200l9.3%209.3%209.3-9.3c.6-.6%201.6-.6%202.3%200%20.6.6.6%201.6%200%202.3L13.3%2018.8c-.6.6-1.6.6-2.3%200L.8%208.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}