/**
 * HostsNiX blocks — base layer.
 *
 * Self-contained on purpose: a page built from blocks must render correctly
 * WITHOUT the 164 KB Tailwind `style.css`. Every value below was measured from
 * the live React pages with Chrome DevTools at 1440px and 390px, so block
 * output is pixel-identical to the current design.
 *
 * All classes are `hsx-` prefixed so this can load alongside style.css during
 * the migration without collisions.
 *
 * NOTE: lives in public/ because vite empties assets/ on every build.
 * It is copied to assets/css/blocks-base.css by `vite build`.
 */

/* ─────────── Design tokens (copied verbatim from src/styles/globals.css) ─────────── */
:root {
  --background: 150 18% 97%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 170 52% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 160 22% 90%;
  --secondary-foreground: 0 0% 9%;
  --muted: 160 18% 92%;
  --muted-foreground: 0 0% 32%;
  --accent: 170 45% 48%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 160 18% 86%;
  --input: 160 18% 86%;
  --ring: 170 52% 42%;

  --radius: 0.75rem;

  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-subtle: linear-gradient(180deg, hsl(150 18% 98%), hsl(var(--background)));
  --shadow-mint: 0 10px 40px -10px hsl(var(--primary) / 0.18);
  --shadow-card: 0 4px 20px -5px hsl(0 0% 0% / 0.08);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Measured from the live site: body computes to Tailwind's default stack.
     Inter is used ONLY for the logo wordmark — do not apply it to body copy. */
  --hsx-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --hsx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Container widths — max-w-6xl is the site standard (9 of 11 sections) */
  --hsx-width: 72rem;        /* 1152px — max-w-6xl */
  --hsx-width-narrow: 56rem; /* 896px  — max-w-4xl */
  --hsx-width-wide: 80rem;   /* 1280px — max-w-7xl */
}

/* ─────────── Minimal base (stands in for Tailwind preflight) ─────────── */
.hsx-canvas *,
.hsx-canvas *::before,
.hsx-canvas *::after { box-sizing: border-box; }

.hsx-canvas {
  font-family: var(--hsx-font-sans);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 1.5;
  /*
   * No -webkit-font-smoothing here. The React stylesheet never sets it, so the
   * browser default (subpixel on macOS) is what the design was drawn with;
   * `antialiased` renders the same colour visibly thinner and lighter, which
   * read as "the font and text colour changed" across every block page.
   */
}

/* Scoped to block content on purpose: the header/footer islands size their own
   logo and icons, and a global `height: auto` here blew the logo up. */
:where(.hsx-main) :where(img, svg) { max-width: 100%; height: auto; display: block; }

/* Wrapped in :where() so the reset carries ZERO specificity. Written as
   `.hsx-main h3` it was (0,1,1) and beat every single-class block rule such as
   `.hsx-pf-title`, silently zeroing margins each block had set for itself. */
:where(.hsx-main) :where(h1, h2, h3, h4, p, ul, ol) {
  margin: 0;
}

/* ─────────── Section wrapper ─────────── */
.hsx-section { position: relative; }

/* Vertical rhythm presets — each maps to a real Tailwind pair in the React code */
.hsx-section--compact  { padding-block: 24px; }  /* py-6  md:py-8  */
.hsx-section--default  { padding-block: 32px; }  /* py-8  md:py-11 */
.hsx-section--medium   { padding-block: 40px; }  /* py-10 md:py-12 */
.hsx-section--relaxed  { padding-block: 48px; }  /* py-12 md:py-16 */
.hsx-section--hero     { padding-block: 64px; }  /* py-20 md:py-24 */

@media (min-width: 768px) {
  .hsx-section--compact { padding-block: 32px; }
  .hsx-section--default { padding-block: 44px; }
  .hsx-section--medium  { padding-block: 48px; }
  .hsx-section--relaxed { padding-block: 64px; }
  .hsx-section--hero    { padding-block: 96px; }
}

/* Backgrounds — mirrors the gradients used in the React sections */
.hsx-section--bg-base    { background-color: hsl(var(--background)); }
.hsx-section--bg-white   { background-color: hsl(var(--card)); }
.hsx-section--bg-muted   { background-color: hsl(var(--muted) / 0.2); }
.hsx-section--bg-subtle  { background-image: linear-gradient(180deg, hsl(var(--background)), hsl(var(--secondary) / 0.2)); }
.hsx-section--bg-subtle-up { background-image: linear-gradient(180deg, hsl(var(--secondary) / 0.2), hsl(var(--background))); }
.hsx-section--bg-brand   { background-image: linear-gradient(to bottom right, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.1), hsl(var(--secondary))); }
/* The flat tint behind the Tools and AI Studio hub card rows. Not a token:
   the React page hard-codes bg-[#eef4f3] rather than using a theme colour. */
