/* ==========================================================================
   PSYCHOLOGIEZENTRUM MÜNCHEN — MAIN STYLESHEET
   Design theme: Kintsugi — dark elegance, gold repairs, quiet strength
   
   HOW TO CUSTOMIZE:
   - Change colors by editing the CSS variables in :root below
   - Change fonts by replacing the @import and font-family values
   - This file handles typography, colors, buttons, and reusable components
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOOGLE FONTS IMPORT
   Cormorant Garamond: elegant serif for headings (the "gold" of the design)
   Lato: clean sans-serif for body text (readability first)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap');

/* --------------------------------------------------------------------------
   DESIGN TOKENS (CSS Variables)
   Edit these to retheme the entire site at once.
   -------------------------------------------------------------------------- */
:root {
  /* Color palette — inspired by Kintsugi: dark ceramic + gold veins */
  --color-bg:           #0e1520;   /* Deep navy — main background            */
  --color-surface:      #141e2e;   /* Slightly lighter navy — card surfaces   */
  --color-surface-2:    #1a2538;   /* Even lighter — hover states, borders    */
  --color-gold:         #c9a84c;   /* Warm gold — primary accent              */
  --color-gold-light:   #e0c070;   /* Lighter gold — hover states             */
  --color-gold-muted:   #8a6e30;   /* Muted gold — subtle accents             */
  --color-text:         #e8e0d0;   /* Warm white — primary text               */
  --color-text-muted:   #9a9080;   /* Warm grey — secondary text              */
  --color-text-faint:   #5a5248;   /* Faint grey — placeholder, captions      */
  --color-border:       #2a3548;   /* Border color                            */
  --color-border-gold:  rgba(201,168,76,0.25); /* Translucent gold border    */

  /* Typography */
  --font-heading:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'Lato', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:   0.5rem;   /*  8px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   2.5rem;   /* 40px */
  --space-xl:   4rem;     /* 64px */
  --space-2xl:  6rem;     /* 96px */

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Transitions */
  --transition: 0.3s ease;

  /* Max content width */
  --max-width: 1100px;
}

/* --------------------------------------------------------------------------
   RESET & BASE STYLES
   Removes browser inconsistencies, sets sensible defaults
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   Heading styles using the serif font for elegance
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; }

p {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   GOLD DIVIDER
   A subtle gold horizontal rule used between sections
   -------------------------------------------------------------------------- */
.gold-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  margin: var(--space-md) auto;
}

.gold-divider--left {
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   SECTION LABEL
   The small uppercase gold label that appears above headings
   e.g. "MEINE PHILOSOPHIE", "ARBEITSWEISE"
   -------------------------------------------------------------------------- */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   BLOCKQUOTE
   Used for the Viktor Hugo quote on the homepage
   -------------------------------------------------------------------------- */
blockquote {
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--color-text-muted);
  line-height: 1.5;
}

blockquote cite {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-gold-muted);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   UNORDERED LISTS (content lists, not navigation)
   Gold bullet points with good spacing
   -------------------------------------------------------------------------- */
.content-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 var(--space-md);
}

.content-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--color-text);
  line-height: 1.6;
}

.content-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   HIGHLIGHT BOX
   A gold-bordered box for important information (e.g. costs, contact)
   -------------------------------------------------------------------------- */
.highlight-box {
  border: 1px solid var(--color-border-gold);
  background: rgba(201, 168, 76, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}

/* --------------------------------------------------------------------------
   BUTTON
   Primary call-to-action button (gold outline style)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}

.btn:hover {
  background: var(--color-gold);
  color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   IMAGE STYLES
   Reusable image treatments
   -------------------------------------------------------------------------- */
.img-portrait {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  /* Gold shadow to match Kintsugi theme */
  box-shadow: 6px 6px 40px rgba(201, 168, 76, 0.12);
}

.img-full {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.img-rounded {
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   KINTSUGI DECORATIVE ELEMENT
   A subtle gold crack/line decorative SVG used as accent
   -------------------------------------------------------------------------- */
.kintsugi-accent {
  display: block;
  width: 120px;
  height: 2px;
  position: relative;
  margin: var(--space-md) 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--color-gold-muted) 30%, 
    var(--color-gold) 60%, 
    transparent 100%
  );
}