/*
Theme Name: Klinik Janne Vedel Rasmussen
Theme URI: https://sited.dk
Author: sited.dk
Author URI: https://sited.dk
Description: Afdæmpet, roligt tema til psykologklinik. Varm papirhvid, sandtoner og teglrød accent hentet fra klinikkens egne farver. Indeholder sideskabeloner til forside, supervision, terapi, udredning, CV og kontakt.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klinik-jvr
Tags: one-column, custom-menu, translation-ready, accessibility-ready
*/

:root{
    --paper:#FBF7F3;
    --sand:#F3E9E1;
    --sand-deep:#EADCD1;
    --ink:#2B211E;
    --muted:#6D5B53;
    --brick:#9E3B2B;
    --brick-soft:#B8604D;
    --slate:#4C6076;
    --line:#E4D4C7;
    --line-soft:#EFE3D9;
    --shadow:rgba(63,38,29,.08);

    --serif:"Newsreader", Georgia, "Times New Roman", serif;
    --sans:"Karla", "Helvetica Neue", Arial, sans-serif;

    --measure:34rem;
    --wide:64rem;
  }

  :root{color-scheme:light}

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:1.0625rem;
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit}

  /* ---------- header ---------- */
  .site-head{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:30;
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-soft);
  }
  .head-inner{
    max-width:var(--wide);
    margin:0 auto;
    padding:.85rem 1.25rem;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.5rem 1.5rem;
  }
  .wordmark{
    font-family:var(--serif);
    font-size:1.125rem;
    font-weight:400;
    letter-spacing:.01em;
    text-decoration:none;
    line-height:1.3;
  }
  .wordmark small{
    display:block;
    font-family:var(--sans);
    font-size:.6875rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:.15rem;
  }
  nav.main{
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    gap:.25rem .35rem;
    font-family:var(--sans);
    font-size:.875rem;
  }
  nav.main a{
    text-decoration:none;
    color:var(--muted);
    padding:.35rem .6rem;
    border-radius:2px;
    transition:color .18s ease, background .18s ease;
  }
  nav.main a:hover{color:var(--ink);background:var(--sand)}
  nav.main a[aria-current="page"]{
    color:var(--brick);
    box-shadow:inset 0 -1px 0 var(--brick);
  }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--brick);
    outline-offset:2px;
  }

  /* ---------- layout ---------- */
  main{display:block}
  .wrap{
    max-width:var(--wide);
    margin:0 auto;
    padding-inline:1.25rem;
  }
  .measure{max-width:var(--measure)}
  section{padding-block:clamp(2.75rem,6vw,4.5rem)}
  .section--sand{background:var(--sand);border-block:1px solid var(--line-soft)}

  /* ---------- type ---------- */
  h1,h2,h3{font-weight:400;text-wrap:balance;margin:0}
  h1{
    font-size:clamp(2rem,5.2vw,3rem);
    line-height:1.14;
    letter-spacing:-.015em;
  }
  h2{
    font-size:clamp(1.5rem,3.2vw,2rem);
    line-height:1.22;
    letter-spacing:-.01em;
  }
  h3{
    font-size:1.1875rem;
    line-height:1.35;
  }
  p{margin:0}
  .prose{display:flex;flex-direction:column;gap:1.1rem;max-width:var(--measure)}
  .prose h3{margin-top:.9rem;color:var(--ink)}
  .lead{
    font-size:clamp(1.1875rem,2.4vw,1.4375rem);
    line-height:1.55;
    color:var(--ink);
  }
  .eyebrow{
    font-family:var(--sans);
    font-size:.6875rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--brick);
    margin:0 0 .9rem;
  }
  .muted{color:var(--muted)}

  /* ---------- hero ---------- */
  .hero{
    padding-block:clamp(2.5rem,6vw,4.25rem) 0;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    align-items:end;
  }
  @media (min-width:60rem){
    .hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}
  }
  .hero-text{display:flex;flex-direction:column;gap:1.25rem}
  .hero-figure figcaption{
    font-family:var(--sans);
    font-size:.75rem;
    letter-spacing:.06em;
    color:var(--muted);
    margin-top:.65rem;
  }
  .hero-figure img{
    width:100%;
    height:auto;
    filter:saturate(.94);
  }

  /* ---------- entry cards ---------- */
  .entries{
    display:grid;
    gap:1px;
    background:var(--line);
    border-block:1px solid var(--line);
    grid-template-columns:1fr;
  }
  @media (min-width:48rem){.entries{grid-template-columns:repeat(3,1fr)}}
  .entry{
    background:var(--paper);
    padding:1.75rem 1.5rem 1.9rem;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    text-decoration:none;
    transition:background .2s ease;
  }
  .entry:hover{background:var(--sand)}
  .entry .num{
    font-family:var(--sans);
    font-size:.6875rem;
    letter-spacing:.2em;
    color:var(--brick);
    text-transform:uppercase;
  }
  .entry p{color:var(--muted);font-size:.9875rem;line-height:1.6}
  .entry .go{
    font-family:var(--sans);
    font-size:.8125rem;
    color:var(--brick);
    margin-top:.35rem;
  }

  /* ---------- portrait block ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    align-items:start;
  }
  @media (min-width:52rem){
    .about-grid{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:3rem}
  }
  .portrait{
    width:100%;
    max-width:15rem;
    height:auto;
    border:1px solid var(--line);
  }

  /* ---------- lists ---------- */
  ul.plain{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
  ul.plain li{padding-left:.15rem}
  ul.plain li::marker{color:var(--brick-soft)}

  /* ---------- CV timeline ---------- */
  .cv{display:flex;flex-direction:column;gap:2.25rem;max-width:44rem}
  .cv-item{
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem 2rem;
    padding-top:1.4rem;
    border-top:1px solid var(--line);
  }
  @media (min-width:44rem){
    .cv-item{grid-template-columns:9.5rem minmax(0,1fr)}
  }
  .cv-when{
    font-family:var(--sans);
    font-size:.8125rem;
    letter-spacing:.04em;
    color:var(--brick);
    padding-top:.28rem;
  }
  .cv-what h3{margin-bottom:.4rem}
  .cv-what p, .cv-what li{color:var(--muted);font-size:.9875rem;line-height:1.62}

  /* ---------- price table ---------- */
  .prices{display:flex;flex-direction:column;gap:2rem;max-width:36rem}
  .price-group h3{margin-bottom:.75rem}
  .price-rows{display:flex;flex-direction:column}
  .price-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1.5rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--line);
  }
  .price-row span:first-child{color:var(--muted);font-size:.9875rem}
  .price-row span:last-child{
    font-family:var(--sans);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  /* ---------- contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem 3rem;
  }
  @media (min-width:48rem){.contact-grid{grid-template-columns:1fr 1fr}}
  .fact{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    padding:.9rem 0;
    border-bottom:1px solid var(--line);
  }
  .fact dt{
    font-family:var(--sans);
    font-size:.6875rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .fact dd{margin:0;font-size:1.0625rem}
  .fact a{color:var(--brick);text-decoration-thickness:1px;text-underline-offset:3px}

  .notice{
    background:var(--sand-deep);
    border-left:3px solid var(--brick);
    padding:1.1rem 1.25rem;
    max-width:var(--measure);
  }
  .notice p{font-size:.9875rem;line-height:1.6}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:var(--sans);
    font-size:.875rem;
    font-weight:500;
    letter-spacing:.02em;
    padding:.7rem 1.35rem;
    background:var(--brick);
    color:var(--paper);
    text-decoration:none;
    border-radius:2px;
    transition:background .18s ease;
    align-self:flex-start;
  }
  .btn:hover{background:var(--brick-soft)}

  /* ---------- footer ---------- */
  .site-foot{
    background:var(--sand);
    border-top:1px solid var(--line);
    padding-block:2.5rem;
    font-family:var(--sans);
    font-size:.875rem;
    color:var(--muted);
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem 3rem;
  }
  @media (min-width:44rem){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
  .foot-grid h4{
    font-family:var(--sans);
    font-size:.6875rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin:0 0 .6rem;
    color:var(--ink);
    font-weight:600;
  }
  .foot-grid a{color:var(--muted);text-decoration:none;display:block;padding:.15rem 0}
  .foot-grid a:hover{color:var(--brick)}

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
  }

/* ---------- WordPress ---------- */
nav.main ul,
nav.main ul.menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .35rem;
}
nav.main li{margin:0}
nav.main .current-menu-item > a,
nav.main .current_page_item > a{
  color:var(--brick);
  box-shadow:inset 0 -1px 0 var(--brick);
}

