/* =========
   Diversa – Screen Reader Review Workshop
   Stylesheet (WCAG-first, split from HTML)
   ========= */

:root{
  /* Brand tokens */
  --color-turquoise-light: #69E3FC; /* accent/focus outline */
  --color-turquoise-dark:  #005E72; /* CTA bg */
  --color-orange:          #FF7733; /* alerts/errors */
  --color-yellow:          #FFEA80; /* small highlights */

  /* Neutrals */
  --color-bg-body:   #FEFEFB; /* almost white */
  --color-bg-beige:  #F7F6E8; /* very light beige */
  --color-text:      #141414; /* body text */
  --color-heading:   #000000; /* headings & price */
  --color-surface:   #FFFFFF;

  /* Effects */
  --shadow-soft: 0 2px 8px rgba(51,51,51,0.08);
  --shadow-card: 0 4px 16px rgba(51,51,51,0.10);

  /* Type scale */
  --fs-hero: clamp(2rem, 2.8vw, 3rem);
  --fs-h2:   clamp(1.5rem, 2.2vw, 2rem);
  --fs-h3:   1.25rem;
  /* Increase base font size for improved readability */
  --fs-body: 1.125rem; /* 18px */
  --lh:      1.6;

  /* Layout */
  --maxw:  64rem; /* 1024px container */
  --pad-y: clamp(2.5rem, 6vw, 5rem);
  --radius: 12px;
  --radius-btn: 10px;
}

html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--color-bg-body);
  color: var(--color-text);
  line-height: var(--lh);
  font-size: var(--fs-body);
}

.container{ max-width: var(--maxw); margin-inline:auto; padding-inline: 1rem; }
section{ padding-block: var(--pad-y); }
h1,h2,h3{ color: var(--color-heading); margin: 0 0 .5rem; line-height: 1.2; }
h1{ font-size: var(--fs-hero); font-weight: 800; }
h2{ font-size: var(--fs-h2); font-weight: 700; }
h3{ font-size: var(--fs-h3); font-weight: 700; }
p{ margin: .5rem 0 1rem; }

/* Utility */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.bg-beige{ background: var(--color-bg-beige); }
.bg-white{ background: var(--color-surface); }
.stack-lg > * + *{ margin-top: 1.25rem; }
.stack-xl > * + *{ margin-top: 2rem; }
.grid-2{ display:grid; gap:1.5rem; }
@media (min-width: 900px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

/* Links & CTA */
a.button, button.button{
  display:inline-block;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--color-turquoise-dark), white 2%),
    var(--color-turquoise-dark));
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  padding:.85rem 1.25rem;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-soft);
  border: 0;
  cursor: pointer;
}
a.button:hover, a.button:focus,
button.button:hover, button.button:focus{
  outline: 3px solid var(--color-turquoise-light);
  outline-offset: 2px;
  filter: brightness(.95);
  box-shadow: var(--shadow-card);
}
a.link{ color: var(--color-turquoise-dark); text-underline-offset: 2px; }
a.link:hover, a.link:focus{ outline: 3px solid var(--color-turquoise-light); outline-offset: 2px; }

/* Cards / price */
.card{
  background: var(--color-surface);
  border: 1px solid #e6e6e6;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card-tint{
  background: color-mix(in srgb, var(--color-turquoise-light), white 90%);
}
.price{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--color-heading); }

/* Lists */
ul{ padding-left: 1.2rem; }
ul li{ margin: .4rem 0; }
.bullets-accent li::marker{ color: var(--color-turquoise-dark); }

/* FAQ accordion */
.faq button{
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--color-heading);
  border: 0;
  border-bottom: 1px solid #e6e6e6;
  padding: 1rem 0;
  font-weight: 700;
  font-size: var(--fs-h3);
  cursor: pointer;
  /* Reserve space for the accordion indicator */
  padding-right: 2rem;
  position: relative;
}
.faq button:focus{ outline: 3px solid var(--color-turquoise-light); outline-offset: 2px; }
.faq .panel{ display:none; padding: .5rem 0 1rem; }
.faq .panel[data-open="true"]{ display:block; }
.faq .marker{
  border-left: 4px solid var(--color-turquoise-light);
  padding-left: .75rem;
}

/* Accordion indicator: use + and – to signal closed/open state */
.faq button::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-turquoise-dark);
  transition: transform 0.2s;
}
.faq button[aria-expanded="true"]::after{
  content: "–"; /* dash indicates collapse */
}

