/*
Theme Name: Tech Doctor (GeneratePress child)
Theme URI: https://techdr.net/
Description: Restyles the techdr.net front page (page 67). Everything here is scoped to that one page,
  so the rest of the site renders exactly as it does today. Colours are the ones the page already uses,
  taken from ops/site/landing_page.py, not a new palette.
Author: Tech Doctor
Template: generatepress
Version: 0.1.0
*/

/* ---------------------------------------------------------------------------------------------------
   WHY THE SELECTORS LOOK LIKE THIS

   Elementor writes its own stylesheet for this page (post-67.css) with rules shaped like
       .elementor-67 .elementor-element.elementor-element-ab178a5 .elementor-heading-title { ... }
   which is specificity (0,4,0). Anything weaker loses no matter when it loads. Every rule below that
   has to beat Elementor starts with `body.page-id-67`, an element plus a class, so it reads (0,4,1) or
   better and wins on specificity rather than on load order alone. functions.php also enqueues this
   file late, so order is on our side too.

   The seven-character ids are NOT random. ops/site/landing_page.py derives each one as a sha256 of the
   element's path, so rebuilding the page produces the same ids and these selectors keep working. If
   that script's structure changes, recompute them; the path is written next to every id below.
--------------------------------------------------------------------------------------------------- */

/* Headings use one extra webfont. It is two files, loaded with display=swap, and it is the one thing
   here that adds a request to the page. To drop it, delete this @import and the font-family lines that
   name "Bricolage Grotesque"; the headings fall back to the Roboto GeneratePress already loads. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&display=swap');

body.page-id-67 {
  --td-navy: #12263a;
  --td-blue: #1e73be;
  --td-blue-lift: #2a83d2;
  --td-ink: #222222;
  --td-muted: #575760;
  --td-line: #e3e7ec;
  --td-blue-soft: #e8f1fa;
  --td-on-navy: #d6e2ee;
  /* One duration for every transition on the page. This single consistency is most of the style. */
  --td-t: .3s ease;
  --td-shadow: 0 1px 2px rgba(18, 38, 58, .06), 0 10px 30px rgba(18, 38, 58, .08);
  --td-shadow-lift: 0 2px 6px rgba(18, 38, 58, .08), 0 18px 44px rgba(18, 38, 58, .14);
}

/* Every heading on the page, named one id at a time. Elementor sets font-size, weight and line-height
   per element at (0,4,0), so a general `.elementor-heading-title` rule would lose to it silently.
   Verified against the live page on 2026-09-20: post-67.css really does write rules in that shape. */
body.page-id-67 .elementor-element.elementor-element-ab178a5 .elementor-heading-title, /* hero/h1   */
body.page-id-67 .elementor-element.elementor-element-dec6e6c .elementor-heading-title, /* why/h2    */
body.page-id-67 .elementor-element.elementor-element-a8c1810 .elementor-heading-title, /* served/h2 */
body.page-id-67 .elementor-element.elementor-element-440784b .elementor-heading-title  /* cta/h2    */ {
  font-family: "Bricolage Grotesque", "Roboto", system-ui, sans-serif;
  letter-spacing: -.02em;
  line-height: 1.12;
}

/* --- hero (path "hero") ------------------------------------------------------------------------- */

body.page-id-67 .elementor-element.elementor-element-ae6c79d {
  position: relative;
  overflow: hidden;
}

/* Depth without 3D: two soft shapes behind the content, clipped by the section. Decorative only, so
   they are drawn on pseudo-elements and never announced. */
body.page-id-67 .elementor-element.elementor-element-ae6c79d::before,
body.page-id-67 .elementor-element.elementor-element-ae6c79d::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

body.page-id-67 .elementor-element.elementor-element-ae6c79d::before {
  width: 520px;
  height: 520px;
  background: #1e73be;
  opacity: .35;
  top: -180px;
  right: -140px;
}

body.page-id-67 .elementor-element.elementor-element-ae6c79d::after {
  width: 420px;
  height: 420px;
  background: #2f5d8a;
  opacity: .4;
  bottom: -200px;
  left: -120px;
}

body.page-id-67 .elementor-element.elementor-element-ae6c79d > .elementor-container {
  position: relative;
  z-index: 1;
}

/* hero/h1 */
body.page-id-67 .elementor-element.elementor-element-ab178a5 .elementor-heading-title {
  font-weight: 800;
  max-width: 15ch;
  margin-inline: auto;
}

/* hero/sub */
body.page-id-67 .elementor-element.elementor-element-5da2f81 {
  max-width: 660px;
  margin-inline: auto;
}

