/* ========= Base & theme ========= */
:root{
  --frame-w: min(92vw, 420px);
  --frame-h: calc(var(--frame-w) * 816 / 396);

  --c-bg: #626262;
  --c-frame: #e01b1b;
  --c-chrome: #535353;

  --c-example: #da9e92;  /* example */
  --c-android: #dbd08f;  /* android */
  --c-ios:     #a0afe5;  /* iOS */
  --c-web:     #a4c7af;  /* web */

//  --c-example: #e3bb88;  /* example */
//  --c-android: #d89864;  /* android */
//  --c-ios:     #b1695a;  /* iOS */
//  --c-web:     #7ea9df;  /* web */

  --text-dark:  #0f1115;
  --text-light: #f6f7fb;

  --ease: cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--c-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
  color:#ffffff;
}

/* ========= Layout ========= */
.page{ display:block; padding:1rem; }
.meta{ margin:0 0 1rem; line-height:1.5; }
.meta h1{ margin:0 0 .25rem; font-weight:700; font-size:clamp(1.6rem,5.5vw,3rem); }
.meta p{ margin:0; color:rgb(255, 255, 255); font-size:clamp(1rem,3vw,1.1rem); }

/* Phone frame */
.phone{
  width:var(--frame-w); height:var(--frame-h);
  margin:0 auto 2rem; background:var(--c-frame);
  border:4px solid #2f2f2f; border-radius:28px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  display:flex; flex-direction:column; overflow:hidden;
}
.chrometop,.chromebottom{
  height:clamp(36px,7.5vw,40px); background:var(--c-chrome);
  display:flex; align-items:center; gap:.4rem; padding-inline:clamp(.6rem,2.5vw,1rem);
}
.chromebottom{ background:var(--c-chrome); }
.dot{width:.4rem;height:.4rem;border-radius:50%;background:#fff;opacity:.85}
.brand{margin-left:.4rem}

/* ========= Accordion stack (click-only) ========= */
.stack{
  position:relative; flex:1 1 auto; display:flex; flex-direction:column; min-height:0;
}
.card{
  position:relative; display:flex; flex-direction:column; min-height:0;
  flex:1 1 0%; overflow:hidden; cursor:pointer;
  transition:flex .35s var(--ease), transform .35s var(--ease);
  outline:none;
}
.card:focus-visible{ box-shadow: inset 0 0 0 2px rgb(103, 103, 103); }
.card__title{
  letter-spacing:.18em; font-size:clamp(.7rem,2.3vw,.8rem);
  font-weight:700; opacity:.85; padding:.75rem 1rem 0;
}
.card__content{
  padding:.75rem 1rem 5.5rem; color:#fff;
  opacity:0; transform:translateY(8%);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.card.is-active{
  flex:5 1 0%;
}
.card.is-active .card__content{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

/* No hover growth — click-only, so remove hover expansion entirely */

/* Theming */
.card--example{ background:var(--c-example); color:var(--text-dark); }
.card--android{ background:var(--c-android); color:var(--text-dark); }
.card--ios    { background:var(--c-ios);     color:var(--text-light); }
.card--web    { background:var(--c-web);     color:var(--text-light); }

/* Badges */
.badge{
  position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%);
  width:clamp(160px,64%,280px); height:clamp(64px,18vw,100px);
  background-repeat:no-repeat; background-size:contain; background-position:center bottom;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.card.is-active .badge{ opacity:1; }
.card--android .badge{ background-image:url("/google-play-store.png"); }
.card--ios     .badge{ background-image:url("/ios-apple-store.png"); }
.card--web     .badge{ background-image:url("/cloq.it-web-app.png"); }

/* ========= Literary clock tweaks (scoped) ========= */
.cloq-host{ max-width:100%; overflow:hidden; }
.card--example #root{
  background:transparent !important;
  width:100% !important; height:auto !important; min-height:0 !important; padding:0 !important;
}
.card--example #quote{ font-size:clamp(1.2rem,4.8vw,1.6rem); line-height:1.25; }
.card--example #attribution{ font-size:clamp(.9rem,3.2vw,1rem); opacity:.9; margin-top:.35rem; }
.card--example #logo{ display:none !important; }
.card--example #fullscreen{
  right:.5rem !important; bottom:.5rem !important; transform:none !important; opacity:.7;
}

/* ========= Responsive page layout ========= */
@media (min-width:640px){ .page{ padding:1.25rem; } }
@media (min-width:1024px){
  .page{
    display:grid; grid-template-columns:1fr minmax(320px,var(--frame-w));
    gap:2rem; align-items:start; max-width:1100px; margin:0 auto;
  }
  .meta{ margin:.5rem 0 0; }
}

/* ========= Motion ========= */
@media (prefers-reduced-motion: reduce){
  .card, .card__content, .badge{ transition:none !important; }
}

/* ===== CLOQ.IT acronym banner ===== */

.acronym{
  margin: 0 0 1.25rem;
}

.acronym-list{
  list-style: none;
  margin: 0;
  padding: 0;

  /* nice vertical rhythm */
  display: grid;
  gap: clamp(.35rem, 1.4vw, .6rem);
}

/* each line: tile on the left, word on the right */
.acronym-list li{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(.5rem, 2vw, .9rem);
}

/* tile image size scales with viewport, but is capped */
.acronym-list img{
  width: clamp(38px, 8vw, 64px);
  height: clamp(38px, 8vw, 64px);
  object-fit: contain;
  display: block;
}

/* big, elegant type for the word */
.acronym-list span{
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif; /* matches your web-app vibe */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  color: #000000;

  /* responsive: large on desktop, comfortably big on phones */
  font-size: clamp(1.6rem, 6vw, 2rem);
  text-shadow: 0 0 1px rgba(157, 0, 0, 0.277); /* subtle crispness on dark bg */
}

/* tighten long lines on very wide screens */
@media (min-width: 1200px){
  .acronym-list{
    max-width: 36rem;
  }
}

/* accessibility: reduce motion folks won’t see unwanted transitions (none used here, but future-proof) */
@media (prefers-reduced-motion: reduce){
  .acronym-list *{ transition: none !important; }
}

/***** === Light theme overrides for CLOQ.IT === *****/

/* Page → white; default text → near-black for readability */
:root{
  --page-bg: #ffffff;
  --text-body: #111111;
  --text-muted: #444444;
  --heading-active: #00476a;  /* active panel heading */
}

html, body{
  background: var(--page-bg) !important;
  color: var(--text-body) !important;
}

/* Left intro/hero text */
.meta{
  color: var(--text-body) !important;
}
.meta h1{
  color: var(--text-body) !important;
}
.meta p, .meta a{
  color: var(--text-body) !important;
}
.meta a:hover{ text-decoration: underline; }

/* Phone frame can stay dark; inside cards we switch content colors to black */
.card,
.card__content{
  color: var(--text-body) !important;
}

/* Headings in cards are black by default… */
.card__title{
  color: var(--text-body) !important;
}

/* …but when a card is active, its heading flips to white for contrast */
.card.is-active .card__title{
  color: var(--heading-active) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Badges are images; no color change needed */

/* ---------- Literary clock (EXAMPLE) colors & typography ---------- */
/* Make the quote text black and readable */
.card--example #quote{
  color: var(--text-body) !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-weight: 700;
  line-height: 1.25;
  /* size already responsive in your base; keep it here for clarity */
  font-size: clamp(1.2rem, 4.8vw, 1.6rem) !important;
}

/* Styled attribution below the quote */
.card--example #attribution{
  color: var(--text-muted) !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-style: italic;
  letter-spacing: .02em;
  margin-top: .4rem !important;
  font-size: clamp(.9rem, 3.2vw, 1rem) !important;
  opacity: .95;
}

