/**
 * ================================================
 * FJORD BADMINTON — Design System
 * Til brug med Ollie-temaet på WordPress
 * ================================================
 * 
 * INSTALLATION:
 * 1. Gå til WordPress Dashboard → Appearance → Customize → Additional CSS
 * 2. Kopier HELE dette dokument ind og gem
 * 
 * ELLER:
 * 1. Installer plugin "Simple Custom CSS"
 * 2. Indsæt koden der
 * ================================================
 */

/* ────────────────────────────────────────────────
   GOOGLE FONTS IMPORT
   (Kopier dette separat til functions.php eller
    brug et "Scripts & Styles" plugin)
   ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap');


/* ────────────────────────────────────────────────
   FARVEPALETTE & DESIGNVARIABLER
   ──────────────────────────────────────────────── */
:root {
  /* Primærfarver — taget fra logoet */
  --fb-teal:        #2E8FA3;
  --fb-teal-dark:   #1E6B7C;
  --fb-teal-light:  #4BB8CE;
  --fb-teal-pale:   #D6EFF4;

  /* Neutrale farver */
  --fb-white:       #FFFFFF;
  --fb-off-white:   #F4F9FB;
  --fb-light-gray:  #E8F2F5;
  --fb-mid-gray:    #8BADB5;
  --fb-text:        #1A3840;
  --fb-text-light:  #4A6B74;

  /* Accent */
  --fb-sand:        #F0E8D5;
  --fb-coral:       #E05C4B;  /* til CTAs der skal skille sig ud */

  /* Typografi */
  --fb-font-heading: 'Barlow Condensed', sans-serif;
  --fb-font-body:    'Barlow', sans-serif;

  /* Størrelser */
  --fb-radius:       6px;
  --fb-radius-lg:    12px;
  --fb-shadow:       0 4px 20px rgba(30, 107, 124, 0.12);
  --fb-shadow-hover: 0 8px 32px rgba(30, 107, 124, 0.22);

  /* Override Ollie-variabler */
  --wp--preset--color--primary:        #2E8FA3;
  --wp--preset--color--secondary:      #1E6B7C;
  --wp--preset--color--base:           #F4F9FB;
  --wp--preset--color--contrast:       #1A3840;
  --wp--preset--font-family--heading:  'Barlow Condensed', sans-serif;
  --wp--preset--font-family--body:     'Barlow', sans-serif;
}


/* ────────────────────────────────────────────────
   BASE TYPOGRAFI
   ──────────────────────────────────────────────── */
body {
  font-family: var(--fb-font-body);
  color: var(--fb-text);
  background-color: var(--fb-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--fb-font-heading) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fb-text);
  line-height: 1.05;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem,  4vw, 3.2rem);  }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h4 { font-size: 1.4rem; }

p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fb-text-light);
}

a {
  color: var(--fb-teal);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--fb-teal-dark); }


/* ────────────────────────────────────────────────
   NAVIGATION
   ──────────────────────────────────────────────── */
.wp-block-navigation,
header nav,
.site-header {
  background-color: var(--fb-white) !important;
  border-bottom: 2px solid var(--fb-teal-pale);
  box-shadow: 0 2px 12px rgba(46, 143, 163, 0.08);
}

.wp-block-navigation a,
header nav a {
  font-family: var(--fb-font-heading) !important;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fb-text) !important;
  padding: 0.4em 0.8em;
  transition: color 0.2s ease;
}

.wp-block-navigation a:hover,
header nav a:hover,
.wp-block-navigation .current-menu-item > a {
  color: var(--fb-teal) !important;
}

/* Mobil menu */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--fb-teal-dark) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--fb-white) !important;
}


/* ────────────────────────────────────────────────
   KNAPPER
   ──────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"] {
  font-family: var(--fb-font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--fb-radius) !important;
  padding: 0.8em 2em !important;
  transition: all 0.22s ease !important;
  border: none !important;
  cursor: pointer;
}

/* Primær knap */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--fb-teal) !important;
  color: var(--fb-white) !important;
  box-shadow: 0 3px 14px rgba(46, 143, 163, 0.35) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--fb-teal-dark) !important;
  box-shadow: 0 6px 20px rgba(46, 143, 163, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Outline knap */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--fb-teal) !important;
  border: 2px solid var(--fb-teal) !important;
  box-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--fb-teal) !important;
  color: var(--fb-white) !important;
}

