/* ==========================================================================
   ARKKAYA WOMEN'S HOSPITAL — theme.css
   Foundation: reset, tokens, base type, section titles, buttons, tags.
   Palette from the logo: navy #1c466b (primary) + wine #9b3860 (secondary).
   Background is a near-white tuned toward the navy primary.
   ========================================================================== */

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{min-height:100vh;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--wine-500);outline-offset:3px;border-radius:2px}
::selection{background:var(--navy-200);color:var(--ink)}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* Primary — Navy */
  --navy-50:#eff2f5;--navy-100:#d8e0e6;--navy-200:#b4c2ce;--navy-300:#879db1;--navy-400:#50718d;
  --navy-500:#1c466b;--navy-600:#193c5c;--navy-700:#16334e;--navy-800:#13293f;--navy-900:#102132;
  /* Secondary — Wine */
  --wine-50:#f8f1f4;--wine-100:#eedde4;--wine-200:#debdcb;--wine-300:#ca96ab;--wine-400:#b26685;
  --wine-500:#9b3860;--wine-600:#823052;--wine-700:#6a2744;--wine-800:#511f35;--wine-900:#3b1829;

  /* Backgrounds — near-white, tuned toward navy */
  --canvas:#fdfaf4;
  --paper:#ffffff;
  --mist:#f7ece6;
  --shell:#fbf4ee;
  /* Cool neutrals */
  --line:#dfe5ea;--stone:#a9b7c3;--muted:#75838e;--ink-soft:#42505b;--ink:#14202c;--ink-deep:#0d1620;
  --navy-wash:#e6ebf1;--wine-wash:#f6ecf0;

  /* Type */
  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-ui:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Layout */
  --maxw:1220px;
  --gutter:clamp(1.25rem,4.5vw,3.25rem);
  --radius-sm:10px;--radius:16px;--radius-lg:24px;--radius-xl:34px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-sweep:cubic-bezier(.6,.04,.14,1);

  /* Elevation (soft, cool navy-tinted) */
  --shadow-sm:0 6px 22px -14px rgba(13,22,32,.22);
  --shadow:0 20px 50px -28px rgba(13,22,32,.26);
  --shadow-lg:0 40px 90px -46px rgba(13,22,32,.34);
  --shadow-btn:0 14px 30px -12px rgba(155,56,96,.42);
}

/* ---------- Base --------------------------------------------------------- */
body{font-family:var(--font-ui);font-weight:400;color:var(--ink);background:var(--canvas)}
h1,h2,h3,h4,.display{font-family:var(--font-display);font-optical-sizing:auto;font-weight:500;
  color:var(--ink);line-height:1.05;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.12}
h4{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.2}
p{color:var(--ink-soft)}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
h1 em,h2 em,h3 em,h4 em{font-style:normal}

/* ---------- Layout helpers ---------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.lede{font-size:1.05rem;color:var(--ink-soft);line-height:1.65}
.bg-mist{background:var(--mist)}
.bg-shell{background:var(--shell)}
.center{text-align:center}

/* ---------- Eyebrow + Section titles ------------------------------------ */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-ui);
  font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-600)}
.eyebrow::before{content:"";width:19px;height:19px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5'/%3E%3Cpath d='M12 13.5V21M8.5 17.5h7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5'/%3E%3Cpath d='M12 13.5V21M8.5 17.5h7'/%3E%3C/svg%3E") center/contain no-repeat}
.eyebrow--center{justify-content:center}
.eyebrow--wine{color:var(--wine-600)}
.eyebrow--light{color:var(--navy-200)}

.section-head{max-width:46ch}
.section-head--center{max-width:56ch;margin-inline:auto;text-align:center}
.section-head .eyebrow{margin-bottom:1.15rem}
.section-head h2{margin-bottom:1.1rem}
.section-head h2 em,.title-accent{font-style:normal;font-weight:500;color:var(--wine-500)}

/* ---------- Buttons (sweep-fill: disc expands from arrow on hover) -------- */
.btn{
  --btn-bg:var(--wine-500);--btn-fg:#fff;--btn-sweep:var(--wine-800);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1.02rem 1.15rem 1.02rem 1.6rem;
  font-family:var(--font-ui);font-weight:600;font-size:.95rem;letter-spacing:.005em;line-height:1;
  color:var(--btn-fg);background:var(--btn-bg);border-radius:100px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .35s var(--ease)}
.btn>span{position:relative;z-index:2;white-space:nowrap}
.btn__ico{position:relative;z-index:2;display:grid;place-items:center;flex:none;
  width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.16);transition:background .4s var(--ease)}
.btn__ico::after{content:"";width:.95rem;height:.95rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;z-index:1;top:50%;right:1.15rem;width:2rem;height:2rem;
  border-radius:50%;background:var(--btn-sweep);transform:translateY(-50%) scale(0);transition:transform .6s var(--ease-sweep)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-btn)}
.btn:hover::before{transform:translateY(-50%) scale(24)}
.btn:hover .btn__ico{background:rgba(255,255,255,.26)}
.btn:hover .btn__ico::after{transform:translateX(4px)}
.btn:active{transform:translateY(-1px)}

/* Outline / navy variant — fills navy on hover, text turns white */
.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-sweep:var(--navy-500);
  box-shadow:inset 0 0 0 1.6px var(--navy-400)}
.btn--outline .btn__ico{background:var(--navy-100)}
.btn--outline:hover{color:#fff;box-shadow:inset 0 0 0 1.6px var(--navy-500),var(--shadow-sm)}
.btn--outline:hover .btn__ico{background:rgba(255,255,255,.24)}

.btn--ondark{--btn-bg:var(--canvas);--btn-fg:var(--ink);--btn-sweep:#fff}
.btn--ondark .btn__ico{background:rgba(13,22,32,.10)}
.btn--ghostdark{--btn-bg:transparent;--btn-fg:var(--canvas);--btn-sweep:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.btn--ghostdark .btn__ico{background:rgba(255,255,255,.14)}

.btn--sm{padding:.72rem .8rem .72rem 1.2rem;font-size:.86rem}
.btn--sm .btn__ico{width:1.7rem;height:1.7rem}
.btn--sm::before{width:1.7rem;height:1.7rem;right:.8rem}

/* Text link: drawing underline + sliding arrow */
.btn-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);
  font-weight:600;font-size:.95rem;color:var(--wine-600)}
.btn-link span{position:relative}
.btn-link span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.6px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn-link:hover span::after{transform:scaleX(1)}
.btn-link::before{content:"";width:.85rem;height:.85rem;background:currentColor;order:2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--ease)}
.btn-link:hover::before{transform:translateX(4px)}
.btn-link--navy{color:var(--navy-700)}

/* ---------- Tags --------------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-weight:600;
  font-size:.76rem;letter-spacing:.02em;padding:.5rem .9rem;border-radius:100px;background:var(--navy-wash);color:var(--navy-800)}
.tag--wine{background:var(--wine-wash);color:var(--wine-700)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Reveal-on-scroll -------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* ---------- Utilities ---------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-3rem;z-index:200;background:var(--wine-500);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-weight:600;font-size:.9rem;transition:top .3s var(--ease)}
.skip-link:focus{top:0}

/* ---------- Themed slim scrollbar ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--navy-400) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--navy-500),var(--wine-500));border-radius:100px;border:2px solid var(--canvas)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--navy-600),var(--wine-600))}