/*
Theme Name: MagDatWel Child
Template: katen
Author: Jouw Naam
Version: 1.0
Description: Child Theme voor MagDatWelOnline.nl gebaseerd op Katen.
*/

/*==============================
  ROOT VARIABELEN
==============================*/
:root {
  /* Kleuren */
  --color-text: #142030;
  --color-background: #ffffff;
  --color-primary: #007acc;
  --color-primary-hover: #005f99;
  --color-heading: #111111;
  --color-button-bg: #007acc;
  --color-button-text: #ffffff;
  --color-category-bg: #e0e0e0;
  --color-category-text: #333333;
  --color-logo: #007acc;

  /* Typografie */
  --font-base: 'Open Sans', sans-serif;
  --font-heading: 'Merriweather', serif;
  --font-logo: 'Montserrat', sans-serif;

  /* Fontgroottes */
  --font-size-base: 16px;
  --font-size-h1: 2.5rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;

  /* Afstanden */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/*==============================
  DARK MODE VARIABELEN
==============================*/
html[data-scheme="dark"] {
  --color-text: #cccccc;
  --color-background: #121212;
  --color-primary: #66ccff;
  --color-primary-hover: #3399cc;
  --color-heading: #ffffff;
  --color-button-bg: #66ccff;
  --color-button-text: #121212;
  --color-category-bg: #333333;
  --color-category-text: #ffffff;
  --color-logo: #66ccff;
}

/*==============================
  ALGEMENE STIJLEN
==============================*/
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
}

/*==============================
  KOPPEN
==============================*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/*==============================
  LINKS
==============================*/
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/*==============================
  KNOPPEN
==============================*/
button,
input[type="submit"],
.btn {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
  background-color: var(--color-primary-hover);
}

/*==============================
  BLOGINHOUD
==============================*/
.entry-content,
.post-content,
.article-content {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

/*==============================
  CATEGORIE LABELS
==============================*/
.category-label {
  background-color: var(--color-category-bg);
  color: var(--color-category-text);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 3px;
  font-size: 0.875rem;
  text-transform: uppercase;
}

/*==============================
  LOGO
==============================*/
.site-logo {
  font-family: var(--font-logo);
  color: var(--color-logo);
  font-size: 2rem;
  text-decoration: none;
}

/*==============================
  MOBIEL VRIENDELIJKE TYPOGRAFIE
==============================*/
@media (max-width: 767px) {
  body {
    font-size: 17px;
    line-height: 1.8;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.50rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.875rem; }

  p {
    margin-bottom: 1.2em;
  }
}