/*
 * site.css — rythmos.ge/ritmi
 *
 * The pages keep the design's inline styles, so this file is only what the
 * design kept outside them: its <style> block, the wrapper, and the state
 * styles that were `{{ payStyle }}` bindings resolved by a script.
 *
 * Generated pages come from tools/build-ritmi.py — edit the design or that
 * script, never the HTML. css/hover.css is generated too.
 *
 * Same two house rules as the umbrella: no webfonts, and every interactive
 * element clears 44px.
 */

:root {
  /* Standard faces only — owner's rule. The design asked for Noto Sans
     Georgian / Noto Serif Georgian / IBM Plex Mono off the Google CDN;
     build-ritmi.py rewrites those three inline families to these. Fallback is
     per-glyph, so Latin and Georgian runs on one line each pick a real face. */
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                "Noto Sans Georgian", Sylfaen, Arial, sans-serif;
  --font-serif: Georgia, "Noto Serif Georgian", "Times New Roman", Sylfaen, serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;
  --tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* On <html>, not on .ritmi-root: overflow on the root propagates to the
     viewport, so it does NOT create a scroll container. On a wrapper it would,
     and the sticky header would quietly stop sticking. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body { margin: 0; background: #03051A; }

/* The design's outer wrapper (its line 31), minus the overflow-x that would
   break the sticky header. */
.ritmi-root {
  background: #03051A;
  font-family: var(--font-sans);
  color: #F4F6FF;
  width: 100%;
  position: relative;

/* Georgian compounds are long and offer no break opportunities. At 320px the
   privacy page's h1 „კონფიდენციალურობის პოლიტიკა" measured 324px inside a
   288px column and pushed the whole document 20px wider — a real horizontal
   scrollbar from one word. overflow-wrap only acts when a word genuinely
   cannot fit, so it costs nothing elsewhere. It inherits, so setting it once
   here covers every heading, paragraph and link. */
  overflow-wrap: break-word;
}

::selection { background: rgba(124, 58, 237, .45); color: #fff; }

[data-hidescroll]::-webkit-scrollbar { display: none; }
[data-hidescroll] { scrollbar-width: none; }

/* display:contents makes the <img> itself the layout box, so wrapping every
   image in <picture> for its WebP source changed no positioning. Many of these
   images are absolutely positioned decorations — without this they would move. */
picture { display: contents; }

input, textarea, button { font-family: inherit; }
input:focus, textarea:focus { outline: none; }

/* Every <a> here was a clickable <span> or <div> in the design and carries its
   own inline colour, so inherit rather than paint them all cyan. */
.ritmi-root a { color: inherit; text-decoration: none; }
.ritmi-root a[href^="mailto:"], .ritmi-root a[href^="http"] { color: #67E8F9; }
.ritmi-root a[href^="mailto:"]:hover, .ritmi-root a[href^="http"]:hover { color: #A5F3FC; }

/* Same for <button>: it was a div, it must not look like a native control. */
.ritmi-root button {
  border: 0; background: none; color: inherit; font: inherit;
  text-align: inherit; padding: 0; cursor: pointer;
}

:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; border-radius: 4px; }

/* -------------------------------------------------------------------------- */
/* Tap targets and the header rail                                            */
/* -------------------------------------------------------------------------- */

/* At 320px the logo, the nav and the CTA pill cannot all fit, and the nav's
   items pushed the PAGE 20px wider instead of scrolling inside their own rail.
   `clip` contains them without creating a scroll container, so the sticky
   header keeps sticking. */
.site-header { overflow-x: clip; }
.site-header [data-hidescroll] { flex: 1 1 0; min-width: 0; overflow-x: auto; }

/* Links the design drew as flex rows — a back link, a card footer link. They
   are block-level, so a min-height cannot disturb the text around them. */
.ritmi-root a[style*="display:flex"],
.ritmi-root button[style*="display:flex"] { min-height: var(--tap); }

/* An inline link inside a sentence cannot be a 44px-tall block without
   wrecking the line. Symmetric padding grows the hit rect to 44px+ while the
   negative margin keeps the line box exactly where it was. 14.5px text + 30
   = 44.5px, measured. */
.ritmi-root p a,
.ritmi-root span a,
.ritmi-root li a,
.ritmi-root td a {
  padding-block: 15px;
  margin-block: -15px;
}

.skip-link {
  position: absolute; left: 16px; top: 8px; z-index: 300;
  transform: translateY(-160%);
  min-height: var(--tap); padding: 0 18px;
  display: inline-flex; align-items: center;
  border-radius: 14px; background: #0E1433;
  border: 1px solid rgba(140, 160, 255, .24);
  color: #F4F6FF; font-weight: 700;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* -------------------------------------------------------------------------- */
/* State styles — these were {{ }} bindings in the design's script.            */
/* Both branches are kept verbatim; js/ritmi.js toggles `is-on` / `is-ready`.  */
/* -------------------------------------------------------------------------- */

.plan-card {
  padding: 15px 16px;
  border-radius: 16px;
  background: #070B24;
  border: 1.5px solid rgba(140, 160, 255, .2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: var(--tap);
  width: 100%;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.plan-card--year { border-color: rgba(168, 85, 247, .3); position: relative; }

.plan-card--month.is-on {
  background: rgba(34, 211, 238, .1);
  border-color: #67E8F9;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}
.plan-card--year.is-on {
  background: rgba(168, 85, 247, .14);
  border-color: #C084FC;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .14);
}

.pay-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  background: #131A3D;
  border: 1px solid rgba(140, 160, 255, .18);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #6B76A8; font-size: 17px; font-weight: 800;
  cursor: not-allowed;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.pay-btn.is-ready {
  background: linear-gradient(90deg, #2563EB, #7C3AED);
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(59, 130, 246, .35);
  color: #FFFFFF;
  cursor: pointer;
}

.confirm-box {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.6px solid rgba(251, 113, 133, .6);
  background: transparent;
  flex: none;
  margin-top: 1px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.confirm-box svg { opacity: 0; transition: opacity .15s ease; }
.confirm-box.is-on { border-color: #FB7185; background: #FB7185; }
.confirm-box.is-on svg { opacity: 1; }

.confirm-box { position: relative; }

.send-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  background: #131A3D;
  border: 1px solid rgba(140, 160, 255, .18);
  display: flex; align-items: center; justify-content: center;
  color: #6B76A8; font-size: 16.5px; font-weight: 800;
  cursor: not-allowed;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.send-btn.is-ready {
  background: linear-gradient(90deg, #E11D48, #9F1239);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(225, 29, 72, .28);
  color: #FFFFFF;
  cursor: pointer;
}

/* Reason chips on the delete page — `chip()` in the design's script. */
.reason-chip {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: var(--tap);
  display: flex; align-items: center;
  background: #070B24;
  border: 1px solid rgba(140, 160, 255, .2);
  color: #A7B0DA;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.reason-chip.is-on {
  background: rgba(34, 211, 238, .13);
  border-color: #67E8F9;
  color: #A5F3FC;
}

/* -------------------------------------------------------------------------- */
/* Motion                                                                     */
/* -------------------------------------------------------------------------- */

@keyframes rFloat  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-18px); } }
@keyframes rFloatB { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-24px) rotate(3deg); } }
@keyframes rPulse  { 0%,100% { opacity:.3; transform:scale(1); } 50% { opacity:.62; transform:scale(1.1); } }
@keyframes rMarquee{ from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes rSheen  { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .skip-link { display: none; }
  body, .ritmi-root { background: #fff; color: #000; }
}

/* -- the phone menu ----------------------------------------------------------
   Shared by all seven pages. The design draws only a desktop header: on a
   phone its links become a strip that is clipped at the screen edge. Below
   700px that strip and the header's Premium button give way to this menu.
   tools/build-ritmi.py adds the markup to the generated pages; the landing
   template carries its own copy. js/menu.js closes it on Escape, on an outside
   tap and after a link is followed. */
/* Native details keeps the compact menu usable even without JavaScript. */
.mobile-menu { display:none; margin-left:auto; position:relative; color:#e2e6fa; }
.mobile-menu summary { min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 14px; border:1px solid #8ca0ff40; border-radius:12px; background:#101632; font:600 13px var(--font-sans); cursor:pointer; list-style:none; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.menu-icon { width:17px; display:flex; flex-direction:column; gap:4px; }
.menu-icon i { display:block; height:1.5px; border-radius:2px; background:currentColor; transition:transform .2s,opacity .2s; }
.mobile-menu[open] .menu-icon i:first-child { transform:translateY(5.5px) rotate(45deg); }
.mobile-menu[open] .menu-icon i:nth-child(2) { opacity:0; }
.mobile-menu[open] .menu-icon i:last-child { transform:translateY(-5.5px) rotate(-45deg); }
.mobile-menu__panel { position:absolute; right:0; top:calc(100% + 10px); width:min(360px,calc(100vw - 32px)); padding:8px; border:1px solid #8ca0ff40; border-radius:16px; background:#0c112b; box-shadow:0 20px 50px #0008; max-height:calc(100dvh - 90px); overflow-y:auto; }
.mobile-menu__panel a { display:flex; align-items:center; min-height:48px; padding:12px 16px; border-radius:10px; color:#d7def5; font-size:14px; line-height:1.5; }
.mobile-menu__panel a:hover { background:#26305a; color:#fff; }
.mobile-menu__panel .mobile-menu__primary { background:linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; margin-top:4px; }
@media (max-width:700px) {
  .mobile-menu { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  .menu-icon i { transition:none; }
}

@media (max-width:700px) {
  .site-header { overflow:visible; }
  .site-header .desktop-nav,.site-header .desktop-premium { display:none!important; }
}