/*
Theme Name:   HS Tech
Theme URI:    https://www.hstechllc.com/
Description:  Design system for HS Tech LLC. Child theme of Kadence. Phase 1 of the 2026 redesign — tokens, typography, components, and motion. No layout changes.
Author:       HS Tech LLC
Author URI:   https://www.hstechllc.com/
Template:     kadence
Version:      1.0.0
Text Domain:  hs-tech-child
*/

/* ==========================================================================
   HS TECH DESIGN SYSTEM
   --------------------------------------------------------------------------
   Everything is a token. Nothing below hard-codes a colour or a size that
   isn't declared here first. To reskin the site, change this block only.

   Accent: Signal Orange. Ground: Ink (blue-black) — deliberately the
   complement of the accent, so the orange reads as chosen rather than as a
   lighter patch of the background.
   ========================================================================== */

:root {

  /* --- Accent: Signal Orange ------------------------------------------- */
  --hs-orange-700: #B84A08;  /* buttons, links, icons. 5.2:1 on paper — AA  */
  --hs-orange-500: #E4700F;  /* eyebrows, fills, LARGE TYPE ONLY (3.2:1)    */
  --hs-orange-400: #FF7A29;  /* the accent lifted for dark grounds, 7.3:1   */
  --hs-orange-050: #FDF0E6;  /* tint: icon plates, badges, included-panels  */

  /* --- Ground: Ink ------------------------------------------------------ */
  --hs-ink-900:    #0F1319;  /* hero, footer, CTA band                      */
  --hs-ink-800:    #171B23;  /* raised surface on dark                      */
  --hs-ink-700:    #1E232C;  /* cards on dark                               */
  --hs-ink-500:    #2E3540;  /* rules and borders on dark                   */

  /* --- Paper: warm neutrals, biased toward the accent ------------------- */
  --hs-paper-000:  #FBF9F7;  /* page ground — warm, not pure white          */
  --hs-paper-100:  #F4EEE8;  /* alternating sections, card fills            */
  --hs-paper-200:  #EBE3DA;  /* pressed / hover surface                     */
  --hs-rule:       #E2D8CE;  /* 1px separators                              */

  /* --- Text ------------------------------------------------------------- */
  --hs-slate-600:  #46433F;  /* body on paper. 9.4:1 — AAA                  */
  --hs-slate-400:  #746D65;  /* meta, captions. 4.9:1 — AA at 14px+         */
  --hs-slate-300:  #A8A29B;  /* meta on ink. 7.5:1                          */

  /* --- Type ------------------------------------------------------------- */
  --hs-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hs-font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --hs-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hs-size-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
  --hs-size-h2:      clamp(2rem, 1.5rem + 1.9vw, 3rem);
  --hs-size-h3:      1.5rem;
  --hs-size-h4:      1.1875rem;
  --hs-size-lead:    1.25rem;
  --hs-size-body:    1.0625rem;   /* 17px                                   */
  --hs-size-meta:    0.875rem;
  --hs-size-eyebrow: 0.75rem;

  --hs-lead-display: 1.02;
  --hs-lead-h2:      1.08;
  --hs-lead-body:    1.65;

  --hs-track-display: -0.035em;
  --hs-track-h2:      -0.025em;
  --hs-track-h3:      -0.015em;
  --hs-track-eyebrow:  0.14em;

  /* --- Space: 4px base -------------------------------------------------- */
  --hs-1:  4px;   --hs-2:  8px;   --hs-3: 12px;  --hs-4: 16px;
  --hs-5: 24px;   --hs-6: 32px;   --hs-7: 48px;  --hs-8: 64px;
  --hs-9: 96px;   --hs-10: 128px;
  --hs-section: clamp(72px, 8vw, 128px);

  /* --- Form ------------------------------------------------------------- */
  --hs-radius-control: 2px;   /* buttons, inputs — sharp reads engineered   */
  --hs-radius-card:    6px;
  --hs-radius-image:   0;
  --hs-border:         1px solid var(--hs-rule);
  --hs-shadow: 0 1px 2px rgba(15,19,25,.06), 0 8px 24px -12px rgba(15,19,25,.18);

  /* --- Motion ----------------------------------------------------------- */
  --hs-ease:      cubic-bezier(.22,.61,.36,1);
  --hs-t-hover:   180ms;
  --hs-t-reveal:  400ms;

  /* --- Measure ---------------------------------------------------------- */
  --hs-measure:      66ch;
  --hs-measure-card: 34rem;

  /* --- Kadence bridge ---------------------------------------------------
     Kadence blocks and theme parts read these. Setting them here means every
     existing block inherits the system without being touched by hand.
     Also set the same values in Customize > General > Colors so NEW blocks
     pick them up from the palette swatches. ------------------------------ */
  --global-palette1: var(--hs-orange-700);
  --global-palette2: var(--hs-orange-500);
  --global-palette3: var(--hs-ink-900);
  --global-palette4: var(--hs-slate-600);
  --global-palette5: var(--hs-slate-400);
  --global-palette6: var(--hs-rule);
  --global-palette7: var(--hs-paper-100);
  --global-palette8: var(--hs-paper-000);
  --global-palette9: #FFFFFF;

  --global-palette-btn:          #FFFFFF;
  --global-palette-btn-bg:       var(--hs-orange-700);
  --global-palette-btn-hover:    #FFFFFF;
  --global-palette-btn-bg-hover: #9C3E06;

  --global-content-width:      1200px;
  --global-content-narrow-width: 760px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
  background: var(--hs-paper-000);
  color: var(--hs-slate-600);
  font-family: var(--hs-font-body);
  font-size: var(--hs-size-body);
  line-height: var(--hs-lead-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.kadence-advanced-heading-inner {
  font-family: var(--hs-font-display);
  color: var(--hs-ink-900);
  font-weight: 600;
  text-wrap: balance;
}

h1, .entry-title {
  font-size: var(--hs-size-display);
  line-height: var(--hs-lead-display);
  letter-spacing: var(--hs-track-display);
  font-weight: 700;
}
h2 { font-size: var(--hs-size-h2); line-height: var(--hs-lead-h2); letter-spacing: var(--hs-track-h2); }
h3 { font-size: var(--hs-size-h3); line-height: 1.2;  letter-spacing: var(--hs-track-h3); }
h4 { font-size: var(--hs-size-h4); line-height: 1.3;  letter-spacing: -0.01em; }

/* Prose caps at 66 characters. The single biggest readability win on the
   Services page, which currently runs past 110. */
.entry-content p,
.entry-content ul,
.entry-content ol {
  max-width: var(--hs-measure);
}
.entry-content .alignwide p,
.entry-content .alignfull p,
.kb-row-layout-wrap p {
  max-width: none;   /* block layouts manage their own measure */
}
.kb-row-layout-wrap .kt-inside-inner-col > p,
.kb-row-layout-wrap .kt-inside-inner-col > ul {
  max-width: var(--hs-measure-card);
}

a { color: var(--hs-orange-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #9C3E06; }

/* Visible focus on everything reachable by keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--hs-orange-700);
  outline-offset: 3px;
  border-radius: var(--hs-radius-control);
}

/* ==========================================================================
   EYEBROW
   The red "Tech That Helps Your Organization Grow" line becomes a proper
   label. Add class .hs-eyebrow in the block's Advanced > Additional CSS Class.
   ========================================================================== */

.hs-eyebrow,
.hs-eyebrow .kadence-advanced-heading-inner {
  font-family: var(--hs-font-mono) !important;
  font-size: var(--hs-size-eyebrow) !important;
  font-weight: 500 !important;
  letter-spacing: var(--hs-track-eyebrow) !important;
  text-transform: uppercase;
  color: var(--hs-orange-700) !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   BUTTONS
   Primary: filled. Secondary: real bordered control — replaces the current
   unstyled "Learn More" text link, which gives no affordance at all.
   ========================================================================== */

.wp-block-button__link,
.kb-button,
.kt-button,
button,
input[type="submit"] {
  font-family: var(--hs-font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  border-radius: var(--hs-radius-control);
  padding: 14px 24px;
  line-height: 1.2;
  transition: background-color var(--hs-t-hover) var(--hs-ease),
              border-color var(--hs-t-hover) var(--hs-ease),
              color var(--hs-t-hover) var(--hs-ease),
              transform var(--hs-t-hover) var(--hs-ease);
}

.wp-block-button__link:hover,
.kb-button:hover,
.kt-button:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
}

/* Secondary — add .hs-btn-secondary to the button block. */
.hs-btn-secondary .kb-button,
.hs-btn-secondary .wp-block-button__link,
.kb-button.hs-btn-secondary,
.wp-block-button.hs-btn-secondary .wp-block-button__link {
  background: transparent;
  color: var(--hs-ink-900);
  border: 1px solid var(--hs-ink-900);
}
.hs-btn-secondary .kb-button:hover,
.hs-btn-secondary .wp-block-button__link:hover,
.kb-button.hs-btn-secondary:hover,
.wp-block-button.hs-btn-secondary .wp-block-button__link:hover {
  background: var(--hs-ink-900);
  color: var(--hs-paper-000);
}

/* Secondary sitting on the dark hero. */
.hs-on-ink .hs-btn-secondary .kb-button,
.hs-on-ink .hs-btn-secondary .wp-block-button__link {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.45);
}
.hs-on-ink .hs-btn-secondary .kb-button:hover,
.hs-on-ink .hs-btn-secondary .wp-block-button__link:hover {
  background: #FFFFFF;
  color: var(--hs-ink-900);
  border-color: #FFFFFF;
}

/* ==========================================================================
   DARK SECTIONS
   Add .hs-on-ink to any Row Layout that sits on Ink. Text tokens flip as a
   set, so nothing ends up one theme's text on the other theme's ground.
   ========================================================================== */

.hs-on-ink {
  background-color: var(--hs-ink-900);
  color: var(--hs-slate-300);
}
.hs-on-ink h1, .hs-on-ink h2, .hs-on-ink h3, .hs-on-ink h4,
.hs-on-ink .kadence-advanced-heading-inner { color: #FFFFFF; }
.hs-on-ink p, .hs-on-ink li { color: var(--hs-slate-300); }
.hs-on-ink a { color: var(--hs-orange-400); }
.hs-on-ink .hs-eyebrow,
.hs-on-ink .hs-eyebrow .kadence-advanced-heading-inner { color: var(--hs-orange-400) !important; }
.hs-on-ink hr, .hs-on-ink .kb-divider { border-color: var(--hs-ink-500); }

/* ==========================================================================
   CARDS
   One object, repeated. Equal edges, equal padding, icon always top-left,
   link always bottom-left. Fixes the six services reading as six loose
   fragments floating in whitespace.
   ========================================================================== */

.hs-card,
.hs-card .kt-inside-inner-col {
  background: var(--hs-paper-000);
  border: var(--hs-border);
  border-radius: var(--hs-radius-card);
  padding: var(--hs-5);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--hs-3);
  transition: border-color var(--hs-t-hover) var(--hs-ease),
              box-shadow var(--hs-t-hover) var(--hs-ease),
              transform var(--hs-t-hover) var(--hs-ease);
}
.hs-card:hover,
.hs-card .kt-inside-inner-col:hover {
  border-color: var(--hs-orange-700);
  box-shadow: var(--hs-shadow);
  transform: translateY(-2px);
}
.hs-card h3, .hs-card h4 { margin: 0; }
.hs-card p { margin: 0; }
.hs-card .hs-card-link { margin-top: auto; padding-top: var(--hs-3); font-weight: 500; }

.hs-on-ink .hs-card,
.hs-on-ink .hs-card .kt-inside-inner-col {
  background: var(--hs-ink-700);
  border-color: var(--hs-ink-500);
}

/* --- Icon plate ------------------------------------------------------------
   One family, one stroke weight, one plate. Replaces the mixed set (a literal
   Google "G" beside abstract glyphs) and the emoji on the Services page. */

.hs-icon,
.hs-icon .kb-svg-icon-wrap,
.kb-info-box-icon-inner-wrap {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-orange-050);
  color: var(--hs-orange-700);
  border-radius: var(--hs-radius-control);
  flex: none;
}
.hs-icon svg, .kb-info-box-icon-inner-wrap svg {
  width: 24px; height: 24px;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}
.hs-on-ink .hs-icon,
.hs-on-ink .kb-info-box-icon-inner-wrap {
  background: rgba(255,122,41,.14);
  color: var(--hs-orange-400);
}

/* ==========================================================================
   SERVICES GRID FIX
   The current row sets inner columns to top-align, so the left and right
   stacks start at different heights — "AI Consulting" lands ~90px above
   "Website Development" and reads as a build error. Stretch fixes it.
   Also set Row Layout > Advanced > Inner Column Height: Match Height.
   ========================================================================== */

.kb-row-layout-wrap .kt-row-column-wrap {
  align-items: stretch;
}
.kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column {
  display: flex;
  flex-direction: column;
}
.kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  flex: 1 1 auto;
}

/* Info boxes line up on a shared baseline instead of drifting. */
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap {
  display: flex;
  gap: var(--hs-4);
  align-items: flex-start;
  height: 100%;
}

/* ==========================================================================
   "WHAT'S INCLUDED" CHECKLIST
   Services-page lists become a panel on the accent tint rather than default
   bullets in a wall of text. Add .hs-included to the list block.
   ========================================================================== */

.hs-included {
  background: var(--hs-orange-050);
  border-radius: var(--hs-radius-card);
  padding: var(--hs-5);
  list-style: none;
  margin: 0;
  max-width: var(--hs-measure-card);
}
.hs-included li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 var(--hs-3);
  font-size: var(--hs-size-meta);
  line-height: 1.55;
  color: var(--hs-slate-600);
}
.hs-included li:last-child { margin-bottom: 0; }
.hs-included li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--hs-orange-700);
  border-bottom: 2px solid var(--hs-orange-700);
  transform: rotate(-45deg);
}

