/* ==========================================================================
   Bądź Świadomym — design system
   Palette derived from the lotus mark: orchid crown, coral petals,
   blush centre, cream ground, ink type.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* colour */
  --cream:        #F9F5EC;
  --cream-deep:   #F1EADA;
  --paper:        #FFFDF8;
  --ink:          #3E3A3D;
  --ink-soft:     #6B6569;
  --orchid:       #C868C9;
  --orchid-deep:  #A94FB0;
  --coral:        #F98B85;
  --coral-deep:   #E96F7B;
  --blush:        #FBE1E7;
  --blush-deep:   #F5C3D0;
  --line:         rgba(62,58,61,0.12);

  /* type */
  --display: 'Fraunces', 'Iowan Old Style', serif;
  --body: 'Karla', -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --max: 1120px;
  --radius: 10px;
  --radius-sm: 6px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.brand-hero{
  margin: 0 0 0.4em;
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  line-height: 1.05;
}
.brand-hero span{
  display: block;
  font-family: var(--body);
  font-size: 0.19em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-top: 0.5em;
}
@media (max-width: 860px){
  .brand-hero span{ letter-spacing: 0.14em; }
}

h1{ font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4{ font-size: 1.15rem; font-style: italic; font-weight: 400; }

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orchid-deep);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--orchid-deep);
  display: inline-block;
}

.lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 4px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover{ background: var(--orchid-deep); }
.btn-ghost{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--cream); }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249,245,236,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  max-width: var(--max);
  margin: 0 auto;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
}
.brand img{ width: 36px; height: 36px; object-fit: contain; }