.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip-link:focus{
  position:fixed!important;
  top:.5rem;left:.5rem;
  width:auto;height:auto;
  clip:auto;clip-path:none;
  z-index:100;
  background:var(--brick);
  color:var(--paper);
  padding:.6rem 1rem;
  font-family:var(--sans);
  font-size:.875rem;
  text-decoration:none;
}

.alignwide{max-width:var(--wide)}
.alignfull{max-width:none}
.wp-caption-text, figcaption{
  font-family:var(--sans);
  font-size:.75rem;
  color:var(--muted);
}
.prose ul, .prose ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.prose ul li::marker, .prose ol li::marker{color:var(--brick-soft)}
.prose a{color:var(--brick);text-underline-offset:3px}

/* ============================================================
   BLOK-EDITOR: indholdslayout
   Alt sideindhold ligger i .entry-content, som er et grid med
   tre spor: content (læsebredde), wide og full (kant til kant).
   ============================================================ */
.entry-content{
  padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem);
}

/* Centrering uden grid: virker uanset hvilke styles WordPress selv
   lægger oven på blokkene. */
.entry-content > *,
.wp-block-group.alignfull > *,
.wp-block-group.alignfull > .wp-block-group__inner-container > *{
  width:min(34rem, 100% - 2.5rem);
  margin-inline:auto;
  box-sizing:border-box;
}
.entry-content > .alignwide,
.wp-block-group.alignfull > .alignwide,
.wp-block-group.alignfull > .wp-block-group__inner-container > .alignwide{
  width:min(64rem, 100% - 2.5rem);
}
.entry-content > .alignfull,
.wp-block-group.alignfull > .alignfull,
.wp-block-group.alignfull > .wp-block-group__inner-container > .alignfull{
  width:100%;
}

