/*
Theme Name: HLA-mottagningen
Description: Hjärt-, lung-, allergimottagningen vid Sophiahemmets sjukhus
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hla-mottagningen
*/

/* ─── Custom properties ──────────────────────────────── */
:root {
  --sand:      #d3bda0;
  --sand-s:    color-mix(in srgb,#d3bda0 78%,white);
  --cream:     #f4ede1;
  --paper:     #fbf7f0;
  --ink:       #2a251f;
  --sub:       #6f6757;
  --line:      #e3d9c8;
  --char:      #23201b;
  --char-s:    #3a352d;
  --head:      'Fira Sans Condensed','Cabin Condensed',sans-serif;
}

/* ─── Reset ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
body { overflow-x:hidden; -webkit-font-smoothing:antialiased; background:var(--cream); }
.wp-site-blocks { overflow-x:hidden; }
/* Inga mellanrum mellan toppsektionerna (header / main / footer) */
.wp-site-blocks > * { margin-block-start:0 !important; margin-block-end:0 !important; }
.wp-block-template-part footer { margin-block-start:0 !important; }

/* ─── Header ─────────────────────────────────────────── */
.site-header { background:var(--sand); position:sticky; top:0; z-index:100; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 32px; max-width:1180px; margin:0 auto; }
.hdr-mark img { height:46px !important; width:auto !important; display:block; }
.brand-link { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-link .hdr-mark { height:46px; width:auto; display:block; flex:0 0 auto; }
.brand-text { display:flex; flex-direction:column; gap:2px; }
.brand-name { font-family:'Nunito',sans-serif; font-weight:400; font-size:17px; color:var(--char); line-height:1.1; white-space:nowrap; margin:0; display:block; }
.brand-sub { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--char-s); margin:0; white-space:nowrap; display:block; }
.brand-sub .brand-vid { font-weight:800; color:var(--char); }
.site-header .wp-block-navigation a { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--char); text-decoration:none; padding:8px 11px; border-radius:999px; white-space:nowrap; transition:background .15s; }
.site-header .wp-block-navigation a:hover { background:var(--sand-s); }
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation a.hla-active { background:var(--char); color:var(--cream); }

/* ─── Hero ───────────────────────────────────────────── */
.hero-section { background:var(--sand); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; max-width:1180px; margin:0 auto; padding:56px 32px 72px; }
.hero-kicker { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--char-s); font-weight:700; margin:0 0 18px; font-family:'Mulish',sans-serif; }
.hero-h1 { font-family:var(--head) !important; font-weight:400 !important; font-size:clamp(38px,5vw,58px) !important; line-height:1.08 !important; color:var(--char) !important; margin:0 0 10px !important; }
.hero-atline { font-family:var(--head); font-size:clamp(20px,2.4vw,26px); color:var(--sub); margin:0 0 22px; line-height:1.2; }
.hero-atline strong { color:var(--char); font-weight:600; }
.hero-body { color:var(--sub); font-size:17px; max-width:48ch; margin:0 0 14px; }
.hero-photo { border-radius:8px; background:repeating-linear-gradient(-45deg,var(--sand-s),var(--sand-s) 8px,var(--sand) 8px,var(--sand) 16px); min-height:370px; display:flex; align-items:center; justify-content:center; }
.hero-photo-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--char-s); background:rgba(255,255,255,.55); padding:8px 14px; border-radius:4px; }
.hero-photo-frame { border-radius:8px; overflow:hidden; min-height:370px; }
.hero-photo-frame .hero-photo-img, .hero-photo-frame figure { margin:0; height:100%; }
.hero-photo-frame img { width:100%; height:100%; min-height:370px; object-fit:cover; display:block; border-radius:8px; }

/* Knappar */
.pill-primary .wp-block-button__link, .wp-block-button__link.pill-primary { background:var(--char) !important; color:var(--cream) !important; border-radius:999px !important; }
.pill-primary .wp-block-button__link:hover { background:var(--char-s) !important; }
.pill-ghost .wp-block-button__link, .wp-block-button__link.pill-ghost { background:transparent !important; color:var(--char) !important; border:1.5px solid var(--char) !important; border-radius:999px !important; }

