/* Global styles — Kaval.AI website.
   Design system mirrored from the kaval.ai frontend app (fonts, palette, icons). */

/* Brand fonts, self-hosted so a visit sends nothing to Google Fonts. The same
   weights the site used to import from there; the .woff2 files are converted
   from the .ttf files beside them (OFL, licence in each folder). Absolute URLs,
   because the blog links a copy of this file from /assets/blog/. */
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/Chakra_Petch/ChakraPetch-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/Chakra_Petch/ChakraPetch-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/Chakra_Petch/ChakraPetch-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/Chakra_Petch/ChakraPetch-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/Chakra_Petch/ChakraPetch-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/Space_Mono/SpaceMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/Space_Mono/SpaceMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/Space_Mono/SpaceMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/Space_Mono/SpaceMono-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* kavalai theme palette (from the frontend daisyUI theme) */
  --color-base-100: #f4f4f6;
  --color-base-200: #e5e5e8;
  --color-base-300: #d6d6da;
  --color-base-content: #273e47;

  --color-primary: #acc12f;
  --color-primary-content: #273e47;
  --color-secondary: #b185a7;
  --color-accent: #1b998b;
  --color-neutral: #a8a8af;
  --color-info: #6d9999;
  --color-success: #809537;
  --color-warning: #e67f0d;
  --color-error: #82204a;

  /* Visual toolkit shades ("Primary Shades" page): lime tints for light
     grounds, lime->charcoal blends for dark accents, charcoal->grey blends. */
  --color-lime-50: #f7f9ed;
  --color-lime-100: #f1f5dc;
  --color-lime-200: #e3eaba;
  --color-lime-300: #d5e097;
  --color-lime-600: #96ab33;
  --color-lime-700: #809537;
  --color-lime-800: #536a3f;
  --color-lime-900: #3d5443;
  --color-slate-700: #3a4d56;
  --color-slate-600: #4d5c65;
  --color-slate-500: #606c74;
  /* Toolkit secondary colours not already in the palette above */
  --color-cayenne: #f35b04;
  --color-aqua: #86bbbd;

  /* Chamfer size shared by .btn-cut / .panel-cut */
  --cut: 16px;

  /* Brand fonts */
  --font-family-header: 'Chakra Petch', sans-serif;
  --font-family-body: 'Space Grotesk', sans-serif;
  --font-family-accent: 'Space Mono', monospace;

  /* Layout */
  --header-height: 64px;
  --radius-box: 0.5rem;
  --radius-field: 0.25rem;

  /* Back-compat aliases used across components */
  --main-bg-color: var(--color-base-100);
  --main-text-color: var(--color-base-content);
  --accent-color: var(--color-primary);
  --dark-bg-color: var(--color-base-content);
}

body {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  font-family: var(--font-family-body);
  font-weight: 500;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-header);
  color: var(--color-base-content);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.accent-font,
code, pre, kbd, samp,
.mono, .font-mono {
  font-family: var(--font-family-accent);
}

.font-header { font-family: var(--font-family-header); }
.font-body { font-family: var(--font-family-body); }

button {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-field);
  cursor: pointer;
  font-family: var(--font-family-header);
  font-weight: 600;
  transition: opacity 0.2s, box-shadow 0.2s;
}