/* WordPress pakker nogle gange gruppens indhold i en ekstra div.
   display:contents gør den gennemsigtig, så reglerne ovenfor virker
   i begge tilfælde. */
.wp-block-group.alignfull > .wp-block-group__inner-container{display:contents}

/* Lodret rytme */
.entry-content > * + *,
.wp-block-group.alignfull > * + *,
.wp-block-group.alignfull > .wp-block-group__inner-container > * + *{margin-block-start:1.15rem}
.entry-content > * + h2,
.wp-block-group.alignfull > * + h2,
.wp-block-group.alignfull > .wp-block-group__inner-container > * + h2{margin-block-start:2.75rem}
.entry-content > * + h3,
.wp-block-group.alignfull > * + h3,
.wp-block-group.alignfull > .wp-block-group__inner-container > * + h3{margin-block-start:2rem}
.entry-content > * + .alignfull,
.entry-content > .alignfull + *{margin-block-start:clamp(2.75rem,6vw,4.5rem)}
.entry-content > * + .wp-block-columns{margin-block-start:clamp(2.5rem,6vw,4rem)}
.entry-content > :first-child{margin-block-start:0}

/* Sandfarvet bånd */
.wp-block-group.section--sand{
  background:var(--sand);
  border-block:1px solid var(--line-soft);
  padding-block:clamp(2.75rem,6vw,4.5rem);
}

/* Fremhævet boks */
.wp-block-group.notice{
  background:var(--sand-deep);
  border-left:3px solid var(--brick);
  padding:1.1rem 1.25rem;
}
.wp-block-group.notice p{font-size:.9875rem;line-height:1.6}

/* Kolonner */
.wp-block-columns{margin-block:0;align-items:flex-start}
.wp-block-columns.hero-cols{align-items:flex-end;gap:3rem}
.wp-block-columns.about-cols{gap:3rem}

.wp-block-columns.entries{
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.wp-block-columns.entries > .wp-block-column{
  background:var(--paper);
  padding:1.75rem 1.5rem 1.9rem;
}
.wp-block-columns.entries h3{font-size:1.1875rem;margin-block:.55rem .55rem}
.wp-block-columns.entries p{color:var(--muted);font-size:.9875rem;line-height:1.6}
.wp-block-columns.entries p:last-child{margin-block-start:.9rem}

@media (max-width:781px){
  .wp-block-columns.entries > .wp-block-column + .wp-block-column{
    border-top:1px solid var(--line);
  }
  .wp-block-columns.hero-cols, .wp-block-columns.about-cols{gap:2rem}
}

/* Billeder */
.wp-block-image{margin-block-end:0}
.wp-block-image img{width:100%;height:auto}
.wp-block-image figcaption{
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--muted);
  margin-top:.65rem;
  text-align:left;
}
.wp-block-image.portrait img{border:1px solid var(--line);max-width:15rem}