.hsx-section--bg-mist    { background-color: #eef4f3; }

/* ─────────── Container ─────────── */
.hsx-container {
  width: 100%;
  max-width: var(--hsx-width);
  margin-inline: auto;
  padding-inline: 16px;
}
.hsx-container--narrow { max-width: var(--hsx-width-narrow); }
.hsx-container--wide   { max-width: var(--hsx-width-wide); }

@media (min-width: 768px) {
  .hsx-container { padding-inline: 24px; }
}

/* ─────────────────── Eyebrow pill (SectionTag) ─────────────────── *
 * A solid brand-teal disc sitting in a white pill. Shared by every marketing
 * hero and section eyebrow in the React source (src/components/shared/
 * SectionTag.tsx), which is why it lives here rather than in one block: the
 * tinted-pill badges each hero used to carry all read slightly differently. */

.hsx-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 9999px;
  background-color: hsl(var(--card));
  padding: 6px 20px 6px 6px;
  box-shadow: 0 4px 6px -1px hsl(var(--primary) / 0.1),
    0 2px 4px -2px hsl(var(--primary) / 0.1);
}

.hsx-tag-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.hsx-tag-icon { height: 18px; width: 18px; }

/* The disc is solid teal, so a full-colour PNG has to become a white
   silhouette — brightness-0 invert on the <img> in SectionTag. */
.hsx-tag-img {
  height: 18px;
  width: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.hsx-tag-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--primary));
}

/* ─────────────────── Frosted card (.glass-card) ─────────────────── *
 * The site's frosted-glass card, used across the marketing pages. Copied from
 * globals.css so block pages get it without loading the React stylesheet. */

.hsx-glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.25rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 32px -14px hsl(var(--primary) / 0.16),
    0 6px 18px -10px hsl(var(--accent) / 0.1);
}

/* Flat variant — the same frosted surface with no hover lift, for large panels
   and cards that already move on hover for another reason. */
.hsx-glass-flat {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 32px -14px hsl(var(--primary) / 0.16),
    0 6px 18px -10px hsl(var(--accent) / 0.1);
}

/* Three soft radial washes, used behind the VPS panels. */
.hsx-mesh {
  background:
    radial-gradient(at 0% 0%, hsl(var(--primary) / 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsl(var(--primary) / 0.05) 0px, transparent 50%),
    radial-gradient(at 50% 100%, hsl(var(--accent) / 0.08) 0px, transparent 50%);
}

/* ─────────────────── Nested icon bubble (GuideNestedIcon) ─────────────────── *
 * The frosted-glass tile a section icon sits in. Two states, as in the React
 * component: on a light surface the icon is brand teal; on a teal surface the
 * tile goes translucent white and the icon turns white. Without the tile the
 * icon inherits the surface's text colour and comes out near-black. */

.hsx-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 32px;
  width: 32px;
  border-radius: 8px;
  color: hsl(var(--primary));
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px -6px hsl(var(--primary) / 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hsx-bubble--sm { height: 40px; width: 40px; border-radius: 12px; }

.hsx-bubble--on-primary {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.hsx-bubble-icon { height: 14px; width: 14px; }
.hsx-bubble--sm .hsx-bubble-icon { height: 16px; width: 16px; }

/* ─────────── Section header (eyebrow + heading + description) ─────────── */
.hsx-section-head { margin-bottom: 32px; }
.hsx-section-head--center { text-align: center; }
.hsx-section-head--center .hsx-section-desc { margin-inline: auto; }

/*
 * Three sizes, because the live section descriptions use three: text-lg (the
 * default above), text-base with leading-relaxed, and text-base on its default
 * pair. Declared after the base rule on purpose — both selectors are a single
 * class, so order decides, and earlier the variant silently lost.
 */
/* Two classes each, so these do not depend on where they sit relative to the
   base rule. A single-class variant lost to .hsx-section-desc further down the
   file — the same cascade-order trap that has bitten this stylesheet before. */
.hsx-section-desc.hsx-section-desc--relaxed { font-size: 16px; line-height: 26px; }
.hsx-section-desc.hsx-section-desc--base    { font-size: 16px; line-height: 24px; }

/* One live description is a shade heavier than the rest. */
.hsx-section-desc.hsx-section-desc--strong  { font-weight: 500; }


.hsx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 11px/700 with a 1.5 leading, measured from the live eyebrows. */
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 10px;
}

.hsx-heading {
  font-weight: 700;
  color: hsl(var(--foreground));
  text-wrap: balance;
  /* tracking-tight — every section heading on the live site carries it
     (-0.9px at 36px). Without it the headings read wider and looser. */
  letter-spacing: -0.025em;
}

/* Heading scales — each preset matches a real variant found in the React code */
.hsx-heading--md { font-size: 24px; line-height: 32px; }  /* text-2xl sm:3xl md:4xl (14 uses) */
.hsx-heading--lg { font-size: 30px; line-height: 36px; }  /* text-3xl md:4xl  (FAQ) */
.hsx-heading--xl { font-size: 24px; line-height: 32px; }  /* text-2xl → lg:5xl (features) */
.hsx-heading--hero { font-size: 30px; line-height: 36px; } /* text-3xl sm:4xl */

@media (min-width: 640px) {
  .hsx-heading--md { font-size: 30px; line-height: 36px; }
  .hsx-heading--xl { font-size: 30px; line-height: 36px; }
  .hsx-heading--hero { font-size: 36px; line-height: 40px; }
}
@media (min-width: 768px) {
  .hsx-heading--md { font-size: 36px; line-height: 40px; }
  .hsx-heading--lg { font-size: 36px; line-height: 40px; }
  .hsx-heading--xl { font-size: 36px; line-height: 40px; }
}
@media (min-width: 1024px) {
  .hsx-heading--xl { font-size: 48px; line-height: 48px; }
}

/* Accent word inside a heading — the teal highlight used site-wide */
.hsx-accent { color: hsl(var(--primary)); }

.hsx-section-desc {
  margin-top: 12px;
  max-width: 48rem;
  /* text-lg — what four of the five live section descriptions measure.
     The fifth is text-base at weight 500; see .hsx-section-desc--base. */
  font-size: 18px;
  line-height: 28px;
  color: hsl(var(--muted-foreground));
}
/* ─────────── Buttons (measured: h44 / px32 / 18px / 500 / radius 10px) ─────────── */
.hsx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 32px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.hsx-btn--primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-mint);
}
.hsx-btn--primary:hover { background-color: hsl(var(--accent)); }