button:hover {
  opacity: 0.9;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button with cut top-right and bottom-left corners.
   clip-path clips box-shadow — put shadows on a wrapper via filter: drop-shadow. */
.btn-cut {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* Same chamfer for panels/cards (toolkit colour cards, tag boxes). Override
   --cut on the element for a larger cut. Like .btn-cut, it clips box-shadow. */
.panel-cut {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* Toolkit section tag: tracked Space Mono label in a thin box with a cut
   bottom-right corner and the lime pulsar wedge top-left ("LOGO 01"). */
.section-tag {
  position: relative;
  display: inline-block;
  padding: 8px 24px 8px 36px;
  border: 2px solid currentColor;
  font-family: var(--font-family-accent);
  font-size: 1.44rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  --cut: 20px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

.section-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

input, select, textarea {
  background-color: #ffffff;
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  font-family: var(--font-family-body);
  padding: 8px;
  border-radius: var(--radius-field);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

a {
  color: var(--color-base-content);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ---- Shared layout ----
   The app shell is a flex column exactly one viewport tall: header, growing
   page content, footer. Pages fill the remaining space instead of forcing
   min-height 100vh, so no scrollbar appears unless content actually needs it. */
app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

app-root > router-outlet {
  display: none;
}

app-root > *:not(app-header):not(app-footer):not(router-outlet) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

.content-wrapper {
  flex-grow: 1;
  padding: 100px 20px 80px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Header (dark slate bar, matches frontend navbar) ---- */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background-color: var(--color-base-content);
  box-shadow: 0 1px 4px rgba(39, 62, 71, 0.25);
  z-index: 1000;
}

.header-logo-container {
  display: flex;
  align-items: center;
}

.header-logo {
  height: 24px;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-links a {
  color: var(--color-primary);
  font-family: var(--font-family-header);
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
}

.header-links a:hover {
  color: var(--color-primary);
  opacity: 1;
}

.header-links a i {
  margin-right: 6px;
}

/* The console login is the one filled (lime) link in the bar, the toolkit's
   treatment for an element that needs attention; the other links stay text. */
.header-links .header-cta {
  --cut: 10px;
  padding: 7px 16px;
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 600;
  opacity: 1;
}

.header-links .header-cta:hover {
  color: var(--color-primary-content);
  opacity: 0.9;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Language switch (EN / ET): Space Mono detail text, the active language
   underlined in lime. Markup lives in header.component.html and, mirrored, in
   backend/templates/blog/base.html; the choice is kept in the kavalai-lang cookie. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-accent);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.lang-switch button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 2px 2px;
  color: var(--color-primary);
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
  opacity: 0.55;
}

.lang-switch button:hover,
.lang-switch button:focus-visible {
  opacity: 1;
}

.lang-switch button.active {
  opacity: 1;
  border-bottom-color: var(--color-primary);
}

.lang-switch span {
  opacity: 0.35;
}

/* Burger toggle: hidden on desktop, shown on mobile */
.burger-button {
  display: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 6px 8px;
  box-shadow: none;
  color: var(--color-primary);
  font-size: 22px;
  line-height: 1;
  opacity: 0.85;
}

.burger-button:hover {
  opacity: 1;
}

/* ---- Footer (dark slate, matches header) ---- */
.footer-section {
  padding: 24px 20px;
  text-align: center;
  font-size: 0.9rem;
  background-color: var(--color-base-content);
  color: var(--color-primary);
}

.footer-section p {
  opacity: 0.85;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 16px;
}

.footer-links a {
  color: var(--color-primary);
  font-family: var(--font-family-header);
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
}

.footer-links a:hover {
  color: var(--color-primary);
  opacity: 1;
}

.footer-links a i {
  margin-right: 6px;
}

/* ---- Utilities ---- */
.text-accent { color: var(--color-primary); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.opacity-75 { opacity: 0.75; }

@media (max-width: 768px) {
  .main-header {
    height: auto;
    padding: 15px;
  }

  /* Collapse header links behind a burger in the top-right; the language
     switch stays in the bar, to the left of the burger */
  .burger-button {
    display: block;
  }

  .header-nav {
    gap: 16px;
  }

  .lang-switch {
    order: -1;
  }

  .header-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    padding: 16px 24px;
    background-color: var(--color-base-content);
    box-shadow: 0 4px 8px rgba(39, 62, 71, 0.25);
    border-top: 1px solid rgba(172, 193, 47, 0.15);
  }

  .header-nav.open .header-links {
    display: flex;
  }

  .content-wrapper {
    padding-top: 120px;
  }
}

/* Cookie notice: markup is built by public/assets/kv-notice.js (names avoid
   "cookie"/"consent", which ad-blocker filter lists hide). Bottom-left,
   because the chat widget's launcher (bottom-right) owns that corner; on
   phones the notice stretches but stops short of the launcher. */
.kv-notice {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px 10px 20px;
  max-width: calc(100vw - 48px);
  background: var(--color-base-content);
  color: var(--color-base-100);
  border-left: 3px solid var(--color-primary);
  box-shadow: 0 8px 24px rgba(39, 62, 71, 0.25);
  animation: kv-notice-in 0.4s ease backwards;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes kv-notice-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kv-notice-text {
  font-family: var(--font-family-accent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kv-notice-button {
  --cut: 8px;
  font-family: var(--font-family-header);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 20px;
  border: 0;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.kv-notice-button:hover,
.kv-notice-button:focus-visible {
  background: var(--color-lime-100);
  outline: none;
}

.kv-notice-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

@media (max-width: 600px) {
  .kv-notice {
    left: 12px;
    right: 96px;
    bottom: 24px;
    max-width: none;
    justify-content: space-between;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-notice {
    animation: none;
    transition: none;
  }
}