/* Kobaka Tagena — shared stylesheet */

:root{
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-input: 5px;
  --radius-img: 8px;

  --step-eyebrow: 0.74rem;
  --step-small: 0.9rem;
  --step-body: 1.06rem;
  --step-h3: 1.4rem;
  --step-h2: 1.9rem;
  --step-h1: clamp(2.2rem, 4.5vw, 3rem);
  --section-pad: clamp(4rem, 7vw, 6rem);

  --border-hairline: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

html{
  scroll-behavior: smooth;
}

body{
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  text-wrap: balance;
  color: var(--color-text-primary);
}

h1{ font-size: var(--step-h1); line-height: 1.12; }
h2{ font-size: var(--step-h2); line-height: 1.2; }
h3{ font-size: var(--step-h3); line-height: 1.3; }

p{ text-wrap: pretty; }

.prose-measure{
  max-width: 64ch;
}

.eyebrow{
  font-size: var(--step-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  font-weight: 600;
}

.tabular{
  font-variant-numeric: tabular-nums;
}

/* section rhythm: hairline borders, consistent bg per band handled inline via utility classes */
.band{
  border-bottom: 1px solid var(--border-hairline);
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.band-notop{
  border-top: none;
}

/* cards */
.card{
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  padding: 1.75rem;
}

.card-row{
  height: 100%;
}

/* images */
.img-frame{
  border-radius: var(--radius-img);
  overflow: hidden;
  display: block;
  width: 100%;
  object-fit: cover;
}

/* buttons */
.btn{
  display: inline-block;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary{
  background-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover{
  background-color: var(--color-primary-dark);
}

.btn-outline{
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover{
  background-color: var(--color-primary);
  color: #fff;
}

.btn-inverted{
  background-color: var(--color-background);
  color: var(--color-text-primary);
}
.btn-inverted:hover{
  background-color: color-mix(in srgb, var(--color-background) 85%, black);
}

/* form */
input, select, textarea{
  border-radius: var(--radius-input);
  border: 1px solid var(--border-hairline);
  background-color: #fff;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--step-body);
  color: var(--color-text-primary);
  width: 100%;
}
input:focus, select:focus, textarea:focus{
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
label{
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 0.3rem;
}

/* nav */
.topbar{
  background-color: var(--color-text-primary);
  color: var(--color-background);
  font-size: var(--step-small);
}
.topbar a{ color: var(--color-background); }

.navlink{
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
}
.navlink:hover{
  color: var(--color-primary);
}

/* mobile menu */
#mobile-menu{
  display: none;
}
#mobile-menu.open{
  display: block;
}

/* overlap edge treatment */
.overlap{
  margin-top: -48px;
  position: relative;
}

/* numeral markers */
.numeral{
  font-family: var(--font-display);
  font-size: var(--step-h3);
  color: var(--color-primary);
  line-height: 1;
}

/* footer */
.footer-link{
  color: var(--color-background);
  text-decoration: none;
}
.footer-link:hover{
  text-decoration: underline;
}

/* cookie banner */
#cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background-color: var(--color-text-primary);
  color: var(--color-background);
  z-index: 100;
  border-top: 1px solid var(--color-secondary);
}
#cookie-banner button{
  border-radius: var(--radius-btn);
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}
#cookie-banner .cookie-accept{
  background-color: var(--color-primary);
  color: #fff;
  border: none;
}
#cookie-banner .cookie-decline{
  background-color: transparent;
  color: var(--color-background);
  border: 1px solid var(--color-background);
}
#cookie-banner.hidden{
  display: none;
}

/* map embed */
.map-frame{
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--radius-img);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
}
.map-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* faq */
details.faq-item{
  border-bottom: 1px solid var(--border-hairline);
  padding: 1.1rem 0;
}
details.faq-item summary{
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--step-body);
  list-style: none;
}
details.faq-item summary::-webkit-details-marker{
  display: none;
}
details.faq-item[open] summary{
  color: var(--color-primary);
}