/* ==========================================================================
   HIVE — Kadence child theme
   Design tokens, the service colour pathway, and section styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Self-hosted. Drop the woff2 files into assets/fonts/ (see README).
   font-display:swap so text paints immediately — Core Web Vitals.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sen';
  src: url('../fonts/sen-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sen';
  src: url('../fonts/sen-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Service colours. One per product — see the pathway rules below. */
  --hive-websites: #D8469B;
  --hive-boost:    #F5A20A;
  --hive-ipacks:   #91CD00;
  --hive-sky:      #31C4F3;

  /* Ink to sit ON each accent. Picked for contrast, not for taste:
     the accents are light enough that white text on them fails WCAG AA. */
  --hive-on-websites: #2A0A1E;
  --hive-on-boost:    #241703;
  --hive-on-ipacks:   #172200;

  /* Surfaces, darkest to lightest */
  --hive-base:        #050505;
  --hive-surface-alt: #0A0B0D;
  --hive-surface:     #0E1014;
  --hive-line:        #1C2026;
  --hive-line-soft:   #16181C;

  /* Type */
  --hive-white:  #FFFFFF;
  --hive-muted:  #9AA0A8;
  --hive-body:   #8F959D;
  --hive-quiet:  #6E747C;
  --hive-faint:  #4A5059;

  --hive-ink: #221E20;

  --hive-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hive-sans:    'Sen', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --hive-radius-pill: 60px;
  --hive-section-y: clamp(64px, 8vw, 96px);
  --hive-gutter: clamp(20px, 5vw, 40px);

  /* Default accent. Overridden per pathway. */
  --hive-accent: var(--hive-websites);
  --hive-on-accent: var(--hive-on-websites);
}

/* --------------------------------------------------------------------------
   3. The service colour pathway

   Every page belongs to one product and takes that product's accent. Set by the
   body class from functions.php. Sections never hardcode a colour — they use
   var(--hive-accent), so a page moved from one product to another recolours
   itself and cannot end up half amber and half pink.

   The umbrella home page is the one exception: it carries all of them, which is
   what the multicolour chevron logo is for.
   -------------------------------------------------------------------------- */

.hive-pathway-websites { --hive-accent: var(--hive-websites); --hive-on-accent: var(--hive-on-websites); }
.hive-pathway-boost    { --hive-accent: var(--hive-boost);    --hive-on-accent: var(--hive-on-boost); }
.hive-pathway-ipacks   { --hive-accent: var(--hive-ipacks);   --hive-on-accent: var(--hive-on-ipacks); }
.hive-pathway-umbrella { --hive-accent: var(--hive-sky);      --hive-on-accent: var(--hive-base); }

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

body {
  background: var(--hive-base);
  color: var(--hive-white);
  font-family: var(--hive-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.hive-display { font-family: var(--hive-display); }

/* Kadence sets its own container width; align it with the design. */
.content-container,
.site-container,
.entry-content > .alignwide { max-width: 1280px; }

/* --------------------------------------------------------------------------
   5. Sections

   Every section pattern is a <section class="hive-section"> with a modifier for
   its background. Vertical rhythm is the same everywhere so pages compose
   without anyone having to think about spacing.
   -------------------------------------------------------------------------- */

.hive-section {
  padding-block: var(--hive-section-y);
}
.hive-section__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--hive-gutter);
}

.hive-section--base    { background: var(--hive-base); }
.hive-section--alt     { background: var(--hive-surface-alt); border-top: 1px solid var(--hive-line-soft); }
.hive-section--accent  { background: var(--hive-accent); color: var(--hive-on-accent); }

.hive-section--accent h1,
.hive-section--accent h2,
.hive-section--accent h3,
.hive-section--accent p { color: var(--hive-on-accent); }

/* One accent band per page. More than one and the colour stops meaning
   anything — it is there to carry the single strongest argument. */

.hive-section__lede {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--hive-muted);
  max-width: 42rem;
  margin: 0 0 3rem;
}
.hive-section--accent .hive-section__lede { color: var(--hive-on-accent); max-width: 36rem; }

/* --------------------------------------------------------------------------
   6. Cards and grids
   -------------------------------------------------------------------------- */

.hive-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hive-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }

@media (max-width: 900px) { .hive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hive-grid, .hive-grid--2 { grid-template-columns: 1fr; } }

.hive-card {
  background: var(--hive-surface);
  border: 1px solid var(--hive-line);
  padding: 30px;
}
.hive-card__title {
  font-family: var(--hive-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hive-white);
  margin: 0 0 0.75rem;
}
.hive-card__body {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--hive-body);
  margin: 0;
}

