/* Site chrome: header, nav, mobile menu, footer. Not editable via blocks — lives in header.php/footer.php. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 244, 239, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(43, 49, 45, .09);
}
.site-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-header__brand img { display: block; height: 34px; width: auto; }
.site-header__nav { display: flex; align-items: center; gap: 28px; font-size: 13.5px; letter-spacing: .01em; }
.site-header__nav a { color: #5c675f; }
.site-header__nav a:hover { color: #2b312d; }
.site-header__cta {
  padding: 9px 18px;
  background: #3f5548;
  border-radius: 999px;
  color: #f6f4ef !important;
}
.site-header__cta:hover { background: #26332b; color: #f6f4ef !important; }
.site-header__mobile { display: none; margin-left: auto; }
.site-header__mobile summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(63, 85, 72, .3);
  border-radius: 6px;
  cursor: pointer;
}
.site-header__mobile summary::-webkit-details-marker { display: none; }
.site-header__mobile summary span { display: block; height: 1.5px; background: #3f5548; }
.site-header__mobile nav {
  display: flex;
  flex-direction: column;
  padding: 6px 20px 18px;
  border-top: 1px solid rgba(43, 49, 45, .09);
  font-size: 16px;
  /* .site-header__inner has align-items:center, so a growing <details> gets
     vertically centered against the 74px header row instead of expanding
     downward — that shot the open menu up off the top of the screen.
     Taking the nav out of flow with position:fixed, anchored to the exact
     header height, sidesteps the centering entirely. */
  position: fixed;
  top: 74px;
  left: 0;
  right: 0;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  background: #f6f4ef;
  box-shadow: 0 12px 20px rgba(43, 49, 45, .12);
  z-index: 19;
}
.site-header__mobile nav a {
  padding: 13px 0;
  color: #333b34;
  border-bottom: 1px solid rgba(43, 49, 45, .08);
}
.site-header__mobile .site-header__cta {
  margin-top: 14px;
  padding: 14px 0;
  text-align: center;
}

.site-footer { background: #2c3b32; color: #b9c4b9; }
.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__brand img { opacity: .8; }

@media (min-width: 901px) {
  .site-header__mobile { display: none !important; }
}
@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__mobile { display: flex; }
}

/* --- Scoped exceptions: things native blocks can't express (brief step 4) --- */

/* theme.json's global default is font-weight:300 (matching the source's body
   copy), but the source never sets an explicit weight on its small uppercase
   eyebrow/label text or testimonial attribution lines — meaning they render
   at the browser's normal 400, not 300. Every element using the "eyebrow"
   text color in the source follows this same unweighted pattern, so one
   rule on that color class covers all of them (section eyebrows, testimonial
   "who" lines, the hero/footnote notes, the Email label). Area-item and
   price-name text uses the separate "ink-soft" color, which the source
   leaves at 400 in those two contexts specifically (other ink-soft text,
   like testimonial quotes and the Klinikken address, is deliberately 300),
   so those need their own narrower scope instead of a color-wide rule. */
.has-eyebrow-color { font-weight: 400; }
.area-item p { font-weight: 400; }
.price-row p:first-child { font-weight: 400; }
.contact-form-card label { font-weight: 400; }

/* Fagområder items: icon top-aligned with first line (not vertically centered —
   matters for the two-line items), sized and spaced to the source's exact math:
   20px padding + 17px icon + 12px gap = 49px text offset. */
.area-item { position: relative; padding-left: 49px !important; }
.area-item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 17px;
  height: 17px;
  background: url('leaf.svg') no-repeat center / contain;
  opacity: .85;
}

/* The frame box must be sized against the image itself (420px), not the
   45%-width column it sits in — the column is considerably wider than the
   image (which is right-aligned via margin-left:auto), so a pseudo-element
   anchored to the column was rendering at the wrong size and position. */
.framed-portrait .wp-block-image { position: relative; z-index: 0; }
.framed-portrait .wp-block-image::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 26px;
  right: -22px;
  bottom: -22px;
  background: #dfe5da;
  border-radius: 3px;
  z-index: -1;
}

/* Column images that flex-grow to fill the height of a taller sibling column
   (Min tilgang, Faglig baggrund, Priser og vilkår) — no block control for this. */
.fill-column-image { display: flex; flex-direction: column; }
.fill-column-image > .wp-block-heading,
.fill-column-image > p { flex: none; }
/* flex-basis:0 (matching the source's "flex:1 1 0") isn't enough on its
   own: height:100% on the <img> falls back to the image's own intrinsic
   aspect-ratio height, because the figure's flex-computed height isn't
   "definite" early enough in layout for percentage resolution to use it —
   a circular dependency that silently defeats flex-grow and let the image
   render taller than its sibling column's actual content. Taking the img
   out of flow with absolute positioning sidesteps the circularity, since
   inset:0 is resolved against the figure's box after flex layout completes. */
