/* ============================================================
   Scott Owen — Divi Overrides
   Applies the design system over the Divi parent theme's output.
   Targets Divi's own class names (.et_pb_*) so existing pages
   built with the Divi Builder inherit the new look without
   being rebuilt.
   ============================================================ */

/* ---------- Body ---------- */
body.custom-background,
body {
  background-color: var(--surface-body);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.6;
}

/* ---------- Headings ---------- */
h1, h2, h3, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-semi) !important;
  color: var(--brand-cyan) !important;
  line-height: 1.2;
}
h4 {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-semi) !important;
  color: var(--ink-primary) !important;
  line-height: 1.2;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* Hero (Divi fullwidth header) */
.et_pb_fullwidth_header .header-content h1 {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-black) !important;
  font-size: var(--fs-hero-h1) !important;
  color: var(--brand-cyan) !important;
  line-height: 1.1;
}
.et_pb_fullwidth_header .et_pb_header_content_wrapper,
.et_pb_fullwidth_header .header-content {
  font-family: var(--font-body);
  font-size: var(--fs-hero-sub);
}

/* ---------- Links ---------- */
a {
  color: var(--brand-cyan);
  transition: color var(--dur-card) var(--ease-card);
}
a:hover { color: var(--brand-cyan-hover); }

/* ---------- Primary button ---------- */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
  background-color: var(--brand-cyan-btn) !important;
  color: var(--ink-primary) !important;
  border-width: 0 !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background-color var(--dur-card) var(--ease-card),
              transform var(--dur-card) var(--ease-card) !important;
}
.et_pb_button:hover,
.et_pb_button_module_wrapper .et_pb_button:hover {
  background-color: var(--brand-cyan-hover) !important;
  color: var(--ink-primary) !important;
  transform: translateY(-1px);
}
.et_pb_button:after,
.et_pb_button:before { display: none !important; }

/* ---------- Primary navigation (fullwidth menu) ---------- */
.et_pb_fullwidth_menu {
  background-color: var(--surface-nav);
  padding: 10px;
}
.et_pb_fullwidth_menu ul li a {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-black) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-nav-mobile);
  color: var(--ink-primary) !important;
}
.et_pb_fullwidth_menu .nav li ul {
  background-color: var(--surface-sub) !important;
  border-color: var(--brand-cyan) !important;
}
.et_pb_fullwidth_menu img { mix-blend-mode: screen; }

/* ---------- Main header nav (default Divi #main-header, used when
   fullwidth menu isn't placed) ---------- */
#main-header,
#et-top-navigation {
  background-color: var(--surface-nav) !important;
}
#top-menu li a,
#et-secondary-nav li a {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-primary) !important;
}
#top-menu li ul.sub-menu {
  background-color: var(--overlay-nav-sub);
  border-top-color: var(--brand-cyan);
}

/* ---------- Secondary top bar ---------- */
.et_secondary_nav_enabled #top-header {
  background-color: var(--surface-top) !important;
}
#top-header .container,
#top-header { font-family: var(--font-heading); }
#et-secondary-nav li ul {
  background-color: var(--overlay-top-sub);
}

/* ---------- Mobile menu ---------- */
.et_mobile_menu,
.et_mobile_menu_container {
  background-color: var(--surface-nav) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.et_mobile_menu a,
.et_mobile_menu li a {
  color: var(--ink-primary) !important;
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
}

/* ---------- Footer ---------- */
#main-footer,
#footer-bottom {
  background-color: var(--surface-nav) !important;
  color: var(--ink-primary);
  font-family: var(--font-body);
}
#main-footer .footer-widget h4,
#main-footer .footer-widget li,
#main-footer .footer-widget p,
#main-footer a {
  color: var(--ink-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
}

/* ---------- Social icons (footer plates) ---------- */
.et_pb_social_media_follow a.icon {
  height: 100px;
  width: 100px;
  border-radius: var(--radius);
}
.et_pb_social_media_follow a.icon:before {
  font-size: 50px;
  line-height: 100px;
}
.et_pb_social_media_follow .network a.icon {
  background-color: var(--surface-deep) !important;
}

/* ---------- Blog grid card ---------- */
.et_pb_blog_grid article {
  transition: transform var(--dur-card) var(--ease-card),
              box-shadow var(--dur-card) var(--ease-card),
              border-color var(--dur-card) var(--ease-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--overlay-black-10);
}
.et_pb_blog_grid article:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(0, 0, 0, 0.3);
}
.et_pb_blog_grid .post-meta a { color: var(--brand-blue); }

/* ---------- Blog list variant (.pa-blog-list) ---------- */
@media (min-width: 767px) {
  .pa-blog-list .entry-featured-image-url { width: 30%; float: left; }
  .pa-blog-list .entry-title,
  .pa-blog-list .post-meta,
  .pa-blog-list .post-content {
    width: 70%;
    float: left;
    padding-left: 30px;
  }
}

/* ---------- Blog post — reading surface (floor-lamp glow) ---------- */
.postarea { background-color: var(--surface-post); }
.single .et_pb_post,
.postarea .et_pb_post {
  box-shadow: var(--shadow-post);
  border-radius: var(--radius);
  padding: 40px 30px;
}

/* ---------- Counters (brand cyan, not Divi stock blue) ---------- */
.et_pb_counter_amount,
.et_pb_counters .et_pb_counter_amount {
  background-color: var(--brand-cyan) !important;
}
.et_pb_counter_container { border-radius: var(--radius); overflow: hidden; }

/* ---------- Parallax image frame helper ---------- */
.parallax-frame {
  overflow: hidden;
  display: inline-block;
  position: relative;
  width: 100%;
  border-radius: var(--radius);
}
.parallax-frame img {
  transition: transform var(--dur-card) var(--ease-image);
  will-change: transform;
}
.parallax-frame:hover img { transform: scale(1.1); }

/* ---------- Square logo helper ---------- */
.square-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 20px auto;
}

/* ---------- Radii consolidation (6px everywhere except pills) ---------- */
.et_pb_image_wrap,
.et_pb_blurb_container,
.et_pb_blog_grid article,
.et_pb_contact_form input[type="text"],
.et_pb_contact_form input[type="email"],
.et_pb_contact_form textarea,
.et_pb_newsletter_field input {
  border-radius: var(--radius) !important;
}

/* ---------- Forms ---------- */
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_newsletter_field input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  border-radius: var(--radius);
}

/* ---------- Responsive typography (mirrors live-site overrides) ---------- */
@media (max-width: 768px) {
  .et_pb_text_inner h1 { font-size: 32px !important; line-height: 1.2 !important; }
  .et_pb_text_inner p  { font-size: 24px !important; line-height: 1.5 !important; }
  .et_pb_fullwidth_header .header-content h1 { font-size: 40px !important; }
}

/* ---------- Resume chatbot (scott-resume-bot) ----------
   The plugin reads --wp--preset--color--{primary,secondary,contrast}
   which are defined in tokens.css. These selectors tighten the widget
   radii down to the site 6px default (was 28px) and replace the
   bespoke chatbot shadow with the card shadow. */
.srb-panel,
.srb-widget .srb-panel {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}
.srb-panel .srb-input,
.srb-widget input[type="text"],
.srb-widget input[type="search"],
.srb-widget textarea {
  border-radius: var(--radius) !important;
}
.srb-panel .srb-message,
.srb-widget .srb-message {
  border-radius: var(--radius) !important;
}
/* Keep the chip + launcher pill — they're the one pill-radius exception. */
.srb-widget .srb-chip,
.srb-widget .srb-launcher {
  border-radius: var(--radius-pill) !important;
}