/*
Theme Name: Norsk Arbeidshelse
Theme URI: https://arbeidshelse.grebbestad.com/
Author: Norsk Arbeidshelse
Description: Lett, skreddersydd blokktema for Norsk Arbeidshelse.
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: norsk-arbeidshelse
*/

:root {
  --na-navy: #0d2d4c;
  --na-blue: #17539a;
  --na-wine: #651923;
  --na-wine-dark: #491017;
  --na-ink: #10253a;
  --na-cream: #f7f3ee;
  --na-mist: #edf2f3;
  --na-white: #fff;
  --na-line: #d7dcdf;
  --na-radius: 2px;
  --na-shadow: 0 18px 45px rgba(13, 45, 76, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--na-ink); background: #fffdfb; }
a { text-underline-offset: .18em; }
:focus-visible { outline: 3px solid #f2b84b; outline-offset: 3px; }
.wp-site-blocks { overflow: hidden; }
.na-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.na-site-header {
  background: rgba(255,253,251,.97);
  border-bottom: 1px solid rgba(13,45,76,.08);
  position: relative;
  z-index: 20;
}
.na-header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.na-logo { display: block; width: 260px; height: 58px; background: url('assets/images/logo.png') left center / contain no-repeat; }
.na-site-header .wp-block-navigation { font-size: .93rem; font-weight: 600; }
.na-site-header .wp-block-navigation-item__content { color: var(--na-ink); text-decoration: none; }
.na-site-header .wp-block-navigation-item__content:hover { color: var(--na-wine); }

.na-hero {
  min-height: 530px;
  display: grid;
  align-items: center;
  background-image: linear-gradient(90deg, rgba(247,243,238,.98) 0%, rgba(247,243,238,.91) 42%, rgba(247,243,238,.08) 67%), url('assets/images/hero.jpg');
  background-position: center, center 38%;
  background-size: cover;
}
.na-hero__content { width: min(1180px, calc(100% - 40px)); margin-inline: auto; padding: 80px 0; }
.na-eyebrow { color: var(--na-wine); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.na-hero h1 { color: var(--na-wine-dark); font-size: clamp(3rem, 6.1vw, 5.75rem); line-height: .97; max-width: 760px; margin: 16px 0 22px; }
.na-hero p { font-size: 1.16rem; line-height: 1.55; max-width: 510px; }
.na-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.na-button, .na-button:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 23px; background: var(--na-wine); border: 1px solid var(--na-wine); color: #fff; font-weight: 700; text-decoration: none; }
.na-button:hover { background: var(--na-wine-dark); }
.na-button--outline, .na-button--outline:visited { background: transparent; color: var(--na-wine); }

.na-section { padding: clamp(64px, 8vw, 105px) 0; }
.na-section--compact { padding: 58px 0; }
.na-section--cream { background: var(--na-cream); }
.na-section--mist { background: var(--na-mist); }
.na-section h2, .na-page-hero h1 { color: var(--na-navy); font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.05; }
.na-lead { max-width: 760px; font-size: 1.18rem; line-height: 1.65; }
.na-grid { display: grid; gap: 24px; }
.na-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.na-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.na-entry-card { min-height: 190px; padding: 38px; color: #fff; background: linear-gradient(135deg, var(--na-wine-dark), #812c36); box-shadow: var(--na-shadow); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.na-entry-card--blue { background: linear-gradient(135deg, var(--na-navy), #174a73); }
.na-entry-card h3 { color: #fff; font-size: 2rem; margin: 0; }
.na-entry-card span { font-size: 2rem; }
.na-entry-card:hover { transform: translateY(-3px); transition: transform .18s ease; }
.na-feature { padding: 28px 28px 32px; border-left: 1px solid var(--na-line); }
.na-feature:first-child { border-left: 0; }
.na-number { color: var(--na-wine); font-family: Georgia, serif; font-size: 2.1rem; }
.na-feature h3 { margin: 12px 0 8px; color: var(--na-navy); font-size: 1.55rem; }
.na-feature p { line-height: 1.65; }

.na-stat { color: #fff; background: linear-gradient(120deg, var(--na-wine-dark), var(--na-wine)); }
.na-stat__inner { display: grid; grid-template-columns: 240px 1fr; gap: 50px; align-items: center; padding: 44px 0; }
.na-stat strong { display: block; font: 4.8rem/.9 Georgia, serif; }
.na-stat p { max-width: 640px; font-size: 1.08rem; line-height: 1.6; }
.na-contact-strip { background: #fffdfb; }
.na-contact-strip__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; padding: 65px 0; }
.na-contact-strip h2 { margin: 0 0 12px; }
.na-contact-list { list-style: none; margin: 0 0 22px; padding: 0; }
.na-contact-list li { margin: 9px 0; }

.na-page-hero { padding: clamp(74px, 9vw, 130px) 0; background: var(--na-cream); }
.na-page-hero--patient { background: linear-gradient(90deg, rgba(13,45,76,.89), rgba(13,45,76,.5)), url('assets/images/patient.jpg') center 45% / cover; color: #fff; }
.na-page-hero--professional { background: linear-gradient(90deg, rgba(73,16,23,.91), rgba(73,16,23,.48)), url('assets/images/professional.jpg') center / cover; color: #fff; }
.na-page-hero--patient h1, .na-page-hero--professional h1 { color: #fff; }
.na-page-hero .na-lead { max-width: 680px; }
.na-content { width: min(900px, calc(100% - 40px)); margin-inline: auto; padding: 70px 0 100px; }
.na-content > h2 { margin-top: 2.2em; color: var(--na-navy); }
.na-content > h2:first-child { margin-top: 0; }
.na-content h3 { color: var(--na-wine); }
.na-content p, .na-content li { line-height: 1.75; }
.na-content hr { border: 0; border-top: 1px solid var(--na-line); margin: 48px 0; }
.na-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 32px 0; padding: 0; list-style: none; counter-reset: steps; }
.na-process li { min-height: 125px; padding: 22px 18px; background: var(--na-mist); counter-increment: steps; }
.na-process li::before { content: counter(steps, decimal-leading-zero); display: block; color: var(--na-wine); font: 1.45rem Georgia, serif; margin-bottom: 8px; }
.na-notice { padding: 22px 24px; border-left: 4px solid var(--na-wine); background: var(--na-cream); }
.na-area-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.na-area-list li { padding: 10px 14px; background: var(--na-mist); }
.na-demo-label { display: inline-block; margin-bottom: 20px; padding: 7px 11px; color: var(--na-wine-dark); background: #f5e4e5; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.na-carousel { position: relative; margin: 35px 0 25px; }
.na-carousel__viewport { overflow: hidden; }
.na-carousel__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 8px; }
.na-carousel__track::-webkit-scrollbar { display: none; }
.na-person { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; scroll-snap-align: start; background: #fff; box-shadow: var(--na-shadow); }
.na-person img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.na-person__body { padding: 22px 22px 25px; }
.na-person h3 { margin: 0 0 5px; color: var(--na-navy); font-size: 1.45rem; }
.na-person p { margin: 0; color: #53616e; line-height: 1.5; }
.na-carousel__controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.na-carousel__button { width: 48px; height: 48px; border: 1px solid var(--na-wine); color: var(--na-wine); background: #fff; font-size: 1.5rem; cursor: pointer; }
.na-carousel__button:hover { color: #fff; background: var(--na-wine); }
.na-carousel__button:disabled { opacity: .35; cursor: default; }
.na-team-section { background: #fffdfb; }
.na-faq-section h2 { margin-bottom: 30px; }
.na-faq-list { border-top: 1px solid rgba(101,25,35,.45); }
.na-faq { border-bottom: 1px solid rgba(101,25,35,.45); }
.na-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 14px; color: var(--na-ink); cursor: pointer; font-weight: 650; list-style: none; }
.na-faq summary::-webkit-details-marker { display: none; }
.na-faq summary span { color: var(--na-wine); font-size: 1.45rem; font-weight: 400; transition: transform .2s ease; }
.na-faq[open] summary span { transform: rotate(45deg); }
.na-faq__answer { max-width: 800px; padding: 0 48px 22px 14px; }
.na-faq__answer p { margin: 0; line-height: 1.7; }
.na-site-footer { color: #fff; background: var(--na-navy); }
.na-footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; padding: 65px 0; }
.na-site-footer a { color: #fff; }
.na-footer-logo { width: 230px; filter: brightness(0) invert(1); }
.na-footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: .88rem; }

@media (max-width: 900px) {
  .na-header-inner { min-height: 76px; }
  .na-logo { width: 210px; height: 48px; }
  .na-hero { min-height: 620px; align-items: end; background-image: linear-gradient(0deg, rgba(247,243,238,1) 0%, rgba(247,243,238,.92) 43%, rgba(247,243,238,.06) 74%), url('assets/images/hero.jpg'); background-position: center, 66% center; }
  .na-hero__content { padding-top: 290px; }
  .na-grid--3, .na-process, .na-footer-inner { grid-template-columns: 1fr; }
  .na-person { flex-basis: calc((100% - 24px) / 2); }
  .na-grid--2, .na-contact-strip__inner { grid-template-columns: 1fr; gap: 28px; }
  .na-feature { border-left: 0; border-top: 1px solid var(--na-line); }
  .na-feature:first-child { border-top: 0; }
  .na-stat__inner { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .na-shell, .na-hero__content, .na-content { width: min(100% - 28px, 1180px); }
  .na-hero h1 { font-size: 2.85rem; }
  .na-entry-card { min-height: 155px; padding: 28px; }
  .na-person { flex-basis: 86%; }
  .na-section { padding: 58px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}