.hsx-btn--outline {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.hsx-btn--outline:hover { background-color: hsl(var(--secondary)); }

.hsx-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.hsx-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hsx-btn-row--center { justify-content: center; }

/* ─────────── Card (measured: radius 16px, 1px border at 50% alpha) ─────────── */
.hsx-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.hsx-card--pad { padding: 24px; }

.hsx-card-title { font-size: 20px; line-height: 25px; font-weight: 700; }
@media (min-width: 768px) {
  .hsx-card-title { font-size: 28px; line-height: 32px; }
}

.hsx-card-text {
  font-size: 14px;
  line-height: 20px;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) {
  .hsx-card-text { font-size: 18px; line-height: 28px; }
}

/* ─────────── Grid ─────────── */
.hsx-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .hsx-grid--2, .hsx-grid--3, .hsx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hsx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hsx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─────────── Prose (legal / guide body copy) ─────────── */
.hsx-prose { max-width: 65ch; font-size: 16px; line-height: 1.75; color: hsl(var(--foreground)); }
.hsx-prose > * + * { margin-top: 1.25em; }
.hsx-prose h2 { font-size: 30px; line-height: 36px; font-weight: 700; margin-top: 2em; }
.hsx-prose h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin-top: 1.6em; }
.hsx-prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.hsx-prose ul, .hsx-prose ol { padding-left: 1.5em; }
/* Tailwind preflight strips list-style; prose needs it back. */
.hsx-prose ul { list-style: disc; }
.hsx-prose ol { list-style: decimal; }
.hsx-prose li::marker { color: hsl(var(--muted-foreground)); }
.hsx-prose li + li { margin-top: 0.5em; }
.hsx-prose code {
  font-family: var(--hsx-font-mono);
  font-size: 0.9em;
  background: hsl(var(--muted));
  padding: 0.15em 0.4em;
  border-radius: 6px;
}

/* ─────────── Reserve fixed-header space (prevents CLS before islands mount) ─────────── */
/*
 * The header is position:fixed, so this slot reserves its space. Header.tsx
 * measures the real header and sets --site-header-height (it changes with how
 * the promo banner wraps: 124px narrow, 149px mid, 109px desktop), and a
 * ResizeObserver keeps it current — that is the exact value.
 *
 * The fallbacks below are the measured heights, so the reservation is right
 * before JavaScript runs and stays sane if the variable ever goes missing. A
 * flat 64px here is what collapsed the slot on the SSD and NVMe pages and let
 * the hero eyebrow slide under the header.
 */
.hsx-header-slot { min-height: var(--site-header-height, 124px); }
@media (min-width: 640px)  { .hsx-header-slot { min-height: var(--site-header-height, 149px); } }
@media (min-width: 1024px) { .hsx-header-slot { min-height: var(--site-header-height, 109px); } }

@media (prefers-reduced-motion: reduce) {
  .hsx-btn { transition: none; }
}