/* CTA knap (brug CSS klasse "fb-cta") */
.fb-cta .wp-block-button__link,
.wp-block-button.fb-cta .wp-block-button__link {
  background-color: var(--fb-coral) !important;
  color: var(--fb-white) !important;
  box-shadow: 0 3px 14px rgba(224, 92, 75, 0.35) !important;
}
.fb-cta .wp-block-button__link:hover {
  background-color: #c44a3b !important;
  transform: translateY(-2px) !important;
}


/* ────────────────────────────────────────────────
   HERO SEKTION
   ──────────────────────────────────────────────── */
.wp-block-cover.fb-hero,
.fb-hero {
  min-height: 85vh !important;
  position: relative;
  overflow: hidden;
}

/* Wave-dekoration under hero */
.wp-block-cover.fb-hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z' fill='%23F4F9FB'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  z-index: 2;
  pointer-events: none;
}

.wp-block-cover.fb-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
}

.fb-hero h1,
.wp-block-cover.fb-hero h1 {
  color: var(--fb-white) !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.fb-hero p,
.wp-block-cover.fb-hero p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 1.2rem;
}


/* ────────────────────────────────────────────────
   SEKTIONER — BAGGRUNDE
   ──────────────────────────────────────────────── */

/* Lys teal baggrund */
.fb-section-light,
.wp-block-group.fb-section-light {
  background-color: var(--fb-off-white) !important;
}

/* Teal baggrund (mørk) */
.fb-section-teal,
.wp-block-group.fb-section-teal {
  background-color: var(--fb-teal) !important;
  color: var(--fb-white) !important;
}
.fb-section-teal h1,
.fb-section-teal h2,
.fb-section-teal h3,
.fb-section-teal p {
  color: var(--fb-white) !important;
}

/* Mørk baggrund */
.fb-section-dark,
.wp-block-group.fb-section-dark {
  background-color: var(--fb-text) !important;
  color: var(--fb-white) !important;
}
.fb-section-dark h1,
.fb-section-dark h2,
.fb-section-dark h3 { color: var(--fb-white) !important; }
.fb-section-dark p   { color: var(--fb-teal-pale) !important; }

/* Sand baggrund */
.fb-section-sand,
.wp-block-group.fb-section-sand {
  background-color: var(--fb-sand) !important;
}


/* ────────────────────────────────────────────────
   KORT / KOLONNE-BLOKKE
   ──────────────────────────────────────────────── */
.wp-block-column.fb-card,
.fb-card {
  background: var(--fb-white);
  border-radius: var(--fb-radius-lg) !important;
  padding: 2rem !important;
  box-shadow: var(--fb-shadow);
  border-top: 4px solid var(--fb-teal);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-column.fb-card:hover,
.fb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fb-shadow-hover);
}

/* Blå kort */
.fb-card-teal {
  background: var(--fb-teal) !important;
  color: var(--fb-white);
}
.fb-card-teal h3, .fb-card-teal p {
  color: var(--fb-white) !important;
}


/* ────────────────────────────────────────────────
   SKILLELINJE / SEPARATOR
   ──────────────────────────────────────────────── */
.wp-block-separator {
  border-color: var(--fb-teal-pale) !important;
  border-width: 2px !important;
}
.wp-block-separator.is-style-wide {
  max-width: 80px;
  border-color: var(--fb-teal) !important;
  border-width: 3px !important;
}


/* ────────────────────────────────────────────────
   CITATER / QUOTES
   ──────────────────────────────────────────────── */