.fill-column-image .wp-block-image { flex: 1 1 0%; margin: 0; min-height: 0; position: relative; overflow: hidden; }
.fill-column-image .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Small leaf-icon motif before eyebrow labels — no block control for this.
   Base size covers the hero-badge-adjacent contexts; Udtalelser uses a
   differently-sized source icon (18px) via a scoped override. */
.leaf-label { position: relative; padding-left: 22px !important; display: block; }
.leaf-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: url('leaf.svg') no-repeat center / contain;
  opacity: .85;
}
#udtalelser .leaf-label { padding-left: 30px !important; }
#udtalelser .leaf-label::before { width: 18px; height: 18px; }

/* Praktisk's Henvisning/Afbud/Fortrolighed items: the source lays these out
   as icon in its own column beside a second column holding the title +
   body text stacked — not icon+title on one row with the text falling
   below at the full width. The icon sits on the wrapping group (not the
   heading) so its padding-left indents both the H3 and the paragraph
   after it into a shared second "column", with the icon top-aligned 5px
   down to match the source's flex row (not vertically centered). */
.leaf-label-item { position: relative; padding-left: 29px !important; }
.leaf-label-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 17px;
  height: 17px;
  background: url('leaf.svg') no-repeat center / contain;
  opacity: .85;
}

.leaf-label-light { position: relative; padding-left: 60px !important; }
.leaf-label-light::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 28px;
  width: 20px;
  height: 20px;
  background: url('leaf-light.svg') no-repeat center / contain;
}

/* Hero eyebrow badge: an actual pill (inline-flex + radius), not just indented text. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px !important;
  border-radius: 999px;
  margin: 0 0 24px !important;
}
.hero-badge::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: url('leaf.svg') no-repeat center / contain;
}

/* Photo-quote bands: the design uses a directional gradient dim, not a flat one —
   no block control expresses a gradient overlay on Cover in this direction/color. */
.photo-band .wp-block-cover__background {
  background: linear-gradient(90deg, rgba(35, 45, 38, .62), rgba(35, 45, 38, .15)) !important;
  opacity: 1 !important;
}
.photo-band-bottom .wp-block-cover__inner-container { align-self: flex-end; padding-bottom: 6rem; width: 100%; }

/* Testimonial cards: the "who" line sticks to the card bottom regardless of
   quote length (flex column + margin-top:auto on the last child). */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-card > p:last-child { margin-top: auto; }

/* Find vej's "Åbn i Google Maps" button uses smaller padding/font-size than
   every other pill button on the page. */
.findvej-btn .wp-block-button__link { padding: 13px 22px !important; font-size: 14px !important; }

/* Outline buttons (Skriv en mail, Åbn i Google Maps): WP core's default
   is-style-outline is a 2px currentColor border, not the source's 1px
   translucent accent border + explicit accent text — theme.json's button
   element only styles the default (solid) button style. */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid rgba(63, 85, 72, .35);
  color: #3f5548;
  background: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #3f5548 !important;
  color: #f6f4ef !important;
  border-color: #3f5548 !important;
}

/* Hero section background is a top-to-bottom gradient in the source, not a
   flat tint color — no block control expresses a gradient section background. */
#top.wp-block-group {
  background: linear-gradient(180deg, #eef0e8 0%, #f6f4ef 100%) !important;
}

/* Fagområder items: the source gives each item a min-height so single-line
   items match the height of two-line siblings in the same grid row. */
.area-item { min-height: 76px; }

/* Praktisk price rows: name/price pair align to text baseline, not center. */
.price-row { align-items: baseline !important; gap: 24px !important; }

/* The following max-width/white-space/word-break/alignment rules exist
   entirely outside what their block's own "style" attribute supports —
   core/paragraph, core/column, core/group and core/image don't have
   schema for these, so they must live in scoped CSS instead of inline
   style (inline versions of these silently break block-editor validation,
   since save() can never reproduce a property with no attribute backing it). */
.hero-intro { max-width: 33em; }
.kontakt-intro { max-width: 30em; }
.text-col { max-width: 38em; }
.info-list { max-width: 40em; }
.framed-portrait .wp-block-image { max-width: 420px; margin-left: auto; margin-right: 0; }
.framed-portrait .wp-block-image img { width: 100%; height: 520px; object-fit: cover; object-position: 50% 20%; filter: saturate(.94); }

/* Cover block background images: core/cover's own schema only supports a
   focalPoint-driven object-position, not saturation filters, so the exact
   crop + color-grade the design calls for has to live here instead. */
.photo-band-bottom .wp-block-cover__image-background { object-position: 50% 55%; filter: saturate(.85); }
.photo-band:not(.photo-band-bottom) .wp-block-cover__image-background { object-position: 50% 62%; filter: saturate(.85); }

/* Fill-column images (Min tilgang / Faglig baggrund / Priser og vilkår):
   core/image only supports border in its style schema, so crop position,
   min-height and color grading for these three photos live here. */