/* Optional: add a subtle divider before the attribution on longer quotes */
.card--example #attribution:before{
  content: "— ";
  opacity: .9;
}

/* Make sure any links inside clock text are black */
.card--example #quote a, 
.card--example #attribution a{
  color: var(--text-body) !important;
  text-decoration: underline;
}

/* General link color across cards */
.card__content a{ color: var(--text-body); text-decoration: underline; }

/* If /web-app/styles.css tries to set dark backgrounds, keep it transparent in the card */
.card--example #root{
  background: transparent !important;
}

/* Accessibility: ensure focus ring is visible on white */
.card:focus-visible{
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6) !important;
}

/* ========== Literary quote rendering (EXAMPLE card) ========== */

/* Left-align the whole block and keep a readable width */
.card--example #root,
.card--example #quote,
.card--example #attribution{
  text-align: left !important;
}

.card--example #quote{
  max-width: 38rem;           /* comfortable measure */
  margin: .25rem 0 0;
  line-height: 1.35;
  color: #111 !important;     /* body text black */
  hyphens: auto;
  word-break: normal;
}

/* Turn the poem-y line breaks into a normal paragraph */
.card--example #quote br{ display: none; }

/* If your clock wraps the time phrase in a link/mark/span, make it darker */
.card--example #quote a,
.card--example #quote mark,
.card--example #quote .time,
.card--example #quote [data-time]{
  color: #0b3d91 !important;           /* darker blue */
  font-weight: 800;
  text-decoration: none;               /* cleaner than underline */
  border-bottom: 2px solid rgba(11,61,145,.3);
}
.card--example #quote a:hover{
  color: #082c6c !important;
  border-bottom-color: rgba(8,44,108,.5);
}

