/* ==========================================================================
   1. Importer
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&display=swap');


/* ==========================================================================
   2. CSS-variabler
   ========================================================================== */

:root {
  /* Färger – primära */
  --rbu-blue:        #1B4D6B;   /* Primärfärg, rubriker, knappar */
  --rbu-blue-dark:   #123749;   /* Hover-tillstånd */
  --rbu-blue-light:  #B5D4F4;   /* Bakgrundsaccent */

  /* Färger – accent */
  --rbu-coral:       #E85A4F;   /* Engagemang, hjärta, CTA */
  --rbu-coral-dark:  #C7453B;   /* Hover */
  --rbu-coral-light: #FAECE7;   /* Mjuk bakgrund */

  /* Färger – sekundära */
  --rbu-sage:        #7CA982;   /* Hopp, växande, natur */
  --rbu-sage-light:  #EAF3DE;
  --rbu-sand:        #F4E4C1;   /* Värme, bakgrund */
  --rbu-sand-light:  #FBF5E6;

  /* Neutrala */
  --rbu-warmgray:    #5A5651;   /* Brödtext */
  --rbu-warmgray-light: #D3D1C7;
  --rbu-offwhite:    #FAF7F2;   /* Huvudbakgrund */
  --rbu-white:       #FFFFFF;
  --rbu-text:        #2C2C2A;   /* Mörkaste text */
  --rbu-text-muted:  #5F5E5A;

  /* Semantiska färger (tillgänglighet) */
  --rbu-success:     #3B6D11;
  --rbu-warning:     #BA7517;
  --rbu-danger:      #A32D2D;
  --rbu-info:        #185FA5;

  /* Typografi */
  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif:      'Source Serif Pro', Georgia, 'Times New Roman', serif;

  /* Storlekar */
  --fs-xs:           0.75rem;   /* 12px */
  --fs-sm:           0.875rem;  /* 14px */
  --fs-base:         1rem;      /* 16px */
  --fs-md:           1.125rem;  /* 18px */
  --fs-lg:           1.375rem;  /* 22px */
  --fs-xl:           1.75rem;   /* 28px */
  --fs-2xl:          2.375rem;  /* 38px */
  --fs-3xl:          3rem;      /* 48px */

  /* Radavstånd */
  --lh-tight:        1.15;
  --lh-snug:         1.35;
  --lh-normal:       1.6;

  /* Spacing (8-baserad skala) */
  --space-1:         0.25rem;   /* 4px */
  --space-2:         0.5rem;    /* 8px */
  --space-3:         0.75rem;   /* 12px */
  --space-4:         1rem;      /* 16px */
  --space-5:         1.5rem;    /* 24px */
  --space-6:         2rem;      /* 32px */
  --space-8:         3rem;      /* 48px */
  --space-10:        4rem;      /* 64px */
  --space-12:        6rem;      /* 96px */

  /* Hörnradier */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       20px;
  --radius-pill:     999px;

  /* Övergångar */
  --transition:      0.2s ease;

  /* Maxbredd */
  --max-width:       1200px;
  --max-width-text:  720px;     /* för läsbar brödtext */
}


/* Tar bort rubriken skapad av sidans namn */
.regular-post .page-title { 
  display: none; 
}

/* ==========================================================================
   Navigation bar
   ========================================================================== */

#ko-menu_link-105 {
  display: inline-flex;           /* Tvingar länken att bete sig som ett knapp */
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);  /* Använder 'Inter' */
  font-size: var(--fs-base);      /* 16px text i knappen */
  font-weight: 600;               /* Lite tjockare text så det syns tydligt */
  line-height: 1;
  background-color: var(--rbu-coral);
  color: var(--rbu-white) !important;
  border: 2px solid var(--rbu-coral);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none !important;  /* Tar bort understrecket */
  white-space: nowrap;
  transition: all var(--transition);
}

/* Vad som händer när man håller muspekaren över knappen */
#ko-menu_link-105:hover {
  background-color: var(--rbu-coral-dark);
  border-color: var(--rbu-coral-dark);
  color: var(--rbu-white) !important;
  text-decoration: none !important; /* Valfritt: none/ hover */
}

/* ==========================================================================
   Hero-sektionen
   ========================================================================== */

.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4); /* avstånd mellan text och bild */
  padding: var(--space-10) var(--space-5); 
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-content {
  flex: 1;
}

.hero-heading {
  font-family: var(--font-serif); 
  font-size: var(--fs-2xl);       
  color: var(--rbu-blue);         /* Primär blå färg */
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}

.hero-text {
  font-family: var(--font-sans);  /* Inter-typsnittet */
  font-size: var(--fs-md);        
  color: var(--rbu-warmgray);     /* RBU:s brödtextfärg */
  line-height: var(--lh-normal);  /* 1.6 radavstånd */
  margin-bottom: var(--space-6);  /* Avstånd ner till knapparna */
  max-width: var(--max-width-text);
}