/* --- buttons (hero/apply, hero/talk, cta/apply) -------------------------------------------------- */

/* Elementor sets border-radius and padding on each button individually, so these have to be named
   individually too. A shared `body.page-id-67 .elementor-button` rule reads (0,2,1) and loses to
   Elementor's (0,4,0) every time, which is how the first draft of this file quietly did nothing. */
body.page-id-67 .elementor-element.elementor-element-a721517 .elementor-button, /* hero/apply */
body.page-id-67 .elementor-element.elementor-element-e5eab31 .elementor-button, /* hero/talk  */
body.page-id-67 .elementor-element.elementor-element-307348c .elementor-button  /* cta/apply  */ {
  border-radius: 999px;
  font-weight: 700;
  padding: 15px 30px;
  border: 2px solid transparent;
  box-shadow: var(--td-shadow);
  transition: transform var(--td-t), box-shadow var(--td-t), background-color var(--td-t),
              color var(--td-t), border-color var(--td-t);
}

body.page-id-67 .elementor-element.elementor-element-a721517 .elementor-button:hover,
body.page-id-67 .elementor-element.elementor-element-a721517 .elementor-button:focus-visible,
body.page-id-67 .elementor-element.elementor-element-e5eab31 .elementor-button:hover,
body.page-id-67 .elementor-element.elementor-element-e5eab31 .elementor-button:focus-visible,
body.page-id-67 .elementor-element.elementor-element-307348c .elementor-button:hover,
body.page-id-67 .elementor-element.elementor-element-307348c .elementor-button:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--td-shadow-lift);
}

/* hero/apply: the solid blue one lightens as it lifts. */
body.page-id-67 .elementor-element.elementor-element-a721517 .elementor-button:hover {
  background-color: var(--td-blue-lift);
}

/* hero/talk: white on navy reads better as an outline until it is pointed at. */
body.page-id-67 .elementor-element.elementor-element-e5eab31 .elementor-button {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .45);
  box-shadow: none;
}

body.page-id-67 .elementor-element.elementor-element-e5eab31 .elementor-button:hover,
body.page-id-67 .elementor-element.elementor-element-e5eab31 .elementor-button:focus-visible {
  background-color: #ffffff;
  color: var(--td-navy);
  border-color: #ffffff;
}

/* --- the three reasons (path "reasons") ---------------------------------------------------------- */

/* Equal-height cards. The columns are a flex row in both of Elementor's layout modes, so stretching
   the widget inside each one is enough and does not depend on the page being saved in the editor. */
body.page-id-67 .elementor-element.elementor-element-dbf8b7f .elementor-column > .elementor-element-populated {
  display: flex;
}

body.page-id-67 .elementor-element.elementor-element-dbf8b7f .elementor-widget-wrap {
  align-content: stretch;
}

body.page-id-67 .elementor-element.elementor-element-4d0b6d4,
body.page-id-67 .elementor-element.elementor-element-c8b2a68,
body.page-id-67 .elementor-element.elementor-element-0519253 {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--td-line);
  border-radius: 28px;
  padding: 34px 30px;
  box-shadow: var(--td-shadow);
  transition: transform var(--td-t), box-shadow var(--td-t), border-color var(--td-t);
}

body.page-id-67 .elementor-element.elementor-element-4d0b6d4:hover,
body.page-id-67 .elementor-element.elementor-element-c8b2a68:hover,
body.page-id-67 .elementor-element.elementor-element-0519253:hover {
  transform: translateY(-4px);
  box-shadow: var(--td-shadow-lift);
  border-color: #cddcea;
}

/* The icon sits in a rounded tile rather than floating on the card. Elementor sets the icon's colour
   and size per element (primary_color, icon_size), so each card is named here for the same reason the
   buttons are. */
body.page-id-67 .elementor-element.elementor-element-4d0b6d4 .elementor-icon-box-icon,
body.page-id-67 .elementor-element.elementor-element-c8b2a68 .elementor-icon-box-icon,
body.page-id-67 .elementor-element.elementor-element-0519253 .elementor-icon-box-icon {
  margin-bottom: 20px;
}

body.page-id-67 .elementor-element.elementor-element-4d0b6d4 .elementor-icon, /* reasons/r1 */
body.page-id-67 .elementor-element.elementor-element-c8b2a68 .elementor-icon, /* reasons/r2 */
body.page-id-67 .elementor-element.elementor-element-0519253 .elementor-icon  /* reasons/r3 */ {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background-color: var(--td-blue-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--td-t), background-color var(--td-t);
}