/* --- Hero layout --- */
.hero-container{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 900px){
  .hero-container{
    flex-direction: row;
  }
  .hero-graphic img{
    width: 320px;
    height: auto;
  }
}
.hero-graphic img{
  max-width: 100%;
  height: auto;
  display: block;
}
.hero-content{
  flex: 1;
}
.hero-graphic{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Barrier cards --- */
.barrier-card{
  border: 1px solid #e6e6e6;
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
  background: var(--color-surface);
}
.bg-beige .barrier-card{
  background: color-mix(in srgb, var(--color-bg-beige), white 90%);
}

/* --- Improve bullet list icons --- */
.bullets-accent{
  list-style: none;
  padding-left: 0;
}
.bullets-accent li{
  position: relative;
  padding-left: 1.8rem;
}
.bullets-accent li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-turquoise-dark);
}

/* --- Testimonials --- */
blockquote.card{
  position: relative;
  padding-left: 2.5rem;
}
blockquote.card::before{
  content: "\201C"; /* decorative open quote */
  position: absolute;
  left: 0;
  top: -0.4rem;
  font-size: 3rem;
  color: var(--color-turquoise-light);
}
blockquote.card cite{
  display: block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--color-turquoise-dark);
  font-style: normal;
}

/* --- Host section --- */
.host-image{
  display: flex;
  align-items: center;
  justify-content: center;
}
.host-image img{
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 6px solid var(--color-turquoise-light);
  box-shadow: var(--shadow-soft);
}

/* --- FAQ improvements --- */
.faq button{
  /* increase indicator size */
  padding-right: 2.5rem;
}
.faq button::after{
  font-size: 1.5rem;
}

/* --- Contact form improvements --- */
/*
 * Contact form CTA button
 *
 * By default the submit button in the contact form was forced to
 * stretch to full width using width:100%.  This made it look
 * disconnected from the other call‑to‑action buttons on the page,
 * which are sized to their text.  To ensure consistent
 * typography and sizing across all CTA buttons, we remove the
 * full‑width behaviour and allow the button to size to its
 * content.  We explicitly set display:inline-block so it matches
 * the anchor buttons used elsewhere.
 */
.actions .button,
.actions button.button{
  width: auto;
  display: inline-block;
}

/* Ensure contact form fields stack vertically.  Without this, labels default to inline
   placement next to their inputs, which creates an uneven horizontal layout when the
   textarea is wider than the shorter text inputs.  Make labels block-level with a
   small bottom margin so they sit above their fields.  Also force form controls to
   occupy the full width of their container. */
form label{
  display: block;
  margin-bottom: 0.25rem;
}
form input,
form textarea{
  width: 100%;
  box-sizing: border-box;
}

/* Required star indicator next to mandatory labels */
.required{
  color: var(--color-orange);
  margin-left: 0.2rem;
}

/* Forms */
form{ display:grid; gap: .9rem; max-width: 38rem; }
label{ font-weight: 600; color: var(--color-heading); }
input, textarea{
  font: inherit;
  padding: .8rem .9rem;
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  background: #fff;
  color: var(--color-text);
}
input:focus, textarea:focus{
  outline: 3px solid var(--color-turquoise-light);
  border-color: var(--color-turquoise-dark);
}
.hint{ font-size: .9rem; color: #555; }
.error{ color: var(--color-orange); }
.actions{ margin-top: .5rem; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 1rem; top: 1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#fff; border-radius:8px; box-shadow: var(--shadow-soft);
  outline:3px solid var(--color-turquoise-light);
}

header, main, footer{ display:block; }

/* Inline field error messages */
.field-error {
  margin-top: .25rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Invalid field outline (keeps high contrast) */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- Alerts / Status messages --- */
.alert { 
  margin: 1rem 0; padding: 1rem; border-radius: .75rem; outline: 0; border: 2px solid transparent;
  box-shadow: var(--shadow-soft);
}
.alert-success {
  background: color-mix(in srgb, var(--color-turquoise-light), white 70%);
  border-color: var(--color-turquoise-dark);
  color: var(--color-turquoise-dark);
}
.alert-error {
  background: color-mix(in srgb, var(--color-orange), white 80%);
  border-color: var(--color-orange);
  color: #5a1a00;
}
.alert-info {
  background: var(--color-bg-beige);
  border-color: var(--color-turquoise-dark);
  color: var(--color-text);
}


/* Button busy/disabled */
button[aria-busy="true"],
.button[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.8;
}