/*
Theme Name: Botomater Child
Template: astra
Author: Botomater
Description: Custom homepage design child theme for botomater.com, built from approved static mockups.
Version: 2.1
*/

/* ==========================================================================
   Merged from botomater-hero-services-mockup.html and
   botomater-work-contact-mockup.html. Every color here still matches its
   source file exactly.

   Typeface exception (2026-08-18): the display face (Instrument Serif) and
   the body face (Archivo) were both replaced with Inter, headings at weight
   500 with -0.02em tracking. JetBrains Mono is unchanged and still carries
   the small labels, eyebrows and mono data tags. Colors were not touched.

   Two structural notes, both purely technical (not design changes):

   1) Both source files used generic selectors (section, .eyebrow,
      .btn-primary, .logo) with DIFFERENT values per file, since each was a
      standalone mockup page. Scoped to their containing section below so
      neither file's rules silently override the other's.

   2) Every rule is scoped under .botomater-home (the wrapper div in
      front-page.php) rather than left as bare selectors. This page loads
      inside a full WordPress/Elementor/plugin-heavy environment — Elementor
      still enqueues its full asset stack for this page (frontend.min.css,
      widget CSS, the site's global "Kit" CSS, ElementsKit, etc.) because the
      underlying page object has Elementor data attached, even though none of
      it is rendered. Several of those stylesheets use bare `body` and
      generic class selectors (.logo, .eyebrow, .sub are common naming
      choices) that were winning cascade fights against this file's original
      unscoped rules, which is why the logo/eyebrow/paragraph text was
      rendering in the wrong (plugin-default) gray instead of the mockup's
      colors. Scoping under .botomater-home raises specificity so none of
      that plugin CSS can match. It also means the `* { }` reset below no
      longer touches anything outside this page's own markup — including
      the WordPress admin toolbar, which the reset had been breaking when it
      applied globally via a bare `*` selector.
   ========================================================================== */

.botomater-home,
.botomater-home * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.botomater-home {
  background: #FFFFFF;
  color: #0E1525;
  font-family: 'Inter', sans-serif;
}

/* section padding was a bare `section{padding:...}` rule in each mockup
   (48px 64px in the hero/services file, 64px in the work/contact file) —
   scoped per-section here since the two values conflict. */
.botomater-home .hero { padding: 48px 64px; }
.botomater-home .services-section { padding: 64px 64px 96px; }
.botomater-home .work-section { padding: 64px; }
.botomater-home .contact-section { padding: 64px; }