#tilgang .fill-column-image img { filter: saturate(.85) brightness(.95); min-height: 300px; }
#baggrund .fill-column-image img { object-position: 50% 12%; filter: saturate(.94); }
#praktisk .fill-column-image img { filter: saturate(.88); min-height: 260px; }
.price-amount { white-space: nowrap; }
.email-address { word-break: break-all; }
.findvej-header { align-items: flex-end; }

/* Kontakt phone/email boxes hover as a whole card, matching the source's
   whole-box <a> hover — the box itself isn't a single link (so the block
   stays editable per-field), so the hover is applied to the box directly. */
.phone-box { cursor: pointer; transition: background-color .2s; }
.phone-box:hover { background-color: #26332b !important; }
.email-box { cursor: pointer; transition: background-color .2s, color .2s; }
.email-box:hover { background-color: #eef0e8 !important; }
.email-box:hover a { color: #26332b !important; }

/* --- Responsive overrides, ported from design/hjemmeside.dc.html --- */
@media (max-width: 900px) {
  .wp-block-columns { flex-wrap: wrap !important; }
  .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
  .wp-block-columns { column-gap: 34px !important; row-gap: 34px !important; }
  .is-layout-grid { grid-template-columns: 1fr !important; }
  h1 { font-size: 42px !important; line-height: 1.12 !important; }
  h2 { font-size: 32px !important; }
  section[id] { padding-top: 52px !important; padding-bottom: 52px !important; padding-left: 20px !important; padding-right: 20px !important; }

  /* Column images that flex-grow to match a sibling on desktop become a fixed
     short height once columns stack (there's no sibling to match anymore). */
  .fill-column-image .wp-block-image { flex: none; }
  .fill-column-image .wp-block-image img { height: 230px !important; min-height: 230px !important; }

  /* Photo-quote bands shrink; hero portrait becomes square and moves above the text. */
  .wp-block-cover[style*="min-height:340px"] { min-height: 190px !important; }
  #top .wp-block-columns { flex-direction: column; }
  #top .framed-portrait {
    order: -1;
    width: 50% !important;
    max-width: none !important;
    flex-basis: auto !important;
    align-self: center;
    margin: 0 auto 8px;
  }
  #top .framed-portrait img { aspect-ratio: 1/1; height: auto !important; object-position: 50% top; }
  #top .framed-portrait .wp-block-image::before { left: 12px; top: 12px; right: 8px; bottom: -12px; }
  #top > .wp-block-columns > .wp-block-column:not(.framed-portrait) { text-align: center; }
  #top .wp-block-buttons { justify-content: center; }
  #top .hero-badge {
    justify-content: center;
    align-self: center;
    margin: 0 auto 24px !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    padding: 8px 0 !important;
    max-width: 100%;
  }

  /* Photo-band quote text and the Min tilgang intro paragraph shrink. */
  .wp-block-cover p[style*="font-size:26px"] { font-size: 18px !important; }
  p[style*="font-size:25px"] { font-size: 20px !important; }

  iframe { height: 300px !important; }
  .contact-form-card { padding: 26px 20px !important; }

  .site-footer__inner { justify-content: center !important; text-align: center; gap: 12px !important; }
  .site-footer__brand { flex-direction: row; align-items: center; justify-content: center; }
}
@media (max-width: 560px) {
  h1 { font-size: 34px !important; }
  h2 { font-size: 27px !important; }
  .wp-block-group[style*="justify-content:space-between"] { flex-wrap: wrap; }
}

/* Contact Form 7 field/button styling — CF7 renders its own markup with its
   own classes (wpcf7-form-control, wpcf7-submit), which none of the theme's
   native block button/input styles reach, so the submit button was rendering
   as an unstyled browser-default button. */
.contact-form-card .wpcf7-form-control {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(43, 49, 45, .18);
  background: #fff;
  border-radius: 2px;
  font-size: 15.5px;
  color: #2b312d;
  margin-top: 7px;
}
.contact-form-card label { display: block; font-size: 12.5px; letter-spacing: .06em; color: #5f6b62; }
.contact-form-card .wpcf7-form-control:focus { outline: none; border-color: #4a6152; }
.contact-form-card textarea.wpcf7-form-control { line-height: 1.6; resize: vertical; height: calc(1.2em * 5 + 26px); }
.contact-form-card input[type="submit"].wpcf7-submit {
  display: inline-block;
  width: auto;
  margin-top: 4px;
  padding: 14px 26px;
  background: #3f5548;
  color: #f6f4ef;
  border: none;
  border-radius: 999px;
  font-size: 14.5px;
  cursor: pointer;
}
.contact-form-card input[type="submit"].wpcf7-submit:hover { background: #26332b; }
.contact-form-card p { margin: 0 0 18px; }
.contact-form-card .wpcf7-spinner { margin-left: 10px; }
/* CF7's visually-hidden a11y status paragraph stays in normal flow, so its
   own margin was adding a phantom 18px gap above the form before anything
   in it was actually visible. */
.contact-form-card .screen-reader-response { margin: 0; }
.contact-form-card .screen-reader-response p { margin: 0; }