/* Skisikor IT — shared styles
   Palette, fonts and family overrides live in the inline @theme block per page.
   This file holds: cookie banner, keyframes, radius/shadow/button overrides. */

body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}

/* ---------- Section rhythm: oversized-bordered-cards ---------- */
.section-card {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid var(--color-accent);
  border-radius: 12px;
  background-color: var(--color-surface);
  box-shadow: 0 12px 32px rgba(175, 52, 0, 0.10);
}

/* ---------- Radius family: soft-medium-radius ---------- */
.card-soft {
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 46, 90, 0.10);
}

.card-soft.tint-primary {
  box-shadow: 0 12px 32px rgba(0, 46, 90, 0.14);
}

.card-soft.tint-secondary {
  box-shadow: 0 12px 32px rgba(195, 149, 74, 0.18);
}

.card-soft.tint-accent {
  box-shadow: 0 12px 32px rgba(175, 52, 0, 0.16);
}

img.rounded-img {
  border-radius: 8px;
}

/* ---------- Shadow family: lifted-blurry ---------- */
.shadow-lifted {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.shadow-lifted-btn {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ---------- Button + form family: brutalist-thick-border ---------- */
.btn-brutal {
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 3px solid var(--color-primary);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  display: inline-block;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-brutal:hover {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.btn-brutal-accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 3px 3px 0 var(--color-accent);
}

.input-brutal {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 2px solid var(--color-primary);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
}

.input-brutal:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ---------- Nav ---------- */
.nav-link-underline {
  position: relative;
  color: var(--color-text-primary);
}

.nav-link-underline:hover {
  color: var(--color-accent);
}

/* ---------- Mobile menu ---------- */
#mobile-menu {
  display: none;
}

#mobile-menu.open {
  display: flex;
}

/* ---------- Cookie banner ---------- */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background-color: var(--color-primary-dark);
  color: var(--color-surface);
  border-top: 3px solid var(--color-secondary);
}

#cookie-banner.hidden-banner {
  display: none;
}

/* ---------- Form confirmation ---------- */
#booking-confirmation {
  display: none;
}

#booking-confirmation.show {
  display: block;
}

/* ---------- Keyframes ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}