.wp-block-quote {
  border-left: 4px solid var(--fb-teal) !important;
  padding-left: 1.5rem;
  background: var(--fb-teal-pale);
  border-radius: 0 var(--fb-radius) var(--fb-radius) 0;
  padding: 1.2rem 1.5rem;
}
.wp-block-quote p {
  font-family: var(--fb-font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fb-teal-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wp-block-quote cite {
  color: var(--fb-mid-gray);
  font-size: 0.85rem;
}


/* ────────────────────────────────────────────────
   TABELLER
   ──────────────────────────────────────────────── */
.wp-block-table table {
  border-radius: var(--fb-radius-lg);
  overflow: hidden;
  border: none !important;
  box-shadow: var(--fb-shadow);
  width: 100%;
}
.wp-block-table thead {
  background-color: var(--fb-teal) !important;
}
.wp-block-table thead th {
  font-family: var(--fb-font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fb-white) !important;
  padding: 1rem 1.2rem;
  border: none !important;
}
.wp-block-table tbody tr:nth-child(odd) {
  background-color: var(--fb-off-white);
}
.wp-block-table tbody tr:nth-child(even) {
  background-color: var(--fb-white);
}
.wp-block-table tbody td {
  padding: 0.85rem 1.2rem;
  border: none !important;
  border-bottom: 1px solid var(--fb-teal-pale) !important;
  color: var(--fb-text-light);
}
.wp-block-table tbody tr:hover td {
  background-color: var(--fb-teal-pale);
  color: var(--fb-text);
}


/* ────────────────────────────────────────────────
   FORMULARER (kontakt, tilmelding)
   ──────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--fb-font-body);
  border: 2px solid var(--fb-teal-pale);
  border-radius: var(--fb-radius);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--fb-text);
  background-color: var(--fb-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--fb-teal);
  box-shadow: 0 0 0 3px rgba(46, 143, 163, 0.15);
}

label {
  font-family: var(--fb-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fb-text);
  display: block;
  margin-bottom: 0.4rem;
}


/* ────────────────────────────────────────────────
   BADGES / TAGS
   (brug i HTML-blokke: <span class="fb-badge">)
   ──────────────────────────────────────────────── */
.fb-badge {
  display: inline-block;
  font-family: var(--fb-font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: 100px;
  background-color: var(--fb-teal-pale);
  color: var(--fb-teal-dark);
}
.fb-badge.fb-badge-teal {
  background-color: var(--fb-teal);
  color: var(--fb-white);
}
.fb-badge.fb-badge-dark {
  background-color: var(--fb-text);
  color: var(--fb-white);
}


/* ────────────────────────────────────────────────
   KLUBLOGOER / PARTNER-SECTION
   ──────────────────────────────────────────────── */
.fb-clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  align-items: center;
}
.fb-club-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--fb-white);
  border-radius: var(--fb-radius-lg);
  box-shadow: var(--fb-shadow);
  transition: transform 0.2s ease;
}
.fb-club-logo:hover {
  transform: scale(1.04);
}
.fb-club-logo img {
  max-height: 60px;
  filter: grayscale(40%);
  transition: filter 0.2s;
}
.fb-club-logo:hover img {
  filter: grayscale(0%);
}

/* Tekstbaseret klub-badge (hvis ingen logo) */
.fb-club-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--fb-teal);
  border-radius: var(--fb-radius-lg);
  color: var(--fb-white);
  font-family: var(--fb-font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  box-shadow: var(--fb-shadow);
}
.fb-club-badge small {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 0.3em;
  text-transform: none;
  letter-spacing: 0;
}


/* ────────────────────────────────────────────────
   WAVE DIVIDER (SVG-baseret)
   Brug en Custom HTML-blok med klassen fb-wave-top
   eller fb-wave-bottom
   ──────────────────────────────────────────────── */
.fb-wave-bottom {
  display: block;
  width: 100%;
  line-height: 0;
  margin-bottom: -2px;
}
.fb-wave-top {
  display: block;
  width: 100%;
  line-height: 0;
  margin-top: -2px;
}


/* ────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────── */
.site-footer,
footer {
  background-color: var(--fb-text) !important;
  color: var(--fb-teal-pale) !important;
  padding: 3rem 0 1.5rem !important;
}
.site-footer a,
footer a {
  color: var(--fb-teal-light) !important;
  transition: color 0.2s;
}
.site-footer a:hover,
footer a:hover {
  color: var(--fb-white) !important;
}
.site-footer h3,
.site-footer h4,
footer h3,
footer h4 {
  color: var(--fb-white) !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
footer p, .site-footer p {
  color: var(--fb-mid-gray) !important;
  font-size: 0.9rem;
}


/* ────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fb-clubs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-cover.fb-hero {
    min-height: 70vh !important;
  }
}

@media (max-width: 480px) {
  .fb-clubs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}