.nav-links{
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a{
  position: relative;
  padding: 6px 0;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.nav-links a::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: var(--coral);
  transition: right .25s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ right: 0; }

.nav-toggle{
  display: none;
  background: none; border: none;
  width: 40px; height: 40px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span{
  width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 860px){
  .nav-toggle{ display: flex; }
  .nav-links{
    position: fixed;
    inset: 68px 12px auto 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 40px -20px rgba(62,58,61,0.25);
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
    gap: 22px;
    font-size: 1.1rem;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav-links.open{
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
  }
}

/* ---------- sections ---------- */
section{ padding: 96px 0; }
section.tight{ padding: 64px 0; }
.alt{ background: var(--cream-deep); }

.divider{
  display: block;
  width: 100%;
  height: 64px;
  color: var(--cream-deep);
}
.divider path{ fill: currentColor; }
.divider.flip{ transform: scaleY(-1); }

/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 84px 0 70px;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.hero-art{
  display: flex;
  justify-content: center;
}
.hero-art img{ width: min(380px, 80%); filter: drop-shadow(0 30px 45px rgba(169,79,176,0.18)); }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; text-align: center; }
  .hero-art{ order: -1; }
  .lede{ margin-left: auto; margin-right: auto; }
  .eyebrow{ justify-content: center; }
}

/* ---------- cards ---------- */
.grid{ display: grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.card:hover{
  box-shadow: 0 16px 28px -20px rgba(62,58,61,0.22);
  border-color: var(--blush-deep);
}
.card .icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--orchid-deep);
  font-size: 1.15rem;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.card:hover .icon{
  transform: rotate(-6deg) scale(1.08);
  background: linear-gradient(135deg, var(--orchid), var(--coral));
  color: var(--paper);
}
.card h3{ margin-bottom: 10px; }
.card p{ color: var(--ink-soft); font-size: 0.98rem; }
.card a.card-link{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-weight: 600; font-size: 0.9rem;
  color: var(--orchid-deep);
}

.card .icon.num-icon{
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
}
.card:hover .icon.num-icon{ font-weight: 600; }

/* petal-tinted card variants */
.card.petal-1{ background: linear-gradient(160deg, var(--paper), var(--blush) 180%); }

/* ---------- article / long text ---------- */
.prose{
  max-width: 74ch;
  margin: 0 auto;
}
.prose h2{ margin-top: 2em; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ margin-top: 1.6em; color: var(--orchid-deep); }
.prose ul{ padding-left: 1.2em; }
.prose li{ margin-bottom: 0.4em; }
em{ font-family: var(--display); font-style: italic; }
strong{ font-weight: 700; }
.prose strong{ font-weight: 700; color: var(--ink); }
.prose em{ font-family: var(--display); font-style: italic; color: inherit; }
.prose .note{
  background: var(--blush);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  font-size: 0.95rem;
  margin: 1.6em 0;
}
.prose .note strong{ color: var(--coral-deep); }

/* ---------- article editorial photos ---------- */
.article-photo{
  margin: 28px 0 36px;
}
.article-photo img{
  width: 100%;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(0.95) contrast(1.02);
}
@media (min-width: 860px){
  .article-photo{
    width: calc(100% + 80px);
    margin-left: -40px;
  }
}

/* ---------- article section markers ---------- */
.article-section{
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.section-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.section-divider::before{
  content: "❋";
  font-size: 1.1rem;
  color: var(--orchid);
  background: var(--cream);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--blush-deep);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- accordion (disorders / articles list) ---------- */
.accordion-item{
  border-bottom: 1px solid var(--line);
}
.accordion-item:first-child{ border-top: 1px solid var(--line); }
.accordion-trigger{
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ink);
}
.accordion-label{ flex: 1; }
.accordion-icon{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--orchid-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  font-family: var(--body);
  transition: transform .3s ease, background .3s ease;
}
.accordion-item.open .accordion-icon{
  background: linear-gradient(135deg, var(--orchid), var(--coral));
  color: var(--paper);
  transform: rotate(-8deg) scale(1.06);
}
.accordion-trigger .plus{
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform .3s ease, background .3s ease;
}
.accordion-trigger .plus::before, .accordion-trigger .plus::after{
  content: "";
  position: absolute;
  background: var(--orchid-deep);
}
.accordion-trigger .plus::before{ width: 12px; height: 2px; }
.accordion-trigger .plus::after{ width: 2px; height: 12px; }
.accordion-item.open .accordion-trigger .plus{ transform: rotate(135deg); background: var(--blush); }

.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.accordion-panel-inner{
  padding: 0 4px 30px;
  color: var(--ink-soft);
}
.accordion-panel-inner h4{ color: var(--ink); font-style: normal; font-weight: 600; margin-top: 1.2em; font-family: var(--body); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--coral-deep); }
.accordion-panel-inner ul{ padding-left: 1.2em; }
.accordion-panel-inner li{ margin-bottom: 0.35em; }