/* Service card — the variant with an icon and a "find out more" link. */
.hive-card--service {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 28px;
}
.hive-card--service .hive-card__icon { margin-bottom: 20px; color: var(--hive-accent); }
.hive-card--service .hive-card__icon svg { display: block; }
.hive-card--service .hive-card__body { flex: 1 1 auto; margin-bottom: 1.25rem; }

.hive-more {
  font-family: var(--hive-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hive-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hive-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Portfolio — the browser-chrome frame
   -------------------------------------------------------------------------- */

.hive-shot { display: block; text-decoration: none; color: inherit; }
.hive-shot__frame {
  border: 1px solid var(--hive-line);
  background: var(--hive-surface);
  overflow: hidden;
}
.hive-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #14171C;
  border-bottom: 1px solid var(--hive-line);
}
.hive-shot__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2C323A;
  display: inline-block;
}
.hive-shot__url {
  margin-left: 10px;
  font-family: var(--hive-display);
  font-size: 0.75rem;
  color: var(--hive-quiet);
}
.hive-shot__frame img { display: block; width: 100%; height: auto; }
.hive-shot__name {
  font-family: var(--hive-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hive-white);
  margin: 18px 0 7px;
}
.hive-shot__note { font-size: 0.9375rem; line-height: 1.68; color: var(--hive-body); margin: 0; }

/* --------------------------------------------------------------------------
   8. The combined CTA — email field and button in one pill.
   The signature element. Appears in the hero and the closing band.
   -------------------------------------------------------------------------- */

.hive-cta {
  background: #FFFFFF;
  border-radius: var(--hive-radius-pill);
  padding: 7px 7px 7px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 480px;
}
.hive-cta input[type="email"] {
  flex: 1 1 180px;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--hive-sans);
  font-size: 1rem;
  color: #16181D;
}
.hive-cta input[type="email"]:focus-visible { outline: 2px solid var(--hive-accent); outline-offset: 4px; border-radius: 4px; }
.hive-cta button {
  background: var(--hive-base);
  color: #FFFFFF;
  border: none;
  border-radius: var(--hive-radius-pill);
  font-family: var(--hive-display);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 28px;
  cursor: pointer;
  white-space: nowrap;
}
.hive-cta button:hover { background: #1A1D22; }

.hive-cta__meta { font-size: 0.875rem; line-height: 1.7; color: var(--hive-quiet); margin: 1rem 0 0; }

/* On an accent band the white pill disappears, so invert. */
.hive-section--accent .hive-cta { background: var(--hive-base); }
.hive-section--accent .hive-cta input[type="email"] { color: var(--hive-white); }
.hive-section--accent .hive-cta input::placeholder { color: var(--hive-quiet); }
.hive-section--accent .hive-cta button { background: var(--hive-accent); color: var(--hive-on-accent); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hive-hero { padding-block: clamp(48px, 7vw, 80px) 0; }
.hive-hero__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--hive-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
}
.hive-hero__copy { flex: 1 1 470px; min-width: 0; }
.hive-hero__media { flex: 1 1 540px; min-width: 0; }
.hive-hero__eyebrow {
  font-family: var(--hive-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hive-accent);
  margin: 0 0 1rem;
}
.hive-hero h1 { margin: 0 0 1.375rem; }
.hive-hero__lede { font-size: 1.125rem; line-height: 1.7; color: var(--hive-muted); margin: 0 0 2rem; }

/* --------------------------------------------------------------------------
   10. Included list — the ticked list inside the accent band
   -------------------------------------------------------------------------- */

.hive-included {
  flex: 1 1 340px;
  min-width: 0;
  background: var(--hive-on-accent);
  padding: 32px;
}
.hive-included__label {
  font-family: var(--hive-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hive-accent);
  margin-bottom: 18px;
}
.hive-included ul { list-style: none; margin: 0; padding: 0; }
.hive-included li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--hive-line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #C9CDD3;
}
.hive-included li:last-child { border-bottom: none; color: var(--hive-white); font-weight: 600; }
.hive-included li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  background: var(--hive-accent);
  /* the HIVE chevron */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   11. Two-column split used by the accent band and the editorial sections
   -------------------------------------------------------------------------- */

.hive-split {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
}
.hive-split__major { flex: 999 1 500px; min-width: 0; }
.hive-split__minor { flex: 1 1 340px; min-width: 0; }

/* --------------------------------------------------------------------------
   12. Accessibility
   -------------------------------------------------------------------------- */

.hive-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--hive-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}