/* Styled attribution under the quote */
.card--example #attribution{
  color: #444 !important;
  font-style: italic;
  letter-spacing: .02em;
  margin-top: .45rem !important;
}
.card--example #attribution::before{
  content: "— ";
  opacity: .9;
}

:root{
  /* one consistent badge size */
  --badge-h: clamp(72px, 18vw, 96px);
  --badge-w: clamp(200px, 68%, 320px);
}

/* Make sure cards create a positioning context */
.card{ position: relative; }

/* Content gets its own stacking, and leaves room for the badge */
.card__content{
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--badge-h) + 1.2rem); /* reserves space */
}

/* The badge IS the clickable link — limited to a small box */
.badge{
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);

  width: var(--badge-w);
  height: var(--badge-h);

  display: block;           /* no flex/inline-flex */
  pointer-events: auto;
  z-index: 2;               /* above the card content but only in its box */

  /* draw the image; scale by height so all look same size */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 100%;

  opacity: 0;               /* shown only when active */
  transition: opacity .25s ease;
}

/* Reveal only on the active card */
.card.is-active .badge{ opacity: 1; }

/* Per-card images */
.card--android .badge{ background-image: url("/google-play-store.png"); }
.card--ios     .badge{ background-image: url("/ios-apple-store.png"); }
.card--web     .badge{ background-image: url("/cloq.it-web-app.png"); }

/* Keyboard focus ring */
.badge:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* === Accordion/badge click fixes (append-only) === */

/* Reserve room so content never sits under the badge box */
.card__content{
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--badge-h, 96px) + 1.2rem);
}

/* The badge is a small, bottom-centered link — not full-card */
.badge{
  position: absolute !important;
  left: 50% !important;
  bottom: .9rem !important;
  transform: translateX(-50%) !important;

  /* Force explicit hit-box; override any earlier width:100%/height:100% */
  width: var(--badge-w, 260px) !important;
  height: var(--badge-h, 96px) !important;

  display: block !important;
  z-index: 2 !important;

  /* Keep logos sized by height for consistent visual size */
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: auto 100% !important;

  /* When hidden, it must NOT eat clicks */
  opacity: 0;
  pointer-events: none;             /* << key */
  transition: opacity .25s ease;
}

/* Only the active panel shows & enables the badge link */
.card.is-active .badge{
  opacity: 1;
  pointer-events: auto;             /* << key */
}

