@font-face {
  font-family: "Sanomat Web";
  src: url("/assets/Sanomat-LightItalic-Web-d26057c7.woff2") format("woff2"),
       url("/assets/Sanomat-LightItalic-Web-e075415a.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  --brand-blue: #040e85;
  --brand-blue-dark: #02085b;
  --brand-gold: #c69c6c;
  --canvas: #ffffff;
  --surface: #f6f6fa;
  --ink: #20233a;
  --muted: #676a7b;
  --border: #e3e4ec;
  --danger: #9b2430;
  --shadow: 0 14px 36px rgba(4, 14, 133, 0.09);
  --radius: 14px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

h1, h2 {
  margin: 0 0 0.65rem;
  color: var(--brand-blue);
  font-family: "Sanomat Web", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1.08;
}

h1 { font-size: clamp(2.35rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { margin: 0 0 0.35rem; }
a { color: var(--brand-blue); }
button, input, select, textarea { font: inherit; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--brand-blue);
  color: white;
  box-shadow: 0 5px 18px rgba(2, 8, 91, 0.2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 2rem));
  min-height: 68px;
  margin: auto;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.brand img { width: 84px; height: 38px; object-fit: contain; }
.brand span { padding-left: 0.7rem; border-left: 1px solid rgba(255, 255, 255, 0.5); }

.site-nav { display: flex; align-items: center; gap: 1rem; }
.site-nav > a, .nav-button { color: white; font-size: 0.9rem; text-decoration: none; }
.site-nav form { margin: 0; }
.nav-button, .locale-button, .text-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-button { color: white; }
.profile-link { display: inline-grid; min-width: 44px; min-height: 44px; border-radius: 50%; place-items: center; }
.profile-link:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.user-avatar { position: relative; display: inline-grid; width: 40px; height: 40px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: #ececf4; place-items: center; }
.user-avatar__placeholder { position: relative; width: 100%; height: 100%; background: linear-gradient(145deg, #f8f8fb, #d9dae6); }
.user-avatar__placeholder::before { position: absolute; top: 7px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: #777b91; content: ""; transform: translateX(-50%); }
.user-avatar__placeholder::after { position: absolute; right: 7px; bottom: 5px; left: 7px; height: 15px; border-radius: 50% 50% 35% 35%; background: #777b91; content: ""; }
.user-avatar__image { position: absolute; inset: 0; width: 100%; height: 100%; background: white; object-fit: cover; }
.locale-switcher { display: flex; gap: 0.4rem; }
.locale-switcher form { margin: 0; }
.locale-button { min-width: 38px; min-height: 38px; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 7px; background: white; color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.locale-button.is-active { border-color: var(--brand-blue); background: var(--brand-blue); color: white; }

.page-container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 4rem 0 6rem; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.page-heading > div:first-child { max-width: 680px; }
.page-heading p { color: var(--muted); }
.eyebrow { margin: 0 0 0.6rem; color: var(--brand-gold) !important; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.content-section { margin-top: 3.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--brand-blue);
  border-radius: 8px;
  background: var(--brand-blue);
  color: white;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}
.button:hover { background: var(--brand-blue-dark); transform: translateY(-1px); }
.button--secondary { background: white; color: var(--brand-blue); }
.button--secondary:hover { color: white; }
.button--danger { border-color: var(--danger); background: white; color: var(--danger); }
.button--danger:hover { background: var(--danger); color: white; }
.button--small { min-height: 34px; padding: 0.38rem 0.75rem; font-size: 0.84rem; }
.button--full { width: 100%; }
.text-link, .text-button { color: var(--brand-blue); font-weight: 700; text-decoration: none; }

.flash-container { position: fixed; z-index: 100; top: 78px; right: 1rem; width: min(420px, calc(100% - 2rem)); }
.flash { display: flex; align-items: start; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1rem; border-radius: 9px; background: var(--brand-blue); color: white; box-shadow: var(--shadow); }
.flash__message { flex: 1; margin: 0; padding: 0.1rem 0; }
.flash__dismiss { display: inline-grid; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 1.35rem; line-height: 1; }
.flash__dismiss:hover { background: rgba(255, 255, 255, 0.16); }
.flash__dismiss:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.flash--alert { background: var(--danger); }

.record-form { display: grid; gap: 1.15rem; }
.form-field { display: grid; gap: 0.4rem; }
.form-field[hidden] { display: none; }
.form-field label { color: var(--ink); font-size: 0.88rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea, .search-form input {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .search-form input:focus { outline: 2px solid rgba(4, 14, 133, 0.25); border-color: var(--brand-blue); }
.form-field small { color: var(--muted); }
.form-field--checkbox { display: flex; align-items: start; gap: 0.7rem; }
.form-field--checkbox input { width: auto; margin-top: 0.25rem; }
.form-field--checkbox div { display: grid; gap: 0.25rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; }
.form-errors { padding: 1rem; border-left: 4px solid var(--danger); background: #fff2f3; }
.form-errors h2 { color: var(--danger); font-family: inherit; font-size: 1rem; font-style: normal; font-weight: 700; }
.form-errors ul { margin-bottom: 0; }

.status-badge { display: inline-block; margin-left: 0.45rem; padding: 0.18rem 0.45rem; border-radius: 99px; background: #e8e9ff; color: var(--brand-blue); font-size: 0.7rem; font-weight: 700; }
.status-badge--muted, .status-badge--archived { background: #ececf0; color: #5d5f6b; }
.status-badge--published, .status-badge--draft { background: #e7f4e9; color: #1e6c2b; }
.status-badge--processing { background: #fff3d8; color: #815a00; }
.status-badge--rejected { background: #ffe5e7; color: var(--danger); }
.status-badge--active, .status-badge--free { background: #f5eadf; color: #745029; }
.status-badge--scheduled { background: #e8e9ff; color: var(--brand-blue); }
.status-badge--expired, .status-badge--exhausted { background: #ececf0; color: #5d5f6b; }

.coupon-page { min-height: calc(100vh - 68px); padding: clamp(3rem, 9vw, 7rem) 1rem; background: var(--surface); }
.coupon-card { width: min(680px, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--border); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.coupon-card > p:not(.eyebrow, .field-notice) { color: var(--muted); }
.coupon-card > .text-link { display: inline-block; margin-top: 1.25rem; }
.coupon-code { display: block; width: fit-content; max-width: 100%; margin: 0.9rem auto 1.35rem; padding: 0.65rem 0.9rem 0.65rem 1.05rem; border: 1px dashed var(--brand-gold); border-radius: 8px; background: #fffaf4; color: var(--brand-blue); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: clamp(1.25rem, 5vw, 1.85rem); font-style: normal; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; overflow-wrap: anywhere; }
.coupon-book { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.75rem; margin: 1.5rem 0; padding: 1.5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.coupon-book__cover { display: block; width: 100%; aspect-ratio: 9 / 13; border-radius: 7px; box-shadow: 0 6px 16px rgba(4, 14, 133, 0.12); object-fit: cover; }
.coupon-book__body { align-self: center; min-width: 0; }
.coupon-book__body h2 { margin-bottom: 0.65rem; font-size: clamp(1.45rem, 4vw, 2rem); overflow-wrap: anywhere; }
.coupon-book__description { margin: 0; color: var(--muted); line-height: 1.5; white-space: pre-line; }
.coupon-catalog { display: grid; place-items: center; min-height: 205px; margin: 1.5rem 0; padding: 1.5rem; border: 1px solid var(--brand-gold); border-radius: 10px; background: white; color: var(--brand-blue); text-align: center; }
.coupon-catalog__logo { display: block; width: min(100%, 180px); height: auto; margin-bottom: 1.5rem; filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(7461%) hue-rotate(244deg) brightness(78%) contrast(125%); }
.coupon-catalog h2 { max-width: 14ch; margin: 0; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; }
.coupon-summary { display: grid; gap: 0.75rem; margin: 1.5rem 0; }
.coupon-summary div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.coupon-summary dt { color: var(--muted); font-weight: 700; }
.coupon-summary dd { margin: 0; text-align: right; }
.status-badge--scheduled { background: #e8e9ff; color: var(--brand-blue); }
.status-badge--expired, .status-badge--revoked { background: #ececf0; color: #5d5f6b; }

@media (max-width: 720px) {
  .site-header__inner { width: calc(100% - 1rem); min-height: 60px; }
  .brand span { display: none; }
  .site-nav { gap: 0.55rem; }
  .site-nav > a { display: none; }
  .site-nav > .profile-link { display: inline-grid; }
  .page-container { width: min(100% - 1.25rem, 1180px); padding-top: 2.5rem; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .coupon-book { grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .coupon-catalog { min-height: 160px; }
}