/* NAV */
.botomater-home nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 32px;
}
.botomater-home .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px; height: 22px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.botomater-home .nav-toggle-bar { display: block; width: 100%; height: 2px; background: #0E1525; }
/* .logo font-size/letter-spacing differed between the nav (15px) and
   footer (14px) instances — scoped per-container. */
.botomater-home .logo { font-family: 'JetBrains Mono', monospace; color: #0E1525; }
.botomater-home nav .logo { font-size: 15px; letter-spacing: 0.05em; }
.botomater-home footer .logo { font-size: 14px; }
.botomater-home .logo span { color: #FF5A3C; }
.botomater-home .navlinks { display: flex; gap: 40px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.05em; color: #5A6B87; align-items: center; }
.botomater-home .navlinks a { color: inherit; text-decoration: none; }
.botomater-home .navlinks .dropdown { position: relative; cursor: default; }
/* Invisible hover bridge: fills the gap between the trigger and the
   dropdown-menu's top:24px offset so moving the mouse down into the menu
   doesn't cross a dead zone that isn't part of .dropdown's hover area.
   Matches the dropdown-menu's own left/width so it covers the full path,
   not just the (much narrower) trigger text. */
.botomater-home .navlinks .dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  width: 200px;
  height: 24px;
}
.botomater-home .navlinks .dropdown:hover .dropdown-menu { display: flex; }
.botomater-home .dropdown-menu {
  display: none;
  position: absolute;
  top: 24px; left: -16px;
  flex-direction: column;
  background: #F4F7FF;
  border: 1px solid #E4E9F2;
  padding: 8px;
  width: 200px;
  gap: 2px;
  z-index: 100;
}
.botomater-home .dropdown-menu a { padding: 8px 12px; color: #0E1525; }
.botomater-home .dropdown-menu a:hover { background: #E4E9F2; color: #FF5A3C; }

/* HERO */
.botomater-home .hero { min-height: 82vh; display: flex; flex-direction: column; }
.botomater-home .main-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; flex: 1; }

/* .eyebrow margin-bottom differed: 24px in the hero, 16px in
   work-head/contact-left, 12px in services-head (already its own override
   in the source file). Base set to 16px (work/contact), hero scoped up. */
.botomater-home .eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #FF5A3C; margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.botomater-home .hero .eyebrow { margin-bottom: 24px; }
.botomater-home .eyebrow::before { content: ''; width: 6px; height: 6px; background: #FF5A3C; border-radius: 50%; display: inline-block; }
.botomater-home h1 { font-family: 'Inter', sans-serif; font-size: 64px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; max-width: 600px; color: #0E1525; }
.botomater-home h1 em { font-style: italic; color: #FF5A3C; }
.botomater-home .sub { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.7; color: #5A6B87; max-width: 460px; margin-top: 28px; }
.botomater-home .sub strong { color: #0E1525; font-weight: 500; }
.botomater-home .cta-row { display: flex; align-items: center; gap: 28px; margin-top: 44px; }

/* .btn-primary padding differed: 14px 28px in the hero CTA, 16px 32px
   (plus display:inline-block) in the contact CTA — scoped per-container. */
.botomater-home .btn-primary { background: #FF5A3C; color: #FFFFFF; font-weight: 600; font-size: 14px; border-radius: 2px; text-decoration: none; }
.botomater-home .hero .btn-primary { padding: 14px 28px; }
.botomater-home .contact-left .btn-primary { display: inline-block; padding: 16px 32px; }

.botomater-home .btn-secondary { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #0E1525; text-decoration: none; border-bottom: 1px solid #C7D2E6; padding-bottom: 2px; }
.botomater-home .diagram-wrap { position: relative; height: 440px; }
.botomater-home .data-tag { position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #5A6B87; background: #F4F7FF; border: 1px solid #E4E9F2; padding: 6px 10px; border-radius: 2px; white-space: nowrap; }
.botomater-home .data-tag strong { color: #FF5A3C; font-weight: 500; }

/* SERVICES */
.botomater-home .services-section { border-top: 1px solid #E4E9F2; }
.botomater-home .services-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.botomater-home .services-head .eyebrow { margin-bottom: 12px; }
.botomater-home .services-head h2 { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 500; letter-spacing: -0.02em; max-width: 480px; color: #0E1525; }
.botomater-home .services-head p { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #5A6B87; max-width: 300px; line-height: 1.6; }

.botomater-home .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #E4E9F2; border: 1px solid #E4E9F2; }
.botomater-home .service-card { background: #FFFFFF; padding: 32px 28px; transition: background 0.15s; display: block; color: inherit; text-decoration: none; }
.botomater-home .service-card:hover { background: #F4F7FF; }
.botomater-home .service-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #FF5A3C; margin-bottom: 20px; display: block; }
.botomater-home .service-card h3 { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; color: #0E1525; }
.botomater-home .service-card p { font-family: 'Inter', sans-serif; font-size: 13px; color: #5A6B87; line-height: 1.6; }

/* HOW WE WORK */
.botomater-home .work-section { border-top: 1px solid #E4E9F2; }
/* h1 is included here because /how-we-work/ tags this same heading as its
   page-level h1 while the homepage keeps it as an h2 — the explicit
   line-height reset undoes the global `.botomater-home h1` hero styling
   (64px) so both tags render identically. Tracking is restated at the
   sitewide heading value rather than reset. */
.botomater-home .work-head h1,
.botomater-home .work-head h2 { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 500; line-height: normal; letter-spacing: -0.02em; max-width: 520px; margin-bottom: 48px; color: #0E1525; }

.botomater-home .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.botomater-home .step { position: relative; padding-top: 24px; }
.botomater-home .step-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5A6B87; }
.botomater-home .step-line { height: 1px; background: #E4E9F2; margin: 16px 0 20px; position: relative; }
.botomater-home .step-line::after { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; background: #FF5A3C; border-radius: 50%; }
/* h2 on /how-we-work/ (where the steps sit directly under the page h1) and
   h3 on the homepage (where they sit under the section's h2) — one rule so
   both render the same. */
.botomater-home .step h2,
.botomater-home .step h3 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; color: #0E1525; }
.botomater-home .step p { font-size: 13px; color: #5A6B87; line-height: 1.6; }

/* CONTACT */
.botomater-home .contact-section { border-top: 1px solid #E4E9F2; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
/* Same dual-tag treatment as .work-head: the contact section is an h2 on
   the homepage and the h1 on the standalone /contact/ page. */
.botomater-home .contact-left h1,
.botomater-home .contact-left h2 { font-family: 'Inter', sans-serif; font-size: 44px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; max-width: 420px; margin-bottom: 24px; color: #0E1525; }
.botomater-home .contact-left p { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #5A6B87; line-height: 1.7; max-width: 380px; margin-bottom: 32px; }
.botomater-home .btn-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8A99B3; margin-top: 12px; }

.botomater-home .form-wrap { background: #F4F7FF; border: 1px solid #E4E9F2; padding: 32px; }
.botomater-home .form-wrap label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #5A6B87; margin-bottom: 8px; }
.botomater-home .form-wrap input, .botomater-home .form-wrap textarea {
  width: 100%; background: #FFFFFF; border: 1px solid #E4E9F2; color: #0E1525;
  font-family: 'Inter', sans-serif; font-size: 14px; padding: 12px 14px; margin-bottom: 20px;
}
.botomater-home .form-wrap textarea { resize: none; height: 90px; }
.botomater-home .form-wrap input:focus, .botomater-home .form-wrap textarea:focus { outline: none; border-color: #FF5A3C; }
.botomater-home .form-submit {
  width: 100%; background: transparent; border: 1px solid #FF5A3C; color: #FF5A3C;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; padding: 14px; cursor: pointer;
}
.botomater-home .form-submit:hover { background: #FF5A3C; color: #FFFFFF; }
.botomater-home .form-label-top { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8A99B3; margin-bottom: 20px; }
.botomater-home .form-message {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #0E1525;
  background: #FFFFFF; border: 1px solid #E4E9F2; border-left: 2px solid #FF5A3C;
  padding: 10px 14px; margin-bottom: 20px;
}

/* FOOTER */
.botomater-home footer { border-top: 1px solid #E4E9F2; display: flex; justify-content: space-between; align-items: center; padding: 32px 64px; }
.botomater-home footer .foot-links { display: flex; gap: 32px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5A6B87; }
.botomater-home footer .foot-links a { color: inherit; text-decoration: none; }
.botomater-home footer .foot-email { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5A6B87; }

/* ==========================================================================
   SERVICE PAGES
   Reuses existing homepage tokens/classes wherever the described layout
   matches an existing pattern (.eyebrow for the "0X / 06" label, .sub for
   the mono value-prop line, .form-wrap for the boxed included-list,
   .btn-primary for the CTA button) rather than inventing parallel styles.
   ========================================================================== */

.botomater-home .service-top { min-height: 0; padding-bottom: 64px; }
.botomater-home .back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5A6B87;
  text-decoration: none; margin-top: 24px;
}
.botomater-home .back-link:hover { color: #FF5A3C; }

.botomater-home .service-hero { margin-top: 40px; }
.botomater-home .service-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.botomater-home .service-hero-copy { max-width: 560px; }
.botomater-home .service-hero .eyebrow { margin-bottom: 20px; }
.botomater-home .service-hero h1 { font-size: 56px; margin-bottom: 20px; }
.botomater-home .service-hero-sub { margin-top: 0; max-width: 460px; }

/* Smaller, lighter companion to the homepage's hero diagram — same
   technique (line/circle nodes + floating mono data-tags), reduced scale,
   thinner/lower-opacity lines, and fewer tags so it doesn't compete with
   the homepage's version for visual weight. */
.botomater-home .service-diagram-wrap { position: relative; height: 260px; }
.botomater-home .data-tag.service-data-tag { font-size: 10px; padding: 5px 8px; }

@media (max-width: 900px) {
  .botomater-home .service-hero-grid { grid-template-columns: 1fr; }
  .botomater-home .service-diagram-wrap { height: 200px; margin-top: 32px; }
}

.botomater-home .service-body {
  border-top: 1px solid #E4E9F2; padding: 64px; display: grid;
  grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start;
}
.botomater-home .service-info { display: flex; flex-direction: column; gap: 40px; }
.botomater-home .info-block h2 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; color: #0E1525; }
.botomater-home .info-block p { font-family: 'Inter', sans-serif; font-size: 14px; color: #5A6B87; line-height: 1.7; }

.botomater-home .included-box h2 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 20px; color: #0E1525; }
.botomater-home .included-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.botomater-home .included-list li {
  font-family: 'Inter', sans-serif; font-size: 14px; color: #0E1525;
  line-height: 1.5; padding-left: 24px; position: relative;
}
.botomater-home .included-list li::before {
  content: '→'; color: #FF5A3C; position: absolute; left: 0; top: 0;
}

/* RELATED SERVICES (service pages) — reuses .services-grid/.service-card
   from the homepage grid, with a lighter section heading since it's a
   secondary navigation block rather than the page's main content. */
.botomater-home .related-services { border-top: 1px solid #E4E9F2; padding: 64px; }
.botomater-home .related-head { margin-bottom: 40px; }
.botomater-home .related-head h2 { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: #0E1525; }

.botomater-home .cta-strip {
  border-top: 1px solid #E4E9F2; padding: 96px 64px; text-align: center;
}
.botomater-home .cta-strip h2 {
  font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 500; letter-spacing: -0.02em;
  max-width: 560px; margin: 0 auto 32px; color: #0E1525;
}
.botomater-home .cta-strip .btn-primary { display: inline-block; padding: 16px 32px; }

@media (max-width: 900px) {
  .botomater-home .service-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RESPONSIVE — one breakpoint (900px) matching the service-page grid
   breakpoints already in place above, plus a smaller 480px breakpoint for
   phone-specific tweaks (hiding the decorative diagrams, tightening type).
   Mobile nav is a plain content-push panel (no JS-driven overlay/animation
   needed): tapping the hamburger toggles a .is-open class on .navlinks via
   assets/js/nav-toggle.js, which the CSS below turns into a stacked list.
   ========================================================================== */

@media (max-width: 900px) {
  .botomater-home nav { flex-wrap: wrap; }
  .botomater-home .nav-toggle { display: inline-flex; }
  .botomater-home .navlinks {
    display: none; width: 100%; flex-direction: column; align-items: flex-start;
    gap: 20px; margin-top: 24px;
  }
  .botomater-home .navlinks.is-open { display: flex; }
  /* On mobile there's no hover, so the dropdown is shown inline (static,
     not absolutely positioned) whenever the mobile menu itself is open. */
  .botomater-home .navlinks .dropdown { width: 100%; }
  .botomater-home .navlinks.is-open .dropdown-menu {
    display: flex; position: static; background: none; border: none;
    padding: 0; width: auto; margin-top: 12px; z-index: auto;
  }
  .botomater-home .navlinks .dropdown::before { display: none; }

  .botomater-home .hero,
  .botomater-home .service-top { padding: 32px 24px; }
  .botomater-home .services-section,
  .botomater-home .work-section,
  .botomater-home .contact-section,
  .botomater-home .service-body,
  .botomater-home .related-services,
  .botomater-home .cta-strip { padding: 48px 24px; }
  .botomater-home footer { padding: 24px; flex-direction: column; gap: 16px; text-align: center; }

  .botomater-home h1 { font-size: 40px; }
  .botomater-home .service-hero h1 { font-size: 34px; }
  .botomater-home .services-head h2,
  .botomater-home .work-head h1,
  .botomater-home .work-head h2 { font-size: 26px; }
  .botomater-home .contact-left h1,
  .botomater-home .contact-left h2 { font-size: 30px; }
  .botomater-home .related-head h2 { font-size: 24px; }
  .botomater-home .cta-strip h2 { font-size: 26px; }

  .botomater-home .main-grid { grid-template-columns: 1fr; }
  .botomater-home .diagram-wrap { height: 260px; margin-top: 32px; }
  .botomater-home .services-grid { grid-template-columns: 1fr; }
  .botomater-home .services-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .botomater-home .steps { grid-template-columns: 1fr; gap: 32px; }
  .botomater-home .contact-section { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
  /* Hide the decorative diagrams rather than shrink them further — at this
     width there isn't room for the floating data-tags without them
     overlapping the SVG or the hero copy. */
  .botomater-home .diagram-wrap,
  .botomater-home .service-diagram-wrap { display: none; }

  .botomater-home h1 { font-size: 32px; }
  .botomater-home .service-hero h1 { font-size: 28px; }
}

/* ==========================================================================
   Bright refresh (2026-09-10): energetic light theme touches.
   The palette above was remapped from the original dark bronze scheme to a
   bright white canvas + navy ink + electric-blue accent. This block adds the
   slick/energetic finish: a subtle hero colour wash, gradient CTA buttons,
   and a gradient accent word. Scoped under .botomater-home like everything.
   ========================================================================== */
.botomater-home {
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(255,90,60,0.10), transparent 60%),
    radial-gradient(820px 420px at -6% 4%, rgba(255,46,126,0.08), transparent 55%),
    #FFFFFF;
}
.botomater-home .btn-primary {
  background: linear-gradient(135deg, #FF5A3C, #FF2E7E);
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(255,90,60,0.26);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.botomater-home .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,90,60,0.34);
}
.botomater-home h1 em {
  background: linear-gradient(100deg, #FF5A3C, #FF2E7E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FF5A3C;
}
.botomater-home .form-submit { border-radius: 8px; }