/* Horizon Ledge Software site — adapted from the Orchard site baseline.
   Palette: slate ink + sky-blue accent, per the "solid stone meets endless
   horizon" brand notes. Restyle to taste when real branding work happens. */

:root {
  --bg: #ffffff;
  --text: #2d3439;         /* slate ink */
  --muted: #64707a;        /* weathered slate */
  --accent: #8ecdf7;       /* sky blue — highlights over the hero photos */
  --accent-ink: #0d2b45;   /* deep horizon navy — readable text on the accent */
  --border: #e2e6ea;
  --maxw: 44rem;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --display: 'Sora', var(--font);
  /* Ken Burns timing: each slide is visible for --kb-hold, full cycle = 9 × --kb-hold */
  --kb-hold: 7s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { min-height: 60vh; }

/* Home page: full-height flex column so the footer sticks to the viewport
   bottom when content is short (no scrollbar), and the page grows + scrolls
   only when content is too tall (e.g. landscape phones) — no overlap. */
body.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
body.home main { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; }
/* flex-grow but never shrink below content — on a short viewport the hero
   still fills the space above the fold; once .home-sections is added below
   it, the hero settles to its natural size instead of being squeezed. */
body.home main > .hero { flex: 1 0 auto; min-width: 0; }  /* min-width lets the hero shrink to narrow viewports */
body.home main > .home-sections { flex: none; }

/* ---- Header (shared across landing + every blog post) ---- */
.site-header {
  padding: 1rem 1.5rem;
}
/* On the home page the header sits in flow at the top of the flex column,
   above the fixed Ken Burns background. */
.site-header--overlay {
  position: relative;
  z-index: 10;
  padding-top: 1.25rem;
}

/* Rounded translucent pill holding brand (home link) + nav. */
.header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.5rem 0.9rem;
  /* Dark frosted glass — white translucency washed out over bright frames. */
  background: rgba(13, 27, 38, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Off the home page (no photo behind), use a light, legible pill. */
.site-header:not(.site-header--overlay) .header-pill {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: #fff;
}
.site-brand .brand-icon {
  width: 28px; height: 28px;
  display: block;
  border-radius: 6px;
}
.site-brand .brand-name {
  font-family: var(--display);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);  /* match the hero title */
}

.site-nav a {
  text-decoration: none;
  margin-left: 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;                                /* white reads on any photo frame */
  /* Inter's thinner strokes need a stronger, layered shadow to read as
     prominently as the Sora brand name. */
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 2px 20px rgba(0,0,0,0.6);
}
.site-nav a:hover { color: var(--accent); }

/* Off-home (light pill): readable dark text instead of white. */
.site-header:not(.site-header--overlay) .site-brand { color: var(--text); }
.site-header:not(.site-header--overlay) .site-brand .brand-name { text-shadow: none; }
.site-header:not(.site-header--overlay) .site-nav a { color: var(--accent-ink); text-shadow: none; }
.site-header:not(.site-header--overlay) .site-nav a:hover { color: var(--text); filter: none; }

/* ---- Hero / landing (full-bleed) ---- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;           /* header/footer are in flow, so no clearance padding needed */
  text-align: center;
  color: #fff;
}
.hero > *:not(.kenburns) { position: relative; z-index: 2; }

.hero-icon {
  width: 96px; height: 96px;
  margin: 0 auto 1rem;
  display: block;
  border-radius: 20px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}
.hero-title {
  font-family: var(--display);
  /* The name is long — scale down on phones instead of overflowing. */
  font-size: clamp(2.1rem, 8.5vw, 3.2rem);
  margin: 0 0 0.25rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.hero-tagline { font-size: 1.2rem; margin: 0 0 2rem; text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 1px 12px rgba(0,0,0,0.45); }
.hero-copy {
  font-size: 1.25rem;
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45);
}
/* Accent-colored words need a stronger, layered shadow than the surrounding
   white text — light blue disappears against pale sky / sun-glint frames. */
.hero-copy strong {
  color: var(--accent);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.5);
}

