/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* ===================================== */
/* Globales CSS für Blueprint-Websites  */
/* ===================================== */

:root {
  /* ?? Farben */
  --color-primary: #007c89;
  --color-accent:  #f0c000;
  --color-accent-hover: #d4a800;
  --color-dark:    #1e1e1e;
  --color-light:   #f9f9f9;
  --color-white:   #ffffff;
  --color-black:   #000000;

  /* ?? Spacing (fluid) */
  --space-xs: clamp(0.25rem, 0.8vw, 0.75rem);
  --space-s:  clamp(0.5rem, 1vw, 1rem);
  --space-m:  clamp(1rem, 2vw, 2rem);
  --space-l:  clamp(2rem, 4vw, 3rem);
  --space-xl: clamp(3rem, 5vw, 4rem);
  --space-xxl: clamp(4rem, 6vw, 6rem);

  /* ?? Schriftgrößen (fluid) */
  --fs-xs: clamp(0.75rem, 1vw, 0.875rem);
  --fs-s:  clamp(0.875rem, 1.2vw, 1rem);
  --fs-m:  clamp(1rem, 1.5vw, 1.125rem);
  --fs-l:  clamp(1.25rem, 2vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 3vw, 2.5rem);
  --fs-xxl: clamp(2rem, 4vw, 3.5rem);

  /* ?? Container-Breite */
  --container-max: 1280px;

  /* ?? Border Radius */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  /* ?? Übergänge & Schatten */
  --transition-default: all 0.3s ease;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ===================== */
/* ?? Abstände           */
/* ===================== */

/* Padding */
.padding-xs  { padding: var(--space-xs); }
.padding-s   { padding: var(--space-s); }
.padding-m   { padding: var(--space-m); }
.padding-l   { padding: var(--space-l); }
.padding-xl  { padding: var(--space-xl); }

/* Margin Bottom */
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-s   { margin-bottom: var(--space-s); }
.mb-m   { margin-bottom: var(--space-m); }
.mb-l   { margin-bottom: var(--space-l); }
.mb-xl  { margin-bottom: var(--space-xl); }

/* Sektionen */
.section-padding {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* ===================== */
/* ?? Schriftgrößen      */
/* ===================== */

.text-xs  { font-size: var(--fs-xs); }
.text-s   { font-size: var(--fs-s); }
.text-m   { font-size: var(--fs-m); }
.text-l   { font-size: var(--fs-l); }
.text-xl  { font-size: var(--fs-xl); }
.text-xxl { font-size: var(--fs-xxl); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }

/* ===================== */
/* ?? Farben Text & BG   */
/* ===================== */

.text-primary  { color: var(--color-primary); }
.text-accent   { color: var(--color-accent); }
.text-dark     { color: var(--color-dark); }
.text-light    { color: var(--color-light); }

.bg-primary  { background-color: var(--color-primary); color: white; }
.bg-accent   { background-color: var(--color-accent); color: black; }
.bg-light    { background-color: var(--color-light); }
.bg-dark     { background-color: var(--color-dark); color: white; }

/* ===================== */
/* ?? Container          */
/* ===================== */

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}

/* ===================== */
/* ?? Flexbox Layouts    */
/* ===================== */

.flex         { display: flex; }
.flex-center  { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-col     { flex-direction: column; }

/* ===================== */
/* ?? Grid Layouts       */
/* ===================== */

.grid         { display: grid; gap: var(--space-m); }
.grid-2       { grid-template-columns: 1fr 1fr; }
.grid-3       { grid-template-columns: 1fr 1fr 1fr; }

.grid-responsive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .grid-responsive-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-responsive-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== */
/* ?? Buttons            */
/* ===================== */

.button,
.wp-block-button__link {
  background-color: var(--color-accent);
  color: white;
  padding: 0.75em 1.5em;
  border-radius: var(--radius-s);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition-default);
}

.button:hover,
.wp-block-button__link:hover {
  background-color: var(--color-accent-hover);
}

/* Sekundärer Button */
.button-secondary {
  background-color: var(--color-primary);
  color: white;
}

/* ===================== */
/* ??? Bilder             */
/* ===================== */

img {
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
  max-width: 100%;
  height: auto;
}