/* =========================================================
   Biljana Lozo — foredragsholder
   Design tokens
   Motiv: to overlappende cirkler — hendes visuelle model for
   at bygge bro mellem forskellige kulturer/perspektiver.
   ========================================================= */
:root{
  --ink:        #16202B;
  --ink-soft:   #212D3B;
  --paper:      #F7F3EA;
  --paper-deep: #EFE7D5;
  --gold:       #B8863B;
  --gold-deep:  #8C6425;
  --brick:      #7A3B2E;
  --text:       #262B33;
  --text-soft:  #565F6A;
  --line:       #DED2B8;
  --line-dark:  rgba(247,243,234,0.18);
  --radius:     3px;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--text);
  font-family:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:1.03rem;
  line-height:1.7;
}

::selection{ background:var(--gold); color:var(--ink); }

h1,h2,h3,h4,
.font-display{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}

a{ color:var(--gold-deep); text-decoration-thickness:1px; }
a:hover{ color:var(--brick); }

.container-narrow{ max-width:780px; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
}

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

/* ---------- Two-circle brand mark ---------- */
.brandmark{ display:inline-flex; align-items:center; gap:.55rem; }
.brandmark svg{ display:block; }
.brandmark .brand-word{
  font-family:"Fraunces", serif; font-weight:600; font-size:1.15rem;
  letter-spacing:0.01em; color:var(--paper);
}
.brandmark .brand-role{
  display:block; font-family:"Source Sans 3", sans-serif; font-weight:400;
  font-size:.68rem; letter-spacing:.04em; color:#B9C2CC; margin-top:-2px;
}