/* Knapper */
.wp-block-buttons{margin-block-start:1.6rem!important}
.wp-block-button__link{
  font-family:var(--sans);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:.7rem 1.35rem;
  background:var(--brick);
  color:var(--paper);
  border-radius:2px;
  text-decoration:none;
}
.wp-block-button__link:hover{background:var(--brick-soft);color:var(--paper)}

/* Lister */
.entry-content ul, .entry-content ol,
.wp-block-group__inner-container ul, .wp-block-group__inner-container ol{
  margin-block-end:0;
  padding-left:1.2rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.entry-content li::marker{color:var(--brick-soft)}
.entry-content a{color:var(--brick);text-underline-offset:3px}

/* Prisliste og andre tabeller */
.wp-block-table{margin-block-end:0;overflow-x:auto}
.wp-block-table table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.wp-block-table td, .wp-block-table th{
  border:0;
  border-bottom:1px solid var(--line);
  padding:.6rem 0;
  text-align:left;
  font-weight:400;
}
.wp-block-table td:last-child, .wp-block-table th:last-child{
  text-align:right;
  font-family:var(--sans);
  white-space:nowrap;
}
.wp-block-table td:first-child{color:var(--muted);font-size:.9875rem}

/* Tekstroller, sættes som CSS-klasse på afsnittet i editoren */
.entry-content .lead{
  font-size:clamp(1.1875rem,2.4vw,1.4375rem);
  line-height:1.55;
}
.entry-content .eyebrow{margin-block-end:0}
.entry-content .eyebrow + *{margin-block-start:.6rem!important}
.entry-content .cv-when{
  font-family:var(--sans);
  font-size:.8125rem;
  letter-spacing:.04em;
  color:var(--brick);
}
.entry-content .cv-when + *{margin-block-start:.35rem!important}
.entry-content .small{font-size:.9375rem;color:var(--muted)}

/* Kontakttabel: venstrestillet værdikolonne */
.wp-block-table.info-table td:last-child,
.wp-block-table.info-table th:last-child{
  text-align:left;
  font-family:var(--serif);
  white-space:normal;
}
.wp-block-table.info-table td:first-child{
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  width:9rem;
  vertical-align:top;
  padding-top:.95rem;
}

.wp-block-group.alignfull > :first-child,
.wp-block-group.alignfull > .wp-block-group__inner-container > :first-child{margin-block-start:0}
.entry-content .cv-when{margin-block-start:2.25rem}
.entry-content > :first-child.cv-when{margin-block-start:0}

/* Grundlæggende bloklayout, så temaet også holder hvis
   WordPress' egne blok-styles ikke indlæses. */
.wp-block-columns{display:flex;flex-wrap:wrap;gap:2rem}
.wp-block-column{flex-grow:1;min-width:0;flex-basis:100%}
@media (min-width:782px){
  .wp-block-column{flex-basis:0;flex-grow:1}
}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem}
.wp-block-button__link{display:inline-block}
.wp-block-group{box-sizing:border-box}

/* Rettelser efter visuel gennemgang */
.entry-content .wp-block-button__link{color:var(--paper);text-decoration:none}
.entry-content .wp-block-button__link:hover{color:var(--paper)}
.wp-block-columns.entries{align-items:stretch}
.wp-block-columns.entries > .wp-block-column{display:flex;flex-direction:column}
.wp-block-columns.entries > .wp-block-column > p:last-child{margin-top:auto}
.wp-block-column[style*="flex-basis"]{flex-grow:0}
.wp-block-column > * + *{margin-block-start:1.15rem}
.wp-block-column > * + h2{margin-block-start:2.25rem}
.wp-block-column > * + h3{margin-block-start:1.75rem}
.wp-block-columns.about-cols p, .wp-block-columns.about-cols li{max-width:36rem}
.wp-block-columns.entries > .wp-block-column > * + *{margin-block-start:.55rem}

/* Centreringen må ikke kunne nulstilles af en margin-genvej i en
   blokregel længere nede. */
.entry-content > *,
.wp-block-group.alignfull > *,
.wp-block-group.alignfull > .wp-block-group__inner-container > *{
  margin-inline:auto;
}