/* ---- Product pointer card (Orchard) ---- */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* width:100% (not min(26rem,100%)) so the card's min-content size never
     forces the hero wider than a narrow viewport. */
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: #fff;
  text-align: center;
  /* Dark frosted glass (not white) so the light text/accent inside always
     contrasts, no matter how bright the photo behind it is. */
  background: rgba(13, 27, 38, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease;
}
.product-card:hover { background: rgba(13, 27, 38, 0.55); }
.product-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.product-name {
  font-family: var(--display);
  font-size: 1.6rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.product-desc { font-size: 0.95rem; opacity: 0.92; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.product-link { margin-top: 0.4rem; font-weight: 700; color: var(--accent); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ---- Home page content (About / Product / Contact) ---- */
.home-sections {
  /* .kenburns is position:fixed with z-index:0 — a positioned layer that
     paints above plain static content regardless of document order. Without
     its own stacking position + opaque background, this section would
     render (readable in the DOM/Reader View) but stay visually hidden
     under the fixed hero photo as the page scrolls past the hero. */
  position: relative;
  z-index: 2;
  background: var(--bg);
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  padding: 3rem 1.5rem 2.5rem;
  color: var(--text);
  text-align: left;
}
.home-section { padding: 2rem 0; border-top: 1px solid var(--border); }
.home-section:first-child { border-top: none; padding-top: 0; }
.home-section h1,
.home-section h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
  letter-spacing: -0.005em;
}
/* Standalone page title (About/Contact) reads a size up from a stacked h2. */
.home-section h1 { font-size: 1.8rem; }
.home-section p { margin: 0 0 1rem; font-size: 1.05rem; }
.home-section p:last-child { margin-bottom: 0; }
.home-section a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.home-section a:hover { text-decoration-color: currentColor; }
.home-section .contact-email { text-decoration: none; }
.home-section .contact-email:hover { text-decoration: underline; }

/* ---- Contact form (Web3Forms) ---- */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.75rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  font: inherit;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-form textarea { resize: vertical; }
.contact-form button.cta { align-self: flex-start; border: none; cursor: pointer; }
/* Honeypot field — invisible and unreachable by real visitors/keyboard nav. */
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Contact CTA ---- */
.signup {
  margin: 2rem auto 0;
  display: flex;
  justify-content: center;
}
.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  padding: 0.8rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
}
.cta:hover { filter: brightness(1.05); }

/* ---- Ken Burns slideshow background ---- */
.kenburns {
  position: fixed;
  inset: 0;
  z-index: 0;            /* behind header, hero content, and footer (all z-index 2–10) */
  overflow: hidden;
  /* Dark sea-slate base so the very first fade-in (and any fade overlap) comes
     up from dark — never a white flash behind the white hero text. */
  background: #16222c;
}
/* Uniform scrim above the slides: guarantees a minimum darkness behind the
   white/sky-blue hero text even on sun-glint and pale-sky frames, without
   touching the cross-fade. Paints over the slides (later sibling in the
   pseudo-element's stacking order). */
.kenburns::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 32, 0.28);
}
.kb-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
  animation-duration: calc(var(--kb-hold) * 9);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Nine slides, each owning ~11.1% of the cycle, staying on a little longer so
   its fade-out overlaps the next slide's fade-in — a true cross-fade with no
   gap and no dark dip. A slide fades IN over 0%–3.2% (~2s) and OUT over
   11.1%–14.3%; because each slide is delayed by exactly 1/9 of the cycle,
   slide N's fade-out lines up in real time with slide N+1's fade-in. Motion
   (zoom/pan) runs across the visible window, then resets while hidden.
   Five motion patterns cycle across the nine slides. */
.kb-slide:nth-child(1) { animation-name: kb-zoom-in;  animation-delay: 0s; }
.kb-slide:nth-child(2) { animation-name: kb-pan-lr;   animation-delay: var(--kb-hold); }
.kb-slide:nth-child(3) { animation-name: kb-rise;     animation-delay: calc(var(--kb-hold) * 2); }
.kb-slide:nth-child(4) { animation-name: kb-drift;    animation-delay: calc(var(--kb-hold) * 3); }
.kb-slide:nth-child(5) { animation-name: kb-pan-rl;   animation-delay: calc(var(--kb-hold) * 4); }
.kb-slide:nth-child(6) { animation-name: kb-zoom-in;  animation-delay: calc(var(--kb-hold) * 5); }
.kb-slide:nth-child(7) { animation-name: kb-rise;     animation-delay: calc(var(--kb-hold) * 6); }
.kb-slide:nth-child(8) { animation-name: kb-pan-lr;   animation-delay: calc(var(--kb-hold) * 7); }
.kb-slide:nth-child(9) { animation-name: kb-drift;    animation-delay: calc(var(--kb-hold) * 8); }