body.page-id-67 .elementor-element.elementor-element-4d0b6d4:hover .elementor-icon,
body.page-id-67 .elementor-element.elementor-element-c8b2a68:hover .elementor-icon,
body.page-id-67 .elementor-element.elementor-element-0519253:hover .elementor-icon {
  transform: scale(1.03);
  background-color: #d7e8f8;
}

body.page-id-67 .elementor-element.elementor-element-4d0b6d4 .elementor-icon-box-title,
body.page-id-67 .elementor-element.elementor-element-c8b2a68 .elementor-icon-box-title,
body.page-id-67 .elementor-element.elementor-element-0519253 .elementor-icon-box-title {
  letter-spacing: -.01em;
}

/* Left-aligned body text reads more easily than centred text at this length. The icon stays centred
   above it, which is how the widget is built. */
body.page-id-67 .elementor-element.elementor-element-4d0b6d4 .elementor-icon-box-description,
body.page-id-67 .elementor-element.elementor-element-c8b2a68 .elementor-icon-box-description,
body.page-id-67 .elementor-element.elementor-element-0519253 .elementor-icon-box-description {
  text-align: left;
}

/* --- who we serve (served/list) ------------------------------------------------------------------ */

/* The paragraph is the real content and stays readable on its own. When the script runs it wraps each
   industry in a .td-chip and the rules below take over; until then this is an ordinary line of text. */
body.page-id-67 .elementor-element.elementor-element-cf20ab9 .td-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
}

body.page-id-67 .td-chip {
  background: #ffffff;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 500;
  color: var(--td-ink);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(18, 38, 58, .05);
  transition: transform var(--td-t), box-shadow var(--td-t), color var(--td-t), border-color var(--td-t);
}

body.page-id-67 .td-chip:hover {
  transform: translateY(-4px);
  box-shadow: var(--td-shadow);
  color: var(--td-blue);
  border-color: #bcd4ea;
}

/* The moving strip only exists once the script has cloned the chips, so it can never slide into an
   empty space. .td-marquee is added by the script, never by the markup. */
body.page-id-67 .td-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

body.page-id-67 .td-marquee .td-chips {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: td-slide 38s linear infinite;
}

body.page-id-67 .td-marquee:hover .td-chips {
  animation-play-state: paused;
}

@keyframes td-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- the government line (gov/text) -------------------------------------------------------------- */

body.page-id-67 .elementor-element.elementor-element-a425bf8 .elementor-widget-container {
  background: #ffffff;
  border: 1px solid var(--td-line);
  border-radius: 28px;
  padding: 28px 32px;
  box-shadow: var(--td-shadow);
  transition: transform var(--td-t), box-shadow var(--td-t);
}

body.page-id-67 .elementor-element.elementor-element-a425bf8 .elementor-widget-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--td-shadow-lift);
}

body.page-id-67 .elementor-element.elementor-element-a425bf8 a {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

body.page-id-67 .elementor-element.elementor-element-a425bf8 a:hover {
  text-decoration: underline;
}

/* --- the closing band (path "cta") --------------------------------------------------------------- */

body.page-id-67 .elementor-element.elementor-element-061ab7e {
  position: relative;
  overflow: hidden;
}

body.page-id-67 .elementor-element.elementor-element-c2ebd30 {
  max-width: 560px;
  margin-inline: auto;
}

/* --- reveal on scroll ----------------------------------------------------------------------------
   Nothing here can hide content on its own. The hidden state lives behind html.td-motion, a class the
   script adds to itself and only when motion is welcome. If the script fails, never loads, or the
   visitor asked for less motion, every element below stays exactly where it is: visible. */

html.td-motion body.page-id-67 [data-td-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}

html.td-motion body.page-id-67 [data-td-reveal].td-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-67 .td-marquee .td-chips { animation: none; }
  body.page-id-67 *,
  body.page-id-67 *::before,
  body.page-id-67 *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* --- small screens -------------------------------------------------------------------------------
   The page already stacks on a phone. These only soften what the card treatment adds. */

@media (max-width: 767px) {
  body.page-id-67 .elementor-element.elementor-element-4d0b6d4,
  body.page-id-67 .elementor-element.elementor-element-c8b2a68,
  body.page-id-67 .elementor-element.elementor-element-0519253 {
    padding: 26px 22px;
    border-radius: 22px;
  }

  body.page-id-67 .elementor-element.elementor-element-a425bf8 .elementor-widget-container {
    padding: 22px 20px;
    border-radius: 22px;
  }

  body.page-id-67 .elementor-element.elementor-element-ae6c79d::before,
  body.page-id-67 .elementor-element.elementor-element-ae6c79d::after {
    width: 260px;
    height: 260px;
    filter: blur(48px);
  }
}