/* Make sure headings stay above background if needed */
.card__title{ position: relative; z-index: 1; }

/* ========== Badge fixes: no clipping, true PNG transparency, uniform size ========== */

/* uniform badge box (keeps your existing vars if already defined) */
:root{
  --badge-h: var(--badge-h, clamp(72px, 18vw, 96px));
  --badge-w: var(--badge-w, clamp(200px, 68%, 320px));
}

/* keep content clear of the badge area to avoid any crop at the bottom */
.card__content{
  padding-bottom: calc(var(--badge-h) + 1.2rem);
}

/* badge anchor: bounded, bottom-centered click target */
.badge{
  position: absolute !important;
  left: 50% !important;
  bottom: .9rem !important;
  transform: translateX(-50%) !important;

  width: var(--badge-w) !important;
  height: var(--badge-h) !important;

  display: block !important;
  z-index: 2 !important;

  /* visible only on active card; when hidden, don't intercept clicks */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.card.is-active .badge{
  opacity: 1;
  pointer-events: auto;
}

/* the actual PNG, centered and fully visible, no cropping */
.badge__img{
  position: absolute;
  inset: 0;                 /* top/right/bottom/left:0 */
  margin: auto;             /* center both axes */
  width: 100%;
  height: 100%;
  object-fit: contain;      /* preserve aspect; no cropping */
  display: block;
  background: transparent;  /* ensure no fill under transparency */
  image-rendering: auto;
}

/* focus ring for accessibility */
.badge:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* (Optional) Slightly increase the reserved space on big desktops
   to guarantee zero clipping even with large text sizes */
@media (min-width: 1200px){
  .card__content{
    padding-bottom: calc(var(--badge-h) + 1.5rem);
  }
}

/* ===== Badges: bounded click area, no clipping, PNG transparency intact ===== */

/* Uniform badge box (reuses existing custom props if you already set them) */
:root{
  --badge-h: var(--badge-h, clamp(72px, 18vw, 96px));
  --badge-w: var(--badge-w, clamp(200px, 68%, 320px));
}

/* Ensure the card reserves space so text never overlaps the badge */
.card__content{
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--badge-h) + 1.2rem);
}