/* Straight zoom in */
@keyframes kb-zoom-in {
  0%    { opacity: 0; transform: scale(1.00); }
  3.2%  { opacity: 1; }
  11.1% { opacity: 1; }
  14.3% { opacity: 0; transform: scale(1.15); }
  90%   { opacity: 0; transform: scale(1.00); }   /* reset while hidden */
  100%  { opacity: 0; transform: scale(1.00); }
}
/* Strong horizontal pan, left → right (scale 1.18 keeps edges off-screen) */
@keyframes kb-pan-lr {
  0%    { opacity: 0; transform: scale(1.18) translateX(-6%); }
  3.2%  { opacity: 1; }
  11.1% { opacity: 1; }
  14.3% { opacity: 0; transform: scale(1.18) translateX(6%); }
  90%   { opacity: 0; transform: scale(1.18) translateX(-6%); }
  100%  { opacity: 0; transform: scale(1.18) translateX(-6%); }
}
/* Horizontal pan, right → left */
@keyframes kb-pan-rl {
  0%    { opacity: 0; transform: scale(1.18) translateX(6%); }
  3.2%  { opacity: 1; }
  11.1% { opacity: 1; }
  14.3% { opacity: 0; transform: scale(1.18) translateX(-6%); }
  90%   { opacity: 0; transform: scale(1.18) translateX(6%); }
  100%  { opacity: 0; transform: scale(1.18) translateX(6%); }
}
/* Zoom out while panning up */
@keyframes kb-rise {
  0%    { opacity: 0; transform: scale(1.20) translateY(4%); }
  3.2%  { opacity: 1; }
  11.1% { opacity: 1; }
  14.3% { opacity: 0; transform: scale(1.12) translateY(-4%); }
  90%   { opacity: 0; transform: scale(1.20) translateY(4%); }
  100%  { opacity: 0; transform: scale(1.20) translateY(4%); }
}
/* Zoom in on a diagonal drift */
@keyframes kb-drift {
  0%    { opacity: 0; transform: scale(1.08) translate(3%, 3%); }
  3.2%  { opacity: 1; }
  11.1% { opacity: 1; }
  14.3% { opacity: 0; transform: scale(1.18) translate(-3%, -3%); }
  90%   { opacity: 0; transform: scale(1.08) translate(3%, 3%); }
  100%  { opacity: 0; transform: scale(1.08) translate(3%, 3%); }
}

/* Respect users who ask for less motion: hold a single static image. */
@media (prefers-reduced-motion: reduce) {
  .kb-slide { animation: none; opacity: 0; transform: none; }
  .kb-slide:nth-child(1) { opacity: 1; }
}

/* ---- Blog index + posts ---- */
.post-index, .post {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}
.post-list { list-style: none; padding: 0; }
.post-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.post-list a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.post-list a:hover { color: var(--accent-ink); }
.post-list time { display: block; color: var(--muted); font-size: 0.85rem; }
.post-summary { color: var(--muted); margin: 0.35rem 0 0; }

.post-header h1 { font-size: 2.1rem; margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.post-header time { color: var(--muted); font-size: 0.9rem; }
.post-body { margin-top: 2rem; font-size: 1.08rem; }
.post-body h2 { margin-top: 2.25rem; }
.post-body img { max-width: 100%; height: auto; }
.post-body pre {
  background: #f3f6f8;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}
.post-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* ---- Footer ---- */
.site-footer {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}
/* On the home page the footer sits in flow at the bottom of the flex column,
   above the fixed Ken Burns background. */
.site-footer--overlay {
  position: relative;
  z-index: 10;
  padding-bottom: 1.5rem;
}
/* Rounded pill mirroring the header. */
.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.55rem 1.1rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* Over the hero photos, use the dark frosted style like the header pill. */
.site-footer--overlay .footer-pill {
  background: rgba(13, 27, 38, 0.35);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.footer-email {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.footer-email:hover { color: var(--accent-ink); }
.footer-copyright { color: var(--muted); font-size: 0.85rem; }
/* White text on the translucent over-photo footer. */
.site-footer--overlay .footer-email,
.site-footer--overlay .footer-copyright { color: #fff; }
.site-footer--overlay .footer-email:hover { color: var(--accent); }
.muted { color: var(--muted); }