/* ─── Sections ───────────────────────────────────────── */
.sec-eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--sub); font-weight:700; margin:0 0 12px; font-family:'Mulish',sans-serif; }
.sec-h2 { font-family:var(--head) !important; font-weight:400 !important; font-size:clamp(28px,3.4vw,38px) !important; color:var(--ink) !important; margin:0 0 10px !important; }
.sec-lead { color:var(--sub); font-size:17px; max-width:60ch; margin:0; }

/* ─── Specialty cards ────────────────────────────────── */
.area-card { background:var(--paper); border:1px solid var(--line) !important; border-radius:16px !important; padding:28px 26px !important; display:flex; flex-direction:column; cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s; }
.area-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(42,37,31,.1); border-color:var(--sand) !important; }
.area-dot { width:13px; height:13px; border-radius:50%; margin:0 0 16px; display:block; padding:0; }
.area-dot-hjarta { background:#9c3a3a; }
.area-dot-lunga  { background:#3a6d6d; }
.area-dot-allergi{ background:#7d8a3a; }
.area-blurb { color:var(--sub); font-size:15px; margin:0 0 14px; }
.area-tags { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
.area-tag-pill { font-size:12.5px; background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--char-s); margin:0; }
.area-more { margin-top:auto; }
.area-more-link { color:var(--char); font-weight:700; font-size:13.5px; border-bottom:1.5px solid var(--char); padding-bottom:2px; text-decoration:none; }

/* ─── Vid Sophiahemmet — bilder ──────────────────────── */
.soph-img { margin:0; }
.soph-img img { width:100%; display:block; border-radius:14px; object-fit:cover; }
.soph-img-big img { height:clamp(360px,42vw,560px); }
.soph-img:not(.soph-img-big) img { height:clamp(220px,18vw,280px); }

/* ─── Innehållsbredd ─────────────────────────────────── */
.wp-block-group.wrap { max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; padding-left:32px !important; padding-right:32px !important; box-sizing:border-box; }

/* ─── Page header ────────────────────────────────────── */
.phead { background:var(--sand); padding:48px 0 52px; }
.phead .wrap > * { margin-left:0; margin-right:0; }
.phead .sec-eyebrow { margin-bottom:14px; }
.phead h1, .phead .phead-title { font-family:var(--head) !important; font-weight:400 !important; font-size:clamp(34px,4.4vw,50px) !important; color:var(--char) !important; margin:0 !important; max-width:none; }
.phead .phead-lead, .phead .wp-block-post-excerpt { color:var(--sub); font-size:18px; max-width:62ch; margin:16px 0 0; }
.phead .wp-block-post-excerpt p { margin:0; color:var(--sub); font-size:18px; }
.phead .wp-block-post-excerpt__more-text { display:none; }

/* Innehålls-wrap under sidhuvudet */
.wrap-content { padding-top:4rem; padding-bottom:5rem; }

/* ─── Sidledtext (ingress under titel) ───────────────── */
.phead-lead-inline { color:var(--sub); font-size:18px; max-width:62ch; margin:0 0 32px; }

/* ─── Grupprubriker på samlingssidan "Våra specialister" ─ */
.grp-h2 { font-family:var(--head) !important; font-weight:400 !important; font-size:clamp(24px,3vw,32px) !important; color:var(--ink) !important; max-width:920px; margin:0 auto 20px !important; }
.grp-h2:not(:first-child) { margin-top:56px !important; }
.doc-grid + .area-more { max-width:920px; margin:22px auto 0; }

/* ─── Doctor cards ───────────────────────────────────── */
.doc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:920px; margin-left:auto; margin-right:auto; }
.doc-card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px; }
.doc-top { display:flex; gap:18px; align-items:flex-start; margin-bottom:14px; }
.doc-photo { width:84px; height:84px; border-radius:50%; overflow:hidden; flex:0 0 auto; border:1px solid var(--line); background-color:var(--line); background-position:center; background-size:cover; }
.doc-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.doc-name { font-family:var(--head); font-weight:400; font-size:22px; color:var(--ink); margin:0 0 4px; }
.doc-chief-badge { display:inline-block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--char); background:var(--sand); border-radius:999px; padding:3px 10px; margin:6px 0 0; }
.doc-role { color:var(--sub); font-size:14.5px; margin:4px 0 0; }
.doc-badges { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.doc-badge { font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:999px; border:1px solid; white-space:nowrap; }
.doc-badge.region     { background:#e7efe6; color:#3f5b3a; border-color:#cfe0cb; }
.doc-badge.forsakring { background:#e8eef4; color:#33597d; border-color:#d2e0ec; }
.doc-badge.privat     { background:#f3ebe0; color:#8a6a3a; border-color:#e6d6bf; }
.doc-badge.remiss-krav    { background:#f1e2df; color:#9a4a3e; border-color:#e6cdc7; }
.doc-badge.remiss-onskas  { background:#efe8df; color:#7a6a4f; border-color:#e0d4c0; }
.doc-note { color:var(--sub); font-size:14px; margin:0 0 14px; }
.doc-meta { border-top:1px solid var(--line); padding-top:12px; }
.doc-meta-row { display:flex; gap:10px; font-size:14.5px; margin-bottom:5px; }
.doc-meta-key { min-width:88px; color:var(--sub); font-weight:600; }
.doc-meta-val a { color:var(--char); font-weight:700; text-decoration:none; }
.doc-price { font-size:12.5px; color:#9a8a6a; font-style:italic; margin:8px 0 0; }
.doc-status { background:#f1e2df; border:1px solid #e6cdc7; color:#7c3d33; border-radius:12px; padding:12px 16px; font-size:14px; margin:10px 0 0; }

/* ─── Notice strip ───────────────────────────────────── */
.notice-strip { background:#f1e2df; border:1px solid #e6cdc7; color:#7c3d33; border-radius:12px; padding:14px 18px; font-size:14.5px; margin:0 0 28px; }

/* ─── Info card boxes ────────────────────────────────── */
.info-card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:20px; }
.info-card-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); font-weight:700; margin:0 0 10px; font-family:'Mulish',sans-serif; }

/* ─── Säker vård ─────────────────────────────────────── */
.saker-block { border-top:1px solid var(--line); padding:22px 0; max-width:820px; }
.saker-block:last-child { border-bottom:1px solid var(--line); }

/* ─── Hitta hit karta ────────────────────────────────── */
.map-wrap { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.map-wrap img { width:100%; display:block; }

/* ─── CTA band ───────────────────────────────────────── */
.cta-band { background:var(--char); color:var(--cream); text-align:center; padding:72px 32px; }
.cta-band .sec-eyebrow { color:#b8ab93; }
.cta-band .cta-h2 { font-family:var(--head) !important; font-weight:400 !important; font-size:clamp(28px,3.6vw,40px) !important; color:var(--cream) !important; margin-bottom:14px !important; }
.cta-band .cta-body { color:#c9bda7; max-width:54ch; margin:0 auto 26px; font-size:16.5px; }
.cta-band .cta-btn-wrap { text-align:center; }
.cta-band .cta-pill { display:inline-block; background:var(--sand); color:var(--char); border-radius:999px; padding:14px 26px; font-size:14.5px; font-weight:600; text-decoration:none; }
.cta-band .cta-pill:hover { background:var(--sand-s); }

/* ─── Footer ─────────────────────────────────────────── */
.site-footer { background:var(--paper); border-top:1px solid var(--line); }
.ft-inner { max-width:1180px; margin:0 auto; padding:56px 32px 36px; }
.ft-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px; margin-bottom:36px; }
.ft-col-label { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); margin:0 0 14px; font-weight:700; }
.site-footer .wp-block-navigation { flex-direction:column; gap:0 !important; }
.site-footer .wp-block-navigation a { display:block; color:var(--ink); text-decoration:none; font-size:14.5px; margin-bottom:9px; }
.site-footer .wp-block-navigation a:hover { color:var(--char); text-decoration:underline; }
/* Varumärkesblock — speglar headern: logga och namn sida vid sida */
/* Alla fyra kolumner startar på samma linje (WP lägger annars 24px på syskon 2-4) */
.ft-grid > * { margin-top:0 !important; }
.ft-brand { display:flex; align-items:center; gap:12px; height:46px; margin:0; }
/* Endast i 4-kolumnsläget delar rubrikerna rad med varumärkesblocket — då ska
 * rubrikbandet vara lika högt (46px) så all brödtext hamnar på samma linje.
 * Under 880px hamnar kolumnerna på egna rader och bandet skulle bara ge tomrum. */
@media(min-width:881px){
  .ft-col-label { height:46px; margin:0 !important; padding-top:0; box-sizing:border-box; }
}
.ft-hdr-mark { height:46px; width:auto; display:block; flex:0 0 auto; }
.ft-brand-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ft-brand-name { font-family:'Nunito',sans-serif; font-weight:400; font-size:17px; color:var(--ink); margin:0; line-height:1.1; display:block; }
.ft-brand-sub { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); margin:0; display:block; }
.ft-brand-sub .ft-brand-vid { font-weight:800; color:var(--ink); }
.ft-desc { color:var(--sub); font-size:14px; margin:0; }
.ft-bot { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; color:#9c917e; font-size:13px; flex-wrap:wrap; gap:8px; }

/* ─── Animations (ren CSS — innehåll alltid synligt även utan JS) ─── */
.fade-up { animation: hlaFadeUp .6s ease both; }
.fade-in { animation: hlaFadeIn .7s ease both; }
@keyframes hlaFadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes hlaFadeIn { from { opacity:0; } to { opacity:1; } }
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .fade-in { animation:none !important; opacity:1 !important; transform:none !important; }
@media(prefers-reduced-motion:reduce){ .fade-up,.fade-in{ animation:none; opacity:1; transform:none; } }

/* ─── Responsive ─────────────────────────────────────── */
@media(max-width:1000px){
  .site-header .wp-block-navigation:not(.has-modal-open) { display:none; }
}
@media(max-width:880px){
  .hero-grid { grid-template-columns:1fr; gap:24px; padding:36px 22px 44px; }
  .hero-photo { min-height:220px; }
  .ft-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .header-inner { padding:14px 22px; }
  .wp-block-columns.doc-cols { flex-direction:column !important; }
  .doc-grid { grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────
 * Ersätter inline-stilar som tidigare låg i blockmarkupen.
 * Handskriven markup med style-attribut underkänns av Gutenberg
 * ("Block contains unexpected or invalid content"), eftersom den
 * måste matcha redigerarens egen serialisering tecken för tecken.
 * Blocken bär nu bara klassnamn — all styling ligger här.
 * ───────────────────────────────────────────────────────────── */
.hero-copy    { gap:0 !important; }
.hero-btns    { margin-top:1.5rem !important; gap:0.75rem !important; }
.cta-btns     { margin-top:1.75rem !important; gap:0.75rem !important; }
.sec-areas    { background-color:#f4ede1 !important; padding-top:5rem !important; padding-bottom:5rem !important; }
.sec-soph     { background-color:#fbf7f0 !important; padding-top:4.5rem !important; padding-bottom:4.5rem !important; }
.sec-head     { margin-bottom:2.75rem !important; }
.area-cols    { gap:1.5rem !important; }
.area-tags    { gap:6px !important; margin-bottom:16px !important; }
.area-h3      { font-size:22px !important; margin-bottom:8px !important; }
.soph-cols    { gap:3rem !important; }
.soph-thumbs  { gap:1.5rem !important; margin-top:1.5rem !important; }
.sec-lead-mt     { margin-top:1rem !important; }
.sec-lead-strong { font-weight:700 !important; }
.page-body    { background-color:#f4ede1 !important; }
.brand-wrap   { gap:12px !important; }
.hdr-nav      { gap:2px !important; }
.ft-nav       { gap:0 !important; }
/* Knapparnas typografi (färg/ram/radie sätts längre upp) */
.pill-primary .wp-block-button__link,
.pill-ghost   .wp-block-button__link,
.pill-cta     .wp-block-button__link { font-size:14.5px !important; font-weight:600 !important; }
/* OBS: #c7ad8c är den gamla sandtonen. Övriga sajten använder --sand (#d3bda0).
 * Behållen exakt som tidigare för att inte ändra utseendet — se not till kund. */
.pill-cta .wp-block-button__link { background:#c7ad8c !important; color:var(--char) !important; border-radius:999px !important; }
.pill-cta .wp-block-button__link:hover { background:color-mix(in srgb,#c7ad8c 78%,white) !important; }

/* ─── 404-sidan ──────────────────────────────────────── */
.fel-lista { list-style:none; padding:0; margin:0; }
.fel-lista li { margin:0 0 12px; }
.fel-lista a { color:var(--char); font-weight:600; font-size:16px; border-bottom:1.5px solid var(--char); padding-bottom:2px; text-decoration:none; }
.fel-lista a:hover { color:var(--sub); border-color:var(--sub); }
.policy-datum { color:var(--sub); font-size:14px; margin-top:2.5rem !important; padding-top:1.25rem; border-top:1px solid var(--line); }