/* The badge anchor: a small, bottom-centered box only */
.badge{
  position: absolute !important;
  left: 50% !important;
  bottom: .9rem !important;
  transform: translateX(-50%) !important;

  width: var(--badge-w) !important;
  height: var(--badge-h) !important;

  display: block !important;
  z-index: 2 !important;

  /* Visibility & clickability tied to active state */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.card.is-active .badge{
  opacity: 1;
  pointer-events: auto;
}

/* The actual PNG: scale to fit without cropping; keep transparency */
.badge__img{
  position: absolute !important;
  inset: 0 !important;        /* top/right/bottom/left: 0 */
  margin: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

/* Focus ring for keyboard users */
.badge:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Defensive: if any earlier rule made .badge full-size, neutralize it */
.card .badge.badge--fix{ /* not used; reserve for hotfix if needed */ }


/* === Badge image visibility hardening (append-only) === */

/* make sure the badge has a real, small hitbox only */
.badge{
  position: absolute !important;
  left: 50% !important;
  bottom: .9rem !important;
  transform: translateX(-50%) !important;

  width: var(--badge-w, clamp(200px, 68%, 320px)) !important;
  height: var(--badge-h, clamp(72px, 18vw, 96px)) !important;

  display: block !important;
  z-index: 2 !important;

  /* hidden when not active so it doesn't eat clicks */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.card.is-active .badge{
  opacity: 1;
  pointer-events: auto;
}

/* the actual PNG — fully visible, no clipping */
.badge__img{
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 3 !important;
  background: transparent !important;
}

/* defensive: if any earlier rule tried to collapse or hide images */
.badge img{ max-width: none !important; max-height: none !important; }

/* === Badge: show full PNG with transparent rounded corners (no clipping) === */

/* The badge is a small, bottom-centered anchor whose size matches the image */
.badge{
  position: absolute !important;
  left: 50% !important;
  bottom: .9rem !important;
  transform: translateX(-50%) !important;

  /* Let the image determine size; just cap it with max- constraints */
  width: auto !important;
  height: auto !important;
  max-width: clamp(200px, 68%, 320px) !important;
  max-height: clamp(72px, 18vw, 96px) !important;

  display: block !important;
  z-index: 2 !important;

  /* Never fill the transparent corners */
  background: transparent !important;

  /* Do NOT crop the image */
  overflow: visible !important;

  /* Only clickable when the card is active */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.card.is-active .badge{
  opacity: 1;
  pointer-events: auto;
}

/* The PNG itself: keep its native aspect, no stretching, no cropping */
.badge__img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;    /* respect the badge caps above */
  max-height: 100% !important;

  /* IMPORTANT: no object-fit; we want intrinsic aspect, not box-fit */
  object-fit: contain !important; /* safe if size ever equals the box */
  background: transparent !important;
}

/* Defensive: kill any earlier background-image styling on .badge */
.card--android .badge,
.card--ios .badge,
.card--web .badge{
  background-image: none !important;
}

/* Keep content clear of the badge area */
.card__content{
  position: relative;
  z-index: 1;
  padding-bottom: calc(clamp(72px, 18vw, 96px) + 1.2rem) !important;
}

/* Focus outline for keyboard users */
.badge:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* === FINAL badge containment & transparency (append-only) === */

/* 1) One consistent, responsive box for every badge */
:root{
  --badge-h: clamp(72px, 18vw, 96px);
  --badge-w: clamp(200px, 68%, 320px);
}

.card__content{
  /* leave room so text never sits under the badge */
  padding-bottom: calc(var(--badge-h) + 1.2rem) !important;
  position: relative;
  z-index: 1;
}

/* The badge is a small, bottom-centered LINK — fixed box */
.badge{
  position: absolute !important;
  left: 50% !important;
  bottom: .9rem !important;
  transform: translateX(-50%) !important;

  width: var(--badge-w) !important;
  height: var(--badge-h) !important;

  display: block !important;
  z-index: 2 !important;

  /* show only when active; otherwise don't intercept clicks */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;

  /* no background so PNG transparency shows */
  background: transparent !important;

  /* IMPORTANT: ensure we are NOT masking/clipping */
  border-radius: 0 !important;
  overflow: visible !important;
}
.card.is-active .badge{
  opacity: 1;
  pointer-events: auto;
}

/* 2) The PNG fills the box WITHOUT cropping; rounded transparent corners show */
.badge__img{
  position: absolute !important;
  inset: 0 !important;           /* center in the box */
  margin: auto !important;

  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* keep entire PNG visible */

  display: block !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* inherit no rounding/mask; PNG transparency provides the shape */
  border-radius: 0 !important;
}

/* 3) Kill any old background-image approach on badges (so <img> is the only art) */
.card--android .badge,
.card--ios .badge,
.card--web .badge{
  background-image: none !important;
}

/* 4) Keep accordion clicks intact: badge is the only clickable area at bottom */
.badge:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* === Active panel heading: underline with good readability === */
.card.is-active .card__title{
  color: var(--heading-active, #fff) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* keep the slight glow you had */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* === Increase contrast of the top "CLOQ.IT" in the phone header === */
.chrometop .brand{
  color: #ffffff !important;         /* light text on dark chrome */
  opacity: .95;                      /* subtle soften, still high contrast */
  letter-spacing: .02em;             /* optional: tiny polish */
  font-weight: 700;                  /* optional: crisper */
}

/* If you also want the left-column H1 lighter on any darker sections, keep it black on white, 
   but ensure when it sits over dark it flips. Only applies if your layout ever puts it on dark. */
@media (prefers-color-scheme: dark){
  .meta h1{
    color: #111 !important;          /* stays dark on white page per your current theme */
  }
}