/* ---------- Navbar ---------- */
.site-header{ background:var(--ink); border-bottom:1px solid var(--line-dark); }
.navbar{ padding-top:.9rem; padding-bottom:.9rem; }
.navbar-nav .nav-link{
  color:#DCE1E6; font-weight:500; font-size:.97rem; margin-inline:.15rem;
  padding:.45rem .8rem !important; border-bottom:2px solid transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color:#fff; border-bottom-color:var(--gold); }
.navbar-nav .nav-link.active{ color:#fff; border-bottom-color:var(--gold); }
.navbar-toggler{ border-color:var(--line-dark); }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(184,134,59,.4); }
.nav-cta{
  background:var(--gold); color:var(--ink) !important; border-radius:var(--radius);
  padding:.5rem 1.1rem !important; font-weight:600; border-bottom:none !important;
}
.nav-cta:hover{ background:#CBA05C; color:var(--ink) !important; }
.dropdown-menu{ border-radius:var(--radius); border:1px solid var(--line); }
.dropdown-item:active, .dropdown-item:hover{ background:var(--paper-deep); color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{ border-radius:var(--radius); font-weight:600; padding:.65rem 1.4rem; }
.btn-brand{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn-brand:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.btn-outline-light-line{ border:1px solid rgba(255,255,255,.55); color:#fff; }
.btn-outline-light-line:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }
.btn-outline-brand{ border:1px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline-brand:hover{ background:var(--ink); color:var(--paper); }

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  padding-block:4.5rem;
}
.hero .eyebrow-line{
  color:var(--gold); font-weight:600; font-size:.85rem; margin-bottom:.9rem;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.12;
}
.hero p.lead{
  color:#C9CED4; font-size:1.15rem; max-width:46ch;
}
.hero .hero-motif{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  opacity:.16; width:520px; height:520px; pointer-events:none;
}
.hero-portrait{
  position:relative;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);
  aspect-ratio:4/5;
  background:
    linear-gradient(160deg, rgba(184,134,59,.35), rgba(22,32,43,0) 60%),
    var(--ink-soft);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-portrait svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.hero-portrait .portrait-caption{
  position:relative; z-index:2; padding:1rem 1.1rem; width:100%;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  color:#E8E2D3; font-size:.8rem;
}

/* Small subtle page header for interior pages */
.page-header{
  background:var(--ink); color:var(--paper); padding-block:3.2rem 3rem;
  position:relative; overflow:hidden;
}
.page-header h1{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.7rem); }
.page-header p.lead{ color:#C9CED4; max-width:62ch; }
.page-header .hero-motif{ opacity:.12; width:380px; height:380px; right:-4%; }

/* ---------- Sections ---------- */
section{ padding-block:4rem; }
.section-deep{ background:var(--paper-deep); }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-ink h2, .section-ink h3{ color:#fff; }
.section-ink .text-soft{ color:#BFC6CD; }

.eyebrow{
  font-weight:600; color:var(--gold-deep); font-size:.85rem;
  margin-bottom:.6rem; display:block;
}
h2.section-title{ font-size:clamp(1.6rem,2.8vw,2.15rem); margin-bottom:1rem; }
.section-intro{ color:var(--text-soft); max-width:62ch; }

hr.rule{ border:0; border-top:1px solid var(--line); margin-block:2.6rem; }

/* ---------- Foredrag cards ---------- */
.talk-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem 1.6rem;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.talk-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(22,32,43,.09); }
.talk-card .talk-kicker{ font-size:.8rem; color:var(--text-soft); font-weight:600; margin-bottom:.3rem; }
.talk-card h3{ font-size:1.28rem; margin-bottom:.7rem; }
.talk-card p{ color:var(--text-soft); flex-grow:1; }
.talk-card .talk-link{
  font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem; text-decoration:none;
}
.talk-card .talk-link:hover{ color:var(--gold-deep); }
.talk-card .talk-link i{ transition:transform .15s ease; }
.talk-card .talk-link:hover i{ transform:translateX(3px); }

/* ---------- Pull quote / testimonial ---------- */
.pull-quote{
  border-left:3px solid var(--gold);
  padding-left:1.4rem;
  font-family:"Fraunces", serif;
  font-style:italic;
  font-weight:400;
  font-size:1.35rem;
  color:var(--ink);
  line-height:1.5;
}
.testimonial{
  border-left:3px solid var(--line);
  padding-left:1.3rem;
}
.testimonial p{ font-style:italic; color:var(--text); }
.testimonial cite{ display:block; font-style:normal; font-size:.9rem; color:var(--text-soft); margin-top:.5rem; }
.testimonial cite strong{ color:var(--ink); }

/* ---------- Press strip ---------- */
.press-strip{
  display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; align-items:center;
  font-family:"Fraunces", serif; font-weight:600; font-size:1.05rem;
  color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:1.1rem;
}
.press-strip span{ opacity:.55; }
.press-strip span::after{ content:""; }

/* ---------- Bullet list, custom marker ---------- */
.list-marked{ list-style:none; padding-left:0; margin:0; }
.list-marked li{
  position:relative; padding-left:1.6rem; margin-bottom:1rem;
}
.list-marked li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
}
.list-marked li strong{ color:var(--ink); }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius);
  padding:3rem 2.4rem;
  position:relative; overflow:hidden;
}
.cta-banner h2{ color:#fff; }
.cta-banner .hero-motif{ opacity:.15; width:340px; height:340px; right:-5%; top:50%; }

/* ---------- Timeline-ish list for CV (genuinely sequential) ---------- */
.cv-list{ list-style:none; padding:0; margin:0; }
.cv-list li{
  border-left:2px solid var(--line);
  padding:.1rem 0 1.3rem 1.3rem;
  position:relative;
}
.cv-list li::before{
  content:""; position:absolute; left:-6px; top:.25rem;
  width:10px; height:10px; border-radius:50%; background:var(--gold);
  border:2px solid var(--paper);
}
.cv-list .cv-year{ font-weight:600; color:var(--ink); display:block; font-size:.9rem; }

/* ---------- Portrait frame reused on Om mig ---------- */
.portrait-frame{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--paper-deep), #fff 70%);
  display:flex; align-items:flex-end; overflow:hidden;
}
.portrait-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.portrait-frame .portrait-caption{
  position:relative; z-index:2; width:100%; padding:.9rem 1rem;
  background:linear-gradient(0deg, rgba(22,32,43,.7), transparent);
  color:#fff; font-size:.78rem;
}

/* ---------- Contact page ---------- */
.contact-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem;
}
.form-label{ font-weight:600; color:var(--ink); font-size:.92rem; }
.form-control, .form-select{
  border-radius:var(--radius); border-color:var(--line); padding:.6rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(184,134,59,.18);
}
.contact-info-item{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1.3rem; }
.contact-info-item i{ color:var(--gold-deep); font-size:1.1rem; margin-top:.2rem; }
.contact-info-item .placeholder-value{
  background:#FBF0DA; border:1px dashed var(--gold); border-radius:var(--radius);
  padding:.05rem .4rem; font-style:italic;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#B9C2CC; padding-block:3rem 2rem; }
.site-footer h6{ color:#fff; font-family:"Fraunces", serif; font-weight:600; letter-spacing:.02em; margin-bottom:1rem;}
.site-footer a{ color:#B9C2CC; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.site-footer .footer-rule{ border-top:1px solid var(--line-dark); margin-block:2rem 1.4rem; }
.site-footer .fine-print{ font-size:.85rem; color:#8B96A1; }

@media (max-width: 767.98px){
  section{ padding-block:2.8rem; }
  .hero{ padding-block:3.2rem; }
  .cta-banner{ padding:2.2rem 1.4rem; text-align:left; }
}

/* =========================================================
   v2.0 — tilføjelser (krav 28-09)
   ========================================================= */

/* ---------- Forside: hero med baggrundsfoto + bevægelse ---------- */
.hero-photo{
  min-height:min(92vh, 860px);
  display:flex; align-items:center;
  padding-block:6rem 5rem;
  isolation:isolate;
}
.hero-photo .hero-bg{
  position:absolute; inset:-4%; z-index:-2;
  background:url("../images/biljana-foredrag-fredericia.jpg") center 35% / cover no-repeat;
  opacity:.3;
  animation:hero-drift 28s ease-in-out infinite alternate;
}
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(22,32,43,.94) 0%, rgba(22,32,43,.72) 55%, rgba(22,32,43,.45) 100%);
}
.hero-title{
  text-transform:uppercase;
  letter-spacing:.015em;
  font-size:clamp(2.1rem, 5.4vw, 4.4rem) !important;
  line-height:1.05 !important;
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero-title .line > span{
  display:inline-block;
  animation:line-rise 1s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i, 0) * .22s + .15s);
}
.hero-title .line .accent{ color:var(--gold); }
.hero-rule{
  display:block; height:2px; width:0; background:var(--gold);
  margin-block:1.6rem 1.4rem;
  animation:rule-draw 1.1s ease-out 1s both;
}
.hero-fade{ animation:fade-up .9s ease-out both; animation-delay:var(--d, 1.2s); }
.hero-photo .hero-byline{ color:var(--gold); font-weight:600; letter-spacing:.04em; }

@keyframes hero-drift{
  from{ transform:scale(1) translate3d(0,0,0); }
  to  { transform:scale(1.08) translate3d(-1.5%, -1%, 0); }
}
@keyframes line-rise{
  from{ transform:translateY(105%); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}
@keyframes rule-draw{ from{ width:0; } to{ width:96px; } }
@keyframes fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-rule{ width:96px; }
}

/* Scroll-reveal (aktiveres kun af script.js, når bevægelse er tilladt) */
.js-reveal .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Intro-blok på forsiden ---------- */
.intro-name{ font-family:"Fraunces", serif; font-size:1.5rem; font-weight:600; color:var(--ink); margin-bottom:0; }
.intro-title{ color:var(--text-soft); font-size:.95rem; margin-bottom:1.6rem; }

/* ---------- Faktaboks ---------- */
.fact-box{
  display:inline-flex; align-items:center; gap:.9rem;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:.85rem 1.2rem; margin-block:1.2rem .4rem;
}
.fact-box i{ font-size:1.5rem; color:var(--gold-deep); }
.fact-box .fact-label{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); }
.fact-box .fact-value{ display:block; font-weight:600; color:var(--ink); }
.page-header .fact-box{ background:rgba(255,255,255,.06); border-color:var(--line-dark); border-left-color:var(--gold); }
.page-header .fact-box .fact-label{ color:#B9C2CC; }
.page-header .fact-box .fact-value{ color:#fff; }
.page-header .fact-box i{ color:var(--gold); }

/* ---------- Pressecitater ---------- */
.press-label{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }
.press-strip.press-strip-bold span{ opacity:.8; }

/* ---------- Testimonial med overskrift ---------- */
.testimonial .testimonial-head{
  font-family:"Fraunces", serif; font-style:italic; font-size:1.3rem; color:var(--ink);
  margin-bottom:.6rem; line-height:1.4;
}

/* ---------- Fortællingsboks: Fra telefonbog til talerstol ---------- */
.story-box{
  background:var(--ink); color:#DCE1E6; border-radius:var(--radius);
  padding:2.4rem 2.2rem; position:relative; overflow:hidden;
}
.story-box h3{ color:#fff; font-size:1.45rem; }
.story-box .story-quote{ color:var(--gold); font-family:"Fraunces", serif; font-style:italic; font-size:1.1rem; margin-top:1.4rem; margin-bottom:0; }
.story-box .hero-motif{ position:absolute; right:-8%; bottom:-20%; width:300px; height:300px; opacity:.1; pointer-events:none; }

/* ---------- Mellemrum-sektion + visitkort ---------- */
.mellemrum-lead{ font-family:"Fraunces", serif; font-style:italic; font-size:1.15rem; color:var(--gold-deep); }
.contact-card{
  display:flex; gap:1.2rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:var(--radius); padding:1.5rem 1.6rem;
}
.contact-card img{ width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--paper-deep); }
.contact-card .cc-name{ font-family:"Fraunces", serif; font-weight:600; font-size:1.15rem; color:var(--ink); margin-bottom:0; }
.contact-card .cc-role{ color:var(--text-soft); font-size:.9rem; margin-bottom:.5rem; }
.contact-card a{ text-decoration:none; }

/* ---------- Foto i portrætramme ---------- */
.portrait-frame.has-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:36% 40%; }

/* ---------- Bookingformular på foredragssider ---------- */
.booking-section{ background:var(--paper-deep); }
.booking-section .contact-panel{ box-shadow:0 12px 30px rgba(22,32,43,.06); }
.req{ color:var(--brick); }

@media (max-width: 767.98px){
  .hero-photo{ min-height:auto; padding-block:4rem 3.4rem; }
  .story-box{ padding:1.8rem 1.4rem; }
  .contact-card{ flex-direction:column; text-align:center; }
}