/* "Best for:" pulled out as a labelled line. */
.hs-bestfor {
  border-top: var(--hs-border);
  padding-top: var(--hs-3);
  margin-top: var(--hs-4);
  font-size: var(--hs-size-meta);
  color: var(--hs-slate-400);
  max-width: var(--hs-measure-card);
}
.hs-bestfor strong {
  font-family: var(--hs-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-orange-700);
  display: block;
  margin-bottom: var(--hs-1);
}

/* ==========================================================================
   HEADER
   Sticky, with the shadow appearing only once scrolled. The logo comes down
   from ~150px to 44px so navigation survives the scroll.
   ========================================================================== */

#masthead, .site-header {
  transition: box-shadow var(--hs-t-hover) var(--hs-ease),
              background-color var(--hs-t-hover) var(--hs-ease);
}
body.hs-scrolled #masthead,
body.hs-scrolled .site-header {
  box-shadow: var(--hs-shadow);
}
.site-header .site-branding img,
.site-header .custom-logo {
  max-height: 44px;
  width: auto;
  transition: max-height var(--hs-t-hover) var(--hs-ease);
}
@media (max-width: 767px) {
  .site-header .site-branding img,
  .site-header .custom-logo { max-height: 38px; }
}

.main-navigation .primary-menu-container > ul > li > a {
  font-family: var(--hs-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

/* ==========================================================================
   FOOTER
   Consistent left alignment across all columns — currently column one is
   left-aligned and columns two and three are centred.
   ========================================================================== */

#colophon, .site-footer { background: var(--hs-ink-900); }
#colophon .widget-area,
.site-footer .site-footer-row .widget-area { text-align: left; }
#colophon h2, #colophon h3, #colophon .widget-title { color: #FFFFFF; }
#colophon, #colophon p, #colophon li { color: var(--hs-slate-300); }
#colophon a { color: var(--hs-slate-300); text-decoration: none; }
#colophon a:hover { color: var(--hs-orange-400); }
.site-footer .footer-html { color: var(--hs-slate-400); font-size: var(--hs-size-meta); }

/* The wordmark in the footer takes the display face. */
#colophon .hs-wordmark {
  font-family: var(--hs-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

/* ==========================================================================
   SECTION RHYTHM
   ========================================================================== */

.hs-section > .kt-row-column-wrap {
  padding-top: var(--hs-section);
  padding-bottom: var(--hs-section);
}
.hs-section-tight > .kt-row-column-wrap {
  padding-top: var(--hs-7);
  padding-bottom: var(--hs-7);
}
.hs-alt { background-color: var(--hs-paper-100); }

img, .wp-block-image img { border-radius: var(--hs-radius-image); }

/* Tables, code and wide media scroll inside themselves rather than pushing
   the page sideways. */
.entry-content table,
.entry-content pre { display: block; max-width: 100%; overflow-x: auto; }

/* ==========================================================================
   MOTION
   Everything is visible at rest and animates FROM a visible state. Nothing is
   parked at opacity:0 waiting on an observer — a page that renders blank
   without JS is worse than a page that doesn't animate.
   ========================================================================== */

.hs-reveal {
  opacity: 1;
  transform: none;
}
body.hs-js .hs-reveal:not(.hs-in) {
  opacity: 0.001;
  transform: translateY(12px);
}
body.hs-js .hs-reveal {
  transition: opacity var(--hs-t-reveal) var(--hs-ease),
              transform var(--hs-t-reveal) var(--hs-ease);
}
body.hs-js .hs-reveal.hs-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body.hs-js .hs-reveal:not(.hs-in) { opacity: 1; transform: none; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.hs-mono   { font-family: var(--hs-font-mono); }
.hs-lead   { font-size: var(--hs-size-lead); line-height: 1.55; max-width: var(--hs-measure); }
.hs-meta   { font-size: var(--hs-size-meta); color: var(--hs-slate-400); }
.hs-nums   { font-variant-numeric: tabular-nums; }
.hs-measure{ max-width: var(--hs-measure); }

/* Stat tile for the proof bar — used only where the figure is the point. */
.hs-stat .hs-stat-n {
  font-family: var(--hs-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--hs-ink-900);
  font-variant-numeric: tabular-nums;
  display: block;
}
.hs-stat .hs-stat-l {
  font-family: var(--hs-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-slate-400);
  margin-top: var(--hs-2);
  display: block;
}
.hs-on-ink .hs-stat .hs-stat-n { color: #FFFFFF; }
.hs-on-ink .hs-stat .hs-stat-l { color: var(--hs-slate-300); }

/* Screen-reader-only, for the skip link and icon labels. */
.hs-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}