/* Behållaren som håller knapparna på plats */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4); /* Lägg till detta så knapparna inte sitter ihop */
}

/* Själva knapparna */
.btn-hero {
  display: inline-flex;           /* Tvingar länken att bete sig som ett knapp */
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);  /* Använder 'Inter' */
  font-size: var(--fs-base);      /* 16px text i knappen */
  font-weight: 600;               /* Lite tjockare text så det syns tydligt */
  line-height: 1;
  background-color: var(--rbu-coral);
  color: var(--rbu-white) !important;
  border: 2px solid var(--rbu-coral);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none !important;  /* Tar bort understrecket */
  white-space: nowrap;
  transition: all var(--transition);
}

/* Hover-effekt för knapparna */
.btn-hero:hover {
  background-color: var(--rbu-coral-dark);
  border-color: var(--rbu-coral-dark);
  color: var(--rbu-white) !important;
  text-decoration: none !important; /* Valfritt: none/ hover */
}

.hero-image-wrapper {
  flex: 1;
}

.hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md); /* 8px runda hörn från variablerna */
}
/* ==========================================================================
   About-sektionen 
   ========================================================================== */
.about-section {
  background-color: var(--rbu-offwhite);
  padding: var(--space-10) var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-content {
  text-align: center;
  margin-bottom: var(--space-8);
}

.about-content h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--rbu-blue);
  margin-bottom: var(--space-3);
}

.about-card-container {
  display: flex;
  gap: var(--space-5);
}

.about-card {
  flex: 1; /* Gör att alla 3 kort blir exakt lika breda */
  background-color: var(--rbu-white);
  padding: var(--space-5);
  border-radius: var(--radius-md); /* 8px runda hörn */
  border: 1px solid var(--rbu-warmgray-light); /* En tunn ram */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.about-card .card-title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  color: var(--rbu-blue);
  margin-bottom: var(--space-2);
}

.about-card p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--rbu-warmgray);
  line-height: var(--lh-normal);
}

.icon-container {
  text-align: center; 
  padding: 20px;
}

/* ==========================================================================
   Stöd oss
   ========================================================================== */
.support-section {
    padding-bottom: var(--space-10);
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

/* Själva bannern */
.cta-banner {
    background-color: var(--rbu-blue); 
    border-radius: var(--radius-lg);   /* 12px runda hörn */
    padding: var(--space-10) var(--space-6); 
    color: var(--rbu-white);
    text-align: center;
}

.cta-banner-content {
    max-width: var(--max-width-text); 
    margin: 0 auto;
}

.cta-banner h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl); 
    margin-bottom: var(--space-3);
    color: var(--rbu-white);
    line-height: var(--lh-tight);
}

.cta-banner p {
    font-family: var(--font-sans);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-md); 
    margin-bottom: var(--space-6);
    line-height: var(--lh-normal);
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4); 
    flex-wrap: wrap;     /* Staplar knapparna på mobilen om det behövs */
}

/* ==========================================================================
   Knapp-varianter för CTA-bannern
   ========================================================================== */

.btn-light, .btn-outline-light {
    display: inline-flex;           
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-sans);  
    font-size: var(--fs-base);      
    font-weight: 600;               
    line-height: 1;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none !important;  
    white-space: nowrap;
    transition: all var(--transition);
    border: 2px solid transparent;
}

/* knappen ("Bli medlem nu") */
.btn-light {
    background-color: var(--rbu-white);
    color: var(--rbu-blue) !important;
    border-color: var(--rbu-white);
}

.btn-light:hover {
    background-color: var(--rbu-offwhite);
    border-color: var(--rbu-offwhite);
    color: var(--rbu-blue) !important;
}

/* knappen ("Swisha en gåva") */
.btn-outline-light {
    background-color: transparent;
    color: var(--rbu-white) !important;
    border-color: var(--rbu-white);
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--rbu-white);
    color: var(--rbu-white) !important;
}


/* ==========================================================================
   14. Responsivitet / Mobilanpassning 
   ========================================================================== */

@media (max-width: 1000px) {
  
  .hero-section {
    flex-direction: column; /* Staplar text och bild på höjden */
    text-align: left;     
    padding: var(--space-6) var(--space-4);
  }
  .about-card-container {
    flex-direction: column;
  }
}
.iframe-container {
  position: relative;
  width: 100%;
  /* Justera denna procentsats för att ändra höjden/proportionerna. 
     56.25% är standard för 16:9 (video). 
     För bläddringsbara dokument (som aflip.in) brukar 75% (4:3) eller 100% (kvadratisk) passa bättre. */
  padding-top: 75%; 
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  

/* ==========================================================================
   Testkod
   ========================================================================== */