/* ---------- mood tracker ---------- */
.mood-widget{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.mood-widget-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.mood-legend{ display: flex; gap: 10px; flex-wrap: wrap; }
.mood-legend button{
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--cream);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s ease;
}
.mood-legend button[data-active="true"]{
  border-color: transparent;
  color: var(--paper);
}
.mood-legend button[data-mood="well"][data-active="true"]{ background: #9BC59D; }
.mood-legend button[data-mood="soso"][data-active="true"]{ background: var(--orchid); }
.mood-legend button[data-mood="bad"][data-active="true"]{ background: var(--coral-deep); }
.mood-dot{ width: 9px; height: 9px; border-radius: 50%; }
.mood-legend button[data-mood="well"] .mood-dot{ background: #9BC59D; }
.mood-legend button[data-mood="soso"] .mood-dot{ background: var(--orchid); }
.mood-legend button[data-mood="bad"] .mood-dot{ background: var(--coral-deep); }

.mood-scale-legend{
  display: flex; gap: 16px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.mood-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.mood-day{
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mood-day:hover{ transform: scale(1.06); }
.mood-day.selected{ box-shadow: 0 0 0 2px var(--ink); }
.mood-day[data-mood="1"]{ background: #E96F7B; color: #fff; border-color: transparent; }
.mood-day[data-mood="2"]{ background: #F2A08C; color: #fff; border-color: transparent; }
.mood-day[data-mood="3"]{ background: var(--orchid); color: #fff; border-color: transparent; }
.mood-day[data-mood="4"]{ background: #BFD9A8; color: #3E3A3D; border-color: transparent; }
.mood-day[data-mood="5"]{ background: #9BC59D; color: #fff; border-color: transparent; }
.mood-day.pad{ visibility: hidden; }

.mood-hint{ margin-top: 18px; font-size: 0.85rem; color: var(--ink-soft); }

/* mood detail panel */
.mood-panel{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.mood-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mood-panel-head h4{ margin: 0; font-style: normal; font-weight: 600; font-family: var(--body); font-size: 1rem; text-transform: capitalize; }
.mood-panel-close{
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 1rem;
  width: 30px; height: 30px; border-radius: 50%;
}
.mood-panel-close:hover{ background: var(--cream); }

.mood-field-label{
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin: 16px 0 8px;
}
.mood-field-label span{ font-weight: 400; color: var(--ink-soft); }

.mood-scale{
  display: flex; gap: 8px;
}
.mood-scale button{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--body);
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}
.mood-scale button[data-selected="true"]{
  color: #fff; border-color: transparent; transform: scale(1.08);
}
.mood-scale button[data-value="1"][data-selected="true"]{ background: #E96F7B; }
.mood-scale button[data-value="2"][data-selected="true"]{ background: #F2A08C; }
.mood-scale button[data-value="3"][data-selected="true"]{ background: var(--orchid); }
.mood-scale button[data-value="4"][data-selected="true"]{ background: #BFD9A8; color: #3E3A3D; }
.mood-scale button[data-value="5"][data-selected="true"]{ background: #9BC59D; }

.mood-input{
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  resize: vertical;
}
.mood-input:focus{ outline: 2px solid var(--orchid); outline-offset: 1px; }

/* ---------- helpline ---------- */
.helpline-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.helpline-icon{
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--orchid-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transform: rotate(-8deg);
}
.helpline-icon.urgent-icon{ background: var(--coral-deep); color: var(--paper); }
.helpline-card .num{
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--orchid-deep);
  white-space: nowrap;
}
.helpline-card.urgent{ border-color: var(--coral-deep); background: var(--blush); }
.helpline-card.urgent .num{ color: var(--coral-deep); }

/* ---------- FAQ ---------- */
.faq-item{ margin-bottom: 26px; }
.faq-item .q{
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--orchid-deep);
}
.faq-item .a{ color: var(--ink-soft); }

/* ---------- footer ---------- */
footer{
  background: var(--ink);
  color: var(--cream);
  padding: 60px 0 30px;
}
footer .wrap{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
footer h4{ color: var(--cream); font-style: normal; font-family: var(--body); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; opacity: 0.7; }
footer .brand{ color: var(--cream); margin-bottom: 12px; }
footer p{ color: rgba(249,245,236,0.65); font-size: 0.92rem; }
footer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer a{ color: rgba(249,245,236,0.8); font-size: 0.95rem; transition: color .2s ease; }
footer a:hover{ color: var(--coral); }
.footer-bottom{
  max-width: var(--max); margin: 44px auto 0; padding: 22px 28px 0 28px;
  border-top: 1px solid rgba(249,245,236,0.14);
  font-size: 0.8rem; color: rgba(249,245,236,0.5);
}
@media (max-width: 760px){
  footer .wrap{ grid-template-columns: 1fr; }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  padding: 64px 0 50px;
  text-align: center;
  position: relative;
}
.page-hero .lede{ margin: 0 auto; }

/* ---------- misc ---------- */
.center{ text-align: center; }
.mt-lg{ margin-top: 60px; }
.tag{
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: var(--blush);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream); padding: 10px 16px; z-index: 100;
}
.skip-link:focus{ left: 12px; top: 12px; }

[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

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