/*
Theme Name:   Attesa Child
Theme URI:    https://hemsofttech.com/
Description:  Child theme for Attesa. Holds Hemsoft Technologies brand design tokens and custom CSS so pages rebuilt in native WordPress (Gutenberg) blocks match the existing Elementor design. Built to allow phasing Elementor out.
Author:       Hemsoft Technologies
Author URI:   https://hemsofttech.com/
Template:     attesa
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  attesa-child
*/

/* =========================================================================
   1. BRAND DESIGN TOKENS  (change here, updates everywhere below)
   ========================================================================= */
:root {
  /* Colors */
  --hs-primary:        #7628BF;   /* brand purple — buttons, headings */
  --hs-primary-hover:  #5d1f99;   /* darker purple for hover states   */
  --hs-secondary:      #54595F;   /* dark grey                        */
  --hs-accent:         #61CE70;   /* accent green                     */
  --hs-text:           #404040;   /* body text                        */
  --hs-text-muted:     #7A7A7A;   /* muted / secondary text           */
  --hs-white:          #ffffff;
  --hs-light-bg:       #ffffff;   /* sections stay white              */

  /* Typography — body Inter, heading Sora (Customizer has no Sora). */
  --hs-font-body:      "Inter", "Roboto", system-ui, sans-serif;
  --hs-font-heading:   "Sora", "Quicksand", system-ui, sans-serif;
  --hs-body-size:      16px;
  --hs-body-lh:        1.7;       /* ~32px at 16px, matches live site */

  /* Brand gradient (buttons) — purple top -> pink bottom, from live site */
  --hs-gradient:       linear-gradient(180deg, #7628BF 0%, #F2295B 100%);
  --hs-gradient-hover: linear-gradient(180deg, #5d1f99 0%, #d11a4c 100%);
  --hs-gradient-135:   linear-gradient(135deg, #7628BF 0%, #F2295B 100%); /* diagonal, for cards */

  /* Shape */
  --hs-radius:         3px;       /* button/edge radius on the live site */
  --hs-radius-pill:    50px;
  --hs-shadow:         0 8px 24px rgba(0,0,0,.08);

  /* Layout */
  --hs-container:      1140px;   /* content max-width, applied only above 1200px viewport */
  --hs-section-pad:    36px;      /* vertical padding for sections    */
}

/* =========================================================================
   2. BASE TYPOGRAPHY
   SCOPING RULE: every rule is scoped to the content area (.hs-scope /
   .entry-content / .page-content). Never add unscoped a/h1..h6/body colour
   rules — they leak into the Attesa header menu and repaint it white.
   ========================================================================= */
.hs-scope,
.entry-content,
.site-content .wp-block-post-content,
.page-content {
  font-family: var(--hs-font-body);
  font-size: var(--hs-body-size);
  line-height: var(--hs-body-lh);
  color: var(--hs-text);
}

:is(.hs-scope, .entry-content, .page-content) :is(h1, h2, h3, h4, h5, h6),
.wp-block-heading {
  font-family: var(--hs-font-heading);
  color: var(--hs-primary);
  line-height: 1.2;
}

:is(.hs-scope, .entry-content, .page-content) h1,
.wp-block-heading.is-style-h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
:is(.hs-scope, .entry-content, .page-content) h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; }
:is(.hs-scope, .entry-content, .page-content) h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 700; }
:is(.hs-scope, .entry-content, .page-content) h4 { font-size: 20px; font-weight: 700; }

/* Content links are purple — never restyle button links (they self-style in §3). */
:is(.hs-scope, .entry-content, .page-content) a:not(.wp-element-button):not(.hs-btn):not(.hs-feature__link) { color: var(--hs-primary); }
:is(.hs-scope, .entry-content, .page-content) a:not(.wp-element-button):not(.hs-btn):not(.hs-feature__link):hover { color: var(--hs-primary-hover); }

/* Paragraph rhythm — scoped so it never touches header/footer <p> wrappers. */
:is(.hs-scope, .entry-content, .page-content) p { margin-bottom: 1em; }

/* Keyword highlight — use <strong class="hs-key"> sparingly for scannability */
.hs-key { color: var(--hs-primary); font-weight: 700; }
/* Bold only — keeps the body text colour (no purple) */
.hs-strong { font-weight: 700; color: inherit; }
/* Softer highlighter variant — <mark class="hs-mark"> */
.hs-mark {
  background: linear-gradient(transparent 60%, rgba(118,40,191,.16) 60%);
  color: inherit; padding: 0 2px; border-radius: 2px;
}
/* Lead line — page tagline/subheading directly under the theme title. */
.hs-lead {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--hs-text);
  max-width: 800px;
  margin: 0 auto 22px;
}
/* Hero subtitle sits over the banner — more presence than a normal lead. */
.hs-hero .hs-lead {
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.5;
  max-width: 860px;
}
/* Button groups: centered wrapping row. SELF-SUFFICIENT — core block CSS isn't
   loaded, so without this .wp-block-buttons stays display:block and stacks. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 0 8px;
}
.wp-block-buttons > .wp-block-button { margin: 0; }
/* Honour WordPress' explicit justification classes when they are present. */
.wp-block-buttons.is-content-justification-left  { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }

/* Typewriter (dynamic hero word) */
.hs-typed { color: var(--hs-primary); font-weight: 700; }
.hs-typed__cursor { display: inline-block; color: var(--hs-primary); font-weight: 400; animation: hs-blink 1s step-end infinite; }
@keyframes hs-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hs-typed__cursor { animation: none; } }

/* =========================================================================
   3. BUTTONS  (native block buttons -> brand solid-purple style)
   ========================================================================= */
.wp-block-button__link,
.wp-element-button,
a.hs-btn,
button.hs-btn {
  display: inline-block;
  background: var(--hs-primary);   /* solid brand purple (= logo colour) */
  color: #ffffff !important; /* beat theme/Elementor `a` link colors so button text stays white */
  font-family: var(--hs-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.4;
  padding: 13px 30px;
  border: 0;
  border-radius: var(--hs-radius);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(118, 40, 191, .28);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
a.hs-btn:hover,
button.hs-btn:hover {
  background: var(--hs-primary-hover);   /* deepen on hover */
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(118, 40, 191, .40);
  transform: translateY(-2px);
}

/* Outline variant — add class "is-style-outline" or "hs-btn-outline" */
.wp-block-button.is-style-outline .wp-block-button__link,
.hs-btn-outline {
  background: transparent;
  color: var(--hs-primary) !important; /* override the base button's white !important */
  border: 2px solid var(--hs-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.hs-btn-outline:hover {
  background: var(--hs-primary);
  color: var(--hs-white) !important;
}

/* =========================================================================
   4. LAYOUT HELPERS
   ========================================================================= */
.hs-container { max-width: var(--hs-container); margin-inline: auto; padding-inline: 20px; }

/* Core block alignment fallbacks — has-text-align-* without core block CSS. */
:is(.hs-scope, .entry-content, .page-content) .has-text-align-center { text-align: center; }
:is(.hs-scope, .entry-content, .page-content) .has-text-align-left   { text-align: left; }
:is(.hs-scope, .entry-content, .page-content) .has-text-align-right  { text-align: right; }

/* Drop the theme's top gap on the main wrapper, but ONLY on featured-image
   banner pages (flag headerFeatImage). Bannerless pages keep the offset so
   content isn't hidden behind the fixed header. !important beats inline JS. */
body.headerFeatImage .site-content { margin-top: 0 !important; }

/* Own the content wrapper padding here. Attesa ships #content{padding:0 0 3em}
   which leaves a big gap before the footer — zero it so content sits flush. */
#content.site-content { padding: 0; }

/* Drop Attesa's border on the post/page article wrapper (.hentry). */
.hentry { border: 0; }

/* GLOBAL CONTENT WIDTH — centre every top-level block, gutter it. Cap at
   --hs-container above 1200px; below that content fills the width. Full-bleed
   banners opt out via .alignfull. Single place to change the width policy. */
:is(.hs-scope, .entry-content, .site-content .wp-block-post-content, .page-content)
  > :not(.alignfull) {
  margin-inline: auto;
}

/* Sections: centred, with side gutters so text never touches the screen edge. */
.hs-section   {
  margin-inline: auto;
  padding-block: var(--hs-section-pad);
  padding-inline: 20px;
  background: var(--hs-white);
}

/* Above 1200px: apply the 1140px cap. At/below 1200px content fills the width. */
@media (min-width: 1201px) {
  :is(.hs-scope, .entry-content, .site-content .wp-block-post-content, .page-content)
    > :not(.alignfull),
  .hs-section {
    max-width: var(--hs-container);
  }
}

/* Only the first section keeps top spacing; following sections drop it so
   consecutive sections don't double up (they carry bottom spacing only). */
.hs-section + .hs-section { padding-top: 0; }
/* A section after the full-bleed alternating band is fresh, not a continuation
   — the band has no bottom padding, so give the next section a generous top gap. */
.hs-altband + .hs-section { padding-top: clamp(44px, 5vw, 64px); }
/* Last section before the footer: extra bottom breathing room. */
.hs-section--end { padding-bottom: clamp(56px, 7vw, 88px); }
.hs-section--light { background: var(--hs-light-bg); }
.hs-section--primary { background: var(--hs-primary); color: var(--hs-white); }
.hs-section--primary :is(h1,h2,h3,h4,h5,h6) { color: var(--hs-white); }
/* A full-bleed (alignfull) section drops the 1140px cap; higher specificity wins. */
.hs-section.alignfull { max-width: none; }

/* Section headings get a little breathing room below */
.hs-section > .wp-block-heading { margin-bottom: 34px; }

/* Column layout — defined here so it doesn't depend on core block CSS being
   loaded; without it .wp-block-columns has no flex and image + text stack. */
.hs-section .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: flex-start; /* top-align columns so headings line up across the row */
  margin-block: 0;
}
.hs-section .wp-block-columns > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
.hs-section .wp-block-columns + .wp-block-columns { margin-top: 24px; }
/* Looser line spacing for body copy inside columns (e.g. About Us intro text). */
.hs-section .wp-block-column p { line-height: 2; }
/* Stack the columns on phones/tablets. */
@media (max-width: 781px) {
  .hs-section .wp-block-columns { flex-direction: column; align-items: stretch; }
  .hs-section .wp-block-columns > .wp-block-column { flex-basis: 100%; }
}

/* First section after the hero: pull up slightly under the wave. */
.hs-hero + .hs-section,
.hs-hero + * .hs-section:first-child { padding-top: 34px; }

/* =========================================================================
   5. SERVICE FEATURE ITEMS  (icon+heading+text blocks — wrap in .hs-feature)
   Bordered card with a gradient accent bar that sweeps in on hover.
   ========================================================================= */
.hs-feature {
  position: relative;
  height: 100%;                        /* equal-height cards in a row */
  text-align: center;
  background: #ffffff;
  border: 1px solid #ece7f4;
  border-radius: 12px;
  padding: 38px 26px 30px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* Top accent bar (hidden until hover) */
.hs-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--hs-gradient-135);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
/* Squircle icon badge */
.hs-feature .hs-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: #f4eefc;                 /* soft purple tint at rest */
  color: var(--hs-primary);           /* icon color (currentColor)*/
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.hs-feature .hs-feature__icon svg { width: 42px; height: 42px; }
.hs-feature h3 {
  margin: 0 0 12px;
  font-size: 18.72px;
  font-weight: 700;
  color: var(--hs-primary);
}
.hs-feature p { color: var(--hs-text); margin: 0; }

/* Hover: lift, shadow, reveal the accent bar, flood the icon with the gradient */
.hs-feature:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(118,40,191,.14);
}
.hs-feature:hover::before { transform: scaleX(1); }
.hs-feature:hover .hs-feature__icon {
  background: var(--hs-gradient-135);
  color: #ffffff;
  transform: scale(1.05);
}

/* Equal-height feature cards. :has() so it never turns prose columns into a row. */
.hs-section .wp-block-column:has(> .hs-feature) { display: flex; }
.hs-section .wp-block-column > .hs-feature { width: 100%; }

/* =========================================================================
   5b. SCROLL-REVEAL ANIMATION  (add "hs-reveal"; JS toggles "is-visible")
   ========================================================================= */
.hs-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.hs-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hs-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hs-feature, .hs-feature__icon { transition: none; }
}

/* =========================================================================
   6. STATS BAND  (30 projects / 20 clients / 10 years)
   ========================================================================= */
.hs-stats { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; text-align: center; }
.hs-stats .hs-stat { flex: 1 1 180px; }
.hs-stats .hs-stat__num {
  font-family: var(--hs-font-heading);
  font-size: 56px;
  font-weight: 700;
  color: var(--hs-white);          /* white, not the loud green */
  line-height: 1;
}
.hs-stats .hs-stat__num .hs-suffix { font-size: .6em; vertical-align: super; opacity: .85; }
.hs-stats .hs-stat__label { color: rgba(255,255,255,.85); margin-top: 10px; font-size: 15px; letter-spacing: .3px; }

/* Inverted stats band: white background, brand-purple numbers (About Us + Home). */
.hs-stats--invert .hs-stat__num { color: var(--hs-primary); }
.hs-stats--invert .hs-stat__num .hs-suffix { opacity: 1; }
.hs-stats--invert .hs-stat__label { color: var(--hs-text-muted); }

/* Centered intro block ("What We Do") — comfortable reading measure. */
.hs-intro { max-width: 860px; margin-inline: auto; }
.hs-intro p:last-child { color: var(--hs-text); font-size: clamp(17px, 1.15vw, 19px); line-height: 1.85; }

/* =========================================================================
   6a. TRUST / SOCIAL-PROOF  (Trustpilot + Clutch widgets, footer column)
   ========================================================================= */
.hs-trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hs-trust__item {
  min-width: 0;      /* let the item shrink instead of overflowing the column */
  display: flex;
}
/* The embedded widgets render as full-width iframes/blocks inside their cell. */
.hs-trust__item > * { width: 100%; }

/* =========================================================================
   6b. TECHNOLOGIES MARQUEE  (text-only, continuous horizontal scroll)
   Markup: .hs-marquee > .hs-marquee__track listing items TWICE (2nd copy
   aria-hidden); track animates translateX 0 -> -50% for a seamless loop.
   ========================================================================= */
.hs-marquee {
  overflow: hidden;
  /* fade the strip in/out at both edges so items don't hard-clip */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hs-marquee + .hs-marquee { margin-top: 14px; }
.hs-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: hs-marquee-left 40s linear infinite;
}
.hs-marquee--rtl .hs-marquee__track { animation-name: hs-marquee-right; }
.hs-marquee:hover .hs-marquee__track { animation-play-state: paused; }
.hs-marquee__item {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--hs-font-heading);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 23px);
  letter-spacing: .2px;
  color: var(--hs-text);
  white-space: nowrap;
  transition: color .3s ease;
}
/* brand gradient "dot" separator between every item */
.hs-marquee__item::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 clamp(22px, 3vw, 40px);
  border-radius: 50%;
  background: var(--hs-gradient-135);
  opacity: .5;
}
.hs-marquee__item:hover { color: var(--hs-primary); }
@keyframes hs-marquee-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes hs-marquee-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  /* no motion: fall back to a centered, wrapping row of the (visible) items */
  .hs-marquee { -webkit-mask-image: none; mask-image: none; }
  .hs-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .hs-marquee__item[aria-hidden="true"] { display: none; }
}

/* =========================================================================
   7. HERO  (Cover block with class "hs-hero")
   ========================================================================= */
.hs-hero.wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
  padding: clamp(80px, 16vw, 200px) 20px;
  overflow: hidden;
}
/* Cover layout defined here so the hero doesn't depend on core block CSS;
   without it the background renders as a plain image and the heading stacks. */
.hs-hero .wp-block-cover__background { position: absolute; inset: 0; }
.hs-hero .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hs-hero .wp-block-cover__inner-container { position: relative; z-index: 2; max-width: var(--hs-container); width: 100%; margin-inline: auto; text-align: center; }
.hs-hero h1 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 32px; }
.hs-hero .wp-block-buttons { justify-content: center; gap: 16px; }
@media (max-width: 768px) { .hs-hero .wp-block-buttons { justify-content: center; } }

/* =========================================================================
   7a. THEME PAGE-TITLE BANNER  (Attesa's <header class="page-header">)
   Turns the theme title bar into a full-width banner with the page's featured
   image as background and the title centred in white; gradient fallback if none.
   NOTE: background-image is left unset so Attesa's inline featured image survives.
   ========================================================================= */
header.page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 48px 20px;
  background-color: var(--hs-primary);   /* fallback tint if no featured image */
  background-image: var(--hs-gradient-135); /* brand fallback; overridden by Attesa's inline featured image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Readability scrim so the white title stays legible over any image. */
header.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(40, 10, 70, .55), rgba(120, 20, 60, .45));
  z-index: 0;
}
header.page-header > * { position: relative; z-index: 1; }
header.page-header .page-title,
header.page-header .entry-title,
header.page-header h1 {
  color: var(--hs-white);
  font-family: var(--hs-font-heading);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  text-align: center;
  margin: 0;
}

/* PAGE TITLE (theme-rendered) — brand purple, responsive. GENERAL, never
   per-page. Titles inside a scrimmed header.page-header keep white (§7a wins). */
.entry-title,
.page-title,
.attesaFeatBoxTitle .entry-title,
.elementor-page-title .elementor-heading-title {
  color: var(--hs-primary);             /* brand purple #7628BF */
  font-family: var(--hs-font-heading);  /* "Quicksand", sans-serif */
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 70px;
}
/* Legacy Elementor titles are left-aligned by the builder — centre them. */
.elementor-page-title .elementor-heading-title { text-align: center; }

/* Title scales down on smaller screens (desktop stays 48px) */
@media (max-width: 1024px) {
  .entry-title,
  .page-title,
  .attesaFeatBoxTitle .entry-title,
  .elementor-page-title .elementor-heading-title { font-size: 36px; }
}
@media (max-width: 600px) {
  .entry-title,
  .page-title,
  .attesaFeatBoxTitle .entry-title,
  .elementor-page-title .elementor-heading-title { font-size: 28px; }
}

/* Post-card titles in the listing are list items, not page titles. */
body.blog article .entry-title,
body.archive article .entry-title,
body.search article .entry-title {
  font-size: 26px;
  margin-top: 0;
}

/* =========================================================================
   7c. BLOG / ARCHIVE LISTING  ("blog-entries" post cards)
   Clean, equal-height 2-per-row card grid. SELF-SUFFICIENT: overrides Attesa's
   deep grid selectors, so several properties use !important to win.
   ========================================================================= */
body.blog .blog-entries,
body.archive .blog-entries,
body.search .blog-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: var(--hs-container);
  /* Vertical breathing room: clear the header above and the footer below. */
  margin: clamp(40px, 6vw, 68px) auto clamp(56px, 7vw, 88px);
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Each post becomes a self-contained card; reset Attesa's list/grid sizing. */
body.blog .blog-entries > article,
body.archive .blog-entries > article,
body.search .blog-entries > article {
  display: flex;
  flex-direction: column;
  /* Site body font (Inter) — the listing is outside .hs-scope. */
  font-family: var(--hs-font-body);
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #ece6f4 !important;
  border-radius: 14px;
  background: var(--hs-white);
  box-shadow: 0 6px 20px rgba(118, 40, 191, .06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.blog .blog-entries > article:hover,
body.archive .blog-entries > article:hover,
body.search .blog-entries > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(118, 40, 191, .14);
  border-color: #dcccf2;
}

/* Inner padding on the text blocks. */
.blog-entries > article .entry-header  { padding: 26px 26px 0; }
.blog-entries > article .entry-summary,
.blog-entries > article .entry-content { padding: 0 26px; }
.blog-entries > article .entry-footer  { padding: 16px 26px 24px; margin-top: auto; }

/* Meta + title */
.blog-entries > article .entry-meta { margin-bottom: 8px; }
.blog-entries > article .entry-title {
  /* !important beats Attesa grid's .hentry .entry-title{font-size:1.8em}. */
  font-size: clamp(20px, 1.5vw, 23px) !important;
  line-height: 1.3;
  margin: 0 0 12px;
}
.blog-entries > article .entry-title a {
  color: var(--hs-secondary);
  text-decoration: none;
  transition: color .2s ease;
}
.blog-entries > article .entry-title a:hover { color: var(--hs-primary); }

/* Description / excerpt — muted, clamped to 3 lines. Force Inter (outside .hs-scope). */
.blog-entries > article .entry-summary,
.blog-entries > article .entry-summary p,
.blog-entries > article .entry-content p {
  color: var(--hs-text-muted);
  font-family: var(--hs-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer "Read More" — match the site button (§3). Attesa's deep selectors
   out-specify AND paint purple-on-purple, so every property needs !important. */
.blog-entries > article .entry-footer .read-more { margin-bottom: 12px; }
.blog-entries > article .entry-footer .read-more a {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: var(--hs-primary) !important;
  color: #ffffff !important;
  font-family: var(--hs-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  line-height: 1.4 !important;
  padding: 11px 24px !important;
  border-radius: var(--hs-radius) !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(118, 40, 191, .28);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.blog-entries > article .entry-footer .read-more a:hover {
  background: var(--hs-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(118, 40, 191, .40);
  transform: translateY(-2px);
}
.blog-entries > article .entry-footer .cat-links,
.blog-entries > article .entry-footer .tags-links {
  display: inline-block;
  margin-right: 14px;
  font-size: 13px;
  font-family: var(--hs-font-body);
  color: var(--hs-text-muted);
}
.blog-entries > article .entry-footer .cat-links a,
.blog-entries > article .entry-footer .tags-links a { color: var(--hs-text-muted); }
.blog-entries > article .entry-footer .cat-links a:hover,
.blog-entries > article .entry-footer .tags-links a:hover { color: var(--hs-primary); }

/* One column on tablet/phone. */
@media (max-width: 900px) {
  body.blog .blog-entries,
  body.archive .blog-entries,
  body.search .blog-entries {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-inline: 18px;
  }
}

/* Respect reduced-motion: keep the card static, no lift. */
@media (prefers-reduced-motion: reduce) {
  body.blog .blog-entries > article,
  body.archive .blog-entries > article,
  body.search .blog-entries > article { transition: none; }
  body.blog .blog-entries > article:hover,
  body.archive .blog-entries > article:hover,
  body.search .blog-entries > article:hover { transform: none; }
}

/* =========================================================================
   7d. SINGLE POST  (blog detail — body.single-post)
   No featured-image banner, so title + content render on white. Comfortable
   reading column; tame the 48px banner-title down to an article heading.
   ========================================================================= */
body.single-post .site-main > article,
body.single-post .site-main > .navigation,
body.single-post .site-main > .comments-area {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Top gap below the sticky header + bottom gap before the footer. */
body.single-post .site-main > article {
  margin-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(24px, 4vw, 40px);
}
body.single-post .site-main > .comments-area {
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* Article title: an in-page heading, not a hero. Left-aligned, purple. */
body.single-post .site-main > article .entry-title {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.25;
  margin: 0 0 14px;
}

/* Post meta (date / author / categories) under the title — muted + subtle. */
body.single-post .site-main > article .entry-meta {
  margin-bottom: 22px;
  color: var(--hs-text-muted);
  font-size: 14px;
}
body.single-post .site-main > article .entry-meta a { color: var(--hs-text-muted); }
body.single-post .site-main > article .entry-meta a:hover { color: var(--hs-primary); }

/* Post footer (categories / tags) — light divider, small muted links. */
body.single-post .site-main > article .entry-footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid #ece6f4;
  font-size: 14px;
  color: var(--hs-text-muted);
}
body.single-post .site-main > article .entry-footer a { color: var(--hs-text-muted); }
body.single-post .site-main > article .entry-footer a:hover { color: var(--hs-primary); }

/* Prev/next post navigation — spaced links. */
body.single-post .site-main > .navigation {
  margin-block: clamp(28px, 4vw, 44px);
}
body.single-post .site-main > .navigation a { color: var(--hs-primary); font-weight: 600; text-decoration: none; }
body.single-post .site-main > .navigation a:hover { color: var(--hs-primary-hover); }

@media (max-width: 600px) {
  body.single-post .site-main > article,
  body.single-post .site-main > .navigation,
  body.single-post .site-main > .comments-area { padding-inline: 18px; }
}

/* =========================================================================
   7e. SINGLE POST — ARTICLE BODY COMPONENTS  (wrap post body in .hs-post)
   Self-sufficient rebuild of the Elementor post design (no Elementor / core
   block CSS). Source: pages/blog-migrate-aspnet-mvc-to-net-core.html.
   ========================================================================= */

/* Sidebar alignment: match the article's top gap so both columns start level. */
body.single-post #secondary {
  margin-top: clamp(36px, 5vw, 60px);
}

/* Article heading sizing — tuned DOWN a notch for comfortable long-form reading. */
.hs-post h2 {
  font-size: clamp(22px, 2.6vw, 28px) !important;
  line-height: 1.25;
  margin: 1.9em 0 .6em;
}
.hs-post h3 {
  font-size: clamp(18px, 1.7vw, 21px) !important;
  line-height: 1.3;
  margin: 0 0 .5em;
}
.hs-post > h2:first-child,
.hs-post > *:first-child { margin-top: 0; }

.hs-post__lead {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--hs-text-muted);
  margin-bottom: 1.6em;
}
.hs-post ul { padding-left: 1.2em; margin: 0 0 1.4em; }
.hs-post ul li { margin-bottom: .5em; }

/* Inline code in running text */
.hs-post :not(pre) > code {
  background: #f3eefb;
  color: #5d1f99;
  border: 0;                 /* reset the site's inline <code> border */
  border-radius: 4px;
  padding: .12em .4em;
  font-size: .9em;
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
  word-break: break-word;
}

.hs-post__figure { margin: 1.6em 0; text-align: center; }
.hs-post__figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.hs-post__figure figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--hs-text-muted);
}

/* Numbered assessment points (01 / 02 / 03) — plain rows, no card/border. */
.hs-numcards {
  display: flex;
  flex-direction: column;
  margin: 1.4em 0 2em;
}
.hs-numcard {
  display: flex;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid #efeaf6;
}
.hs-numcard:first-child { padding-top: 4px; }
.hs-numcard:last-child { border-bottom: 0; }
.hs-numcard__n {
  flex: 0 0 auto;
  min-width: 30px;
  color: var(--hs-primary);
  font-family: var(--hs-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
}
.hs-numcard__body { min-width: 0; flex: 1 1 auto; line-height: 1.65; }
.hs-numcard__body strong { color: var(--hs-secondary); }

/* Migration steps — simple numbered points, no badges. */
.hs-steps {
  list-style: none;
  margin: 1.4em 0 2em;
  padding: 0;
}
.hs-step {
  display: flex;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid #efeaf6;
}
.hs-step:first-child { padding-top: 4px; }
.hs-step:last-child { border-bottom: 0; }
.hs-step__n {
  flex: 0 0 auto;
  min-width: 22px;
  color: var(--hs-primary);
  font-family: var(--hs-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}
.hs-step__n::after { content: "."; }
.hs-step__body { min-width: 0; flex: 1 1 auto; }
.hs-step__body h3 { margin-top: 0; }
.hs-step__body p:last-child { margin-bottom: 0; }

/* Code block (C# examples) */
.hs-code {
  background: #1e1b2e;
  color: #e7e3f5;
  border: 0;                 /* reset Attesa/WP default <pre> border */
  outline: 0;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 1em 0 0;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.65;
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
  -webkit-text-size-adjust: 100%;
}
.hs-code code {
  background: none;
  color: inherit;
  border: 0;                 /* reset the site's inline <code> border/box */
  border-radius: 0;
  padding: 0;
  font: inherit;
  white-space: pre;
}
.hs-code .hs-c,
.hs-code .hs-k,
.hs-code .hs-s { background: none; border: 0; padding: 0; }
.hs-code .hs-c { color: #8b86a8; font-style: italic; }  /* comment */
.hs-code .hs-k { color: #c792ea; }                       /* keyword */
.hs-code .hs-s { color: #9fe6a0; }                       /* string  */

/* Pitfall callouts — a simple red block, no border. */
.hs-alert {
  background: #fdeaee;
  border: 0;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 0 12px;
}
.hs-alert p { margin: 0; font-size: 15px; line-height: 1.6; }
.hs-alert strong { color: #c31840; }

/* Bottom CTA panel */
.hs-post__cta {
  margin: 2.4em 0 .5em;
  padding: 28px 28px 30px;
  background: #faf7fe;
  border: 1px solid #ece3f8;
  border-radius: 14px;
  text-align: center;
}
.hs-post__cta h3 { margin-top: 0; }
.hs-post__cta > p:nth-of-type(1) {
  max-width: 620px;
  margin-inline: auto;
  color: var(--hs-text-muted);
}
.hs-post__cta .hs-btn { margin-top: 6px; }

/* Responsive */
@media (max-width: 600px) {
  .hs-numcard { gap: 10px; }
  .hs-numcard__n { font-size: 18px; min-width: 24px; }
  .hs-step { gap: 10px; }
  .hs-step__n { font-size: 18px; min-width: 18px; }
  .hs-code { padding: 14px 14px; font-size: 13px; border-radius: 8px; }
  .hs-post__cta { padding: 22px 18px 24px; }
  body.single-post #secondary { margin-top: clamp(24px, 6vw, 36px); }
}

/* =========================================================================
   8b. TECHNOLOGY LOGO GRID  (wrap in class "hs-logogrid")
   Replaces the Elementor 4-column image rows. Native markup is a plain list of
   <a><img></a>; the grid does the layout.
   ========================================================================= */
.hs-logogrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);   /* desktop: all 8 in one row */
  gap: 16px;
  max-width: 100%;
  margin-inline: auto;
  align-items: center;
  justify-items: center;
}
.hs-logogrid a,
.hs-logogrid figure { display: block; margin: 0; line-height: 0; }
/* wpautop inserts a <br> after each <a>; in a grid each becomes a stray item. */
.hs-logogrid br { display: none; }

/* Looser line spacing for the body copy in the logo-grid section. */
.hs-section:has(.hs-logogrid) p { line-height: 2; }
/* Logos render at 75px, full colour. */
.hs-logogrid img {
  width: 75px;
  max-width: 100%;
  height: auto;
}
/* Desktop: 8/row (above). Tablet: 4/row. Mobile: 2/row. */
@media (max-width: 1024px) { .hs-logogrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .hs-logogrid { grid-template-columns: repeat(2, 1fr); } }

/* Rounded intro/team photo used beside body copy */
.hs-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 0;
  box-shadow: none;
}
/* Keep the photo optically aligned with the paragraph it sits next to */
.hs-section .wp-block-column > .hs-photo { align-self: center; width: 100%; }

/* =========================================================================
   9. INNER PAGES  (compact hero, linked feature cards, why-choose, CTA)
   ========================================================================= */
/* Compact hero for interior pages */
.hs-hero--compact.wp-block-cover { min-height: 320px; padding: clamp(56px, 9vw, 96px) 20px; }
.hs-hero--compact h1 { margin-bottom: 0; }

/* "Learn more →" link inside a feature card */
.hs-feature__link {
  display: inline-block;
  margin-top: 16px;
  color: var(--hs-primary);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.hs-feature__link::after { content: " \2192"; transition: margin-left .25s ease; }
.hs-feature:hover .hs-feature__link { color: var(--hs-primary-hover); }
.hs-feature:hover .hs-feature__link::after { margin-left: 5px; }

/* =========================================================================
   9b. ALTERNATING CONTENT ROWS  (full-bleed, zig-zag)
   Band = `.hs-altband alignfull`; each row = `.hs-altrow` with `.hs-altrow__head`
   + `.hs-altrow__body`; consecutive rows swap sides.
   ========================================================================= */
/* overflow-x:clip (not hidden) so the other axis doesn't become a scroll
   container — the row's ::before{top:-1px} would else spawn a vertical scrollbar. */
.hs-altband { padding: 0; background: var(--hs-white); overflow-x: clip; }
.hs-altband__title {
  max-width: var(--hs-container);
  margin: 0 auto;
  /* Small top pad so the band's gap matches normal section-to-section spacing. */
  padding: clamp(4px, 1vw, 12px) 20px clamp(20px, 2.6vw, 30px);
}
.hs-altrows { display: flex; flex-direction: column; }

.hs-altrow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid #ece7f4;
}
.hs-altrows > .hs-altrow:last-child { border-bottom: 1px solid #ece7f4; }
/* Gradient bar that sweeps across the top of the row on hover. */
.hs-altrow::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: var(--hs-gradient-135);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
  z-index: 2;
}
.hs-altrow:hover::before { transform: scaleX(1); }
/* Refined entrance easing (row-level only). */
.hs-altrow.hs-reveal { transition-duration: .7s; transition-timing-function: cubic-bezier(.22,.61,.36,1); }

/* Each half fills 50% of the viewport; generous inset keeps text readable. */
.hs-altrow__head,
.hs-altrow__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4.5vw, 62px) clamp(24px, 6vw, 90px);
}

/* Heading side = soft purple panel; rests light, deepens on hover. */
.hs-altrow__head { background: #f7f2fd; transition: background .4s ease; }
.hs-altrow:hover .hs-altrow__head { background: #e7d9f7; }

/* Big index number + icon badge share one line above the heading. */
.hs-altrow__eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.hs-altrow__num {
  font-family: var(--hs-font-heading);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: rgba(118, 40, 191, .22);      /* ghosted brand purple */
  transition: color .4s ease;
}
.hs-altrow:hover .hs-altrow__num { color: rgba(118, 40, 191, .38); }
.hs-altrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--hs-white);
  color: var(--hs-primary);
  box-shadow: 0 6px 18px rgba(118, 40, 191, .12);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
}
.hs-altrow__icon svg { width: 30px; height: 30px; }
/* Icon pops to a gradient badge and lifts on hover. */
.hs-altrow:hover .hs-altrow__icon {
  transform: translateY(-3px) scale(1.06);
  background: var(--hs-gradient-135);
  color: var(--hs-white);
  box-shadow: 0 12px 26px rgba(118, 40, 191, .28);
}

.hs-altrow__head h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  transition: transform .35s ease;
}
.hs-altrow:hover .hs-altrow__head h3 { transform: translateX(4px); }
.hs-altrow__head .hs-feature__link { margin-top: 0; font-size: 15px; }
.hs-altrow:hover .hs-feature__link { color: var(--hs-primary-hover); }
.hs-altrow:hover .hs-feature__link::after { margin-left: 5px; }

/* Respect reduced-motion: keep the tint change, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .hs-altrow::before,
  .hs-altrow:hover .hs-altrow__icon,
  .hs-altrow:hover .hs-altrow__head h3 { transition: none; transform: none; }
}

/* Description side */
.hs-altrow__body p {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.9;
  color: var(--hs-text);
}

/* Zig-zag: on even rows the heading panel moves to the RIGHT. */
.hs-altrow:nth-child(even) .hs-altrow__head { order: 2; }

/* Stack on tablet/phone; the heading ALWAYS comes before its description. */
@media (max-width: 900px) {
  .hs-altrow { grid-template-columns: 1fr; }
  .hs-altrow__head,
  .hs-altrow:nth-child(even) .hs-altrow__head { order: 0; }
  .hs-altrow__body { order: 1; }
}

/* Why-choose checklist */
.hs-why {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
  text-align: left;
}
.hs-why li { position: relative; padding-left: 42px; }
.hs-why li::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--hs-gradient-135);
}
.hs-why li::after {
  content: "";
  position: absolute; left: 9px; top: 6px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hs-why strong {
  display: block;
  color: var(--hs-primary);
  font-family: var(--hs-font-heading);
  font-weight: 700;
  margin-bottom: 2px;
}

/* CTA band inner text width */
.hs-cta p { max-width: 660px; margin: 0 auto 26px; }

/* "Get in Touch" panel — light grey, heading+text left, button right */
.hs-getintouch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: var(--hs-container);
  margin-inline: auto;
  background: #f2f2f6;                 /* light grey, as requested */
  border: 1px solid #e9e7ef;
  border-radius: 14px;
  padding: 38px 46px;
}
/* Flatten any WP inner-container so the flex row keeps text + button in one row. */
.hs-getintouch > .wp-block-group__inner-container { display: contents; }
.hs-getintouch__text { max-width: 680px; }
.hs-getintouch h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--hs-primary);
}
.hs-getintouch p { margin: 0; color: var(--hs-text-muted); }
.hs-getintouch .wp-block-buttons { margin: 0; flex: 0 0 auto; }
.hs-getintouch .wp-block-button__link { white-space: nowrap; }
/* Force this CTA button to solid brand purple with white text. */
.hs-getintouch .wp-block-button__link,
.hs-getintouch .wp-element-button {
  background: #7628BF !important;   /* var(--hs-primary) */
  color: #ffffff !important;
}
@media (max-width: 781px) {
  .hs-getintouch { flex-direction: column; text-align: center; align-items: stretch; padding: 32px 24px; }
  .hs-getintouch .wp-block-buttons { justify-content: center; margin-top: 8px; }
}

/* Buttons placed on a purple band become white for contrast */
.hs-section--primary .wp-block-button__link,
.hs-section--primary .wp-element-button,
.hs-btn--light {
  background: #ffffff;
  color: var(--hs-primary) !important; /* override the base button's white !important on purple bands */
}
.hs-section--primary .wp-block-button__link:hover,
.hs-section--primary .wp-element-button:hover,
.hs-btn--light:hover {
  background: #f0e6fb;
  color: var(--hs-primary-hover) !important;
}

@media (max-width: 781px) { .hs-why { grid-template-columns: 1fr; } }

/* Contact details list (Contact Us page) */
.hs-contact { list-style: none; margin: 20px 0 0; padding: 0; }
.hs-contact li { margin: 0 0 20px; color: var(--hs-text); line-height: 1.6; }
.hs-contact li strong { color: var(--hs-primary); font-family: var(--hs-font-heading); }
.hs-contact a { color: var(--hs-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hs-contact a:hover { border-bottom-color: var(--hs-primary); }

/* =========================================================================
   9c. FAQ ACCORDION  (native <details>/<summary>, wrapped in .hs-faq)
   ========================================================================= */
.hs-faq {
  max-width: 820px;
  margin: 8px auto 0;
  text-align: left;
}
.hs-faq__item {
  border: 1px solid #e9e7ef;
  border-radius: 12px;
  background: var(--hs-white, #fff);
  margin-bottom: 14px;
  overflow: hidden;
}
.hs-faq__item summary {
  list-style: none;                 /* hide default triangle (most browsers) */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--hs-font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--hs-primary);
}
.hs-faq__item summary::-webkit-details-marker { display: none; } /* Safari */
.hs-faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border: solid var(--hs-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);         /* chevron pointing down */
  transition: transform .25s ease;
  margin-top: -4px;
}
.hs-faq__item[open] summary::after { transform: rotate(-135deg); } /* points up */
.hs-faq__item summary:hover { color: var(--hs-primary-hover); }
.hs-faq__item > p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--hs-text-muted);
  line-height: 1.65;
}

/* =========================================================================
   9a. CONTACT FORM  (Contact Form 7, wrapped in <div class="hs-form">)
   Self-sufficient: CF7's stylesheet isn't reliably loaded, so the child theme
   fully styles the fields; the .hs-form wrapper scopes them to the contact page.
   ========================================================================= */
/* Two-column contact layout: info (38%) + form (62%). Grid so the split is exact
   and doesn't fight the flex column fallback. Stacks at 781px. */
.hs-section .hs-form-cols {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 2em;
  align-items: start;
}
@media (max-width: 781px) {
  .hs-section .hs-form-cols { grid-template-columns: 1fr; }
}

.hs-form { margin-top: 20px; }
.hs-form .wpcf7 { max-width: 100%; }
/* CF7 wraps controls in <p>; give them breathing room. */
.hs-form p { margin: 0 0 18px; }
/* Labels: heading font, brand-tinted, block above the input. */
.hs-form label {
  display: block;
  font-family: var(--hs-font-heading);
  font-weight: 600;
  color: var(--hs-text);
  margin-bottom: 6px;
}
/* Text-like inputs + textarea + selects. */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="url"],
.hs-form input[type="number"],
.hs-form input[type="date"],
.hs-form select,
.hs-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--hs-font-body);
  font-size: 15px;
  color: var(--hs-text);
  background: #ffffff;
  padding: 12px 14px;
  border: 1px solid #d9d2e4;
  border-radius: var(--hs-radius);
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Taller message box; target CF7's own class so it wins over a shipped height. */
.hs-form textarea,
.hs-form textarea.wpcf7-textarea { min-height: 200px; height: auto; resize: vertical; }
.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
  outline: none;
  border-color: var(--hs-primary);
  box-shadow: 0 0 0 3px rgba(118, 40, 191, .14);
}
.hs-form ::placeholder { color: #9a90a8; }
/* Submit button — reuse the brand solid-purple button treatment. */
.hs-form input[type="submit"],
.hs-form button[type="submit"],
.hs-form .wpcf7-submit {
  display: inline-block;
  background: var(--hs-primary);
  color: #ffffff;
  font-family: var(--hs-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 13px 34px;
  border: 0;
  border-radius: var(--hs-radius);
  box-shadow: 0 6px 18px rgba(118, 40, 191, .28);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.hs-form input[type="submit"]:hover,
.hs-form button[type="submit"]:hover,
.hs-form .wpcf7-submit:hover {
  background: var(--hs-primary-hover);
  box-shadow: 0 10px 26px rgba(118, 40, 191, .40);
  transform: translateY(-2px);
}
/* CF7 status / validation messages. */
.hs-form .wpcf7-not-valid-tip { color: #d11a4c; font-size: 13px; margin-top: 4px; }
.hs-form .wpcf7-response-output {
  margin: 12px 0 0 !important;
  padding: 12px 16px;
  border-radius: var(--hs-radius);
  font-size: 14px;
}
.hs-form .wpcf7-spinner { margin-left: 10px; }

/* =========================================================================
   9d. PARENT-THEME OWNED REGIONS — HANDS OFF
   Header, nav, logo and footer belong to Attesa. Reset only font-family here so
   the parent Customizer colours (incl. menu link colour) stay in control.
   ========================================================================= */

/* Header/footer TYPOGRAPHY — apply brand fonts (Customizer has no Sora).
   Overrides ONLY font-family, never colour. !important beats Attesa's inline
   Customizer <style> in <head> at equal specificity. */
header.site-header,
header.site-header .main-navigation,
header.site-header .main-navigation a,
.site-title, .site-title a, .site-description,
.site-footer, .footerArea {
  font-family: var(--hs-font-body) !important;   /* Inter */
}
.site-title, .site-title a,
header.site-header :is(h1, h2, h3, h4, h5, h6),
.site-footer :is(h1, h2, h3, h4, h5, h6),
.footerArea :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--hs-font-heading) !important; /* Sora */
}
/* Top-level menu links — forced #404040 because this site's header reads white
   (Attesa's default paints them white for the transparent-overlay state). The
   CTA button is excluded so it stays white on its filled background. If the menu
   looks wrong, the real fix is turning off the overlay header in Customizer. */
body #masthead:not(.menuMinor) .main-navigation > div > ul > li:not(.attesaMenuButton) > a {
  color: #404040 !important;
}

/* Submenu dropdowns */
.sub-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  border-radius: 6px;
  overflow: hidden;
}
body .main-navigation ul ul { background-color: #ffffff; }
body .main-navigation ul ul a {
  color: #404040;
  background-color: #fff;
  border-bottom: 0;
}
body .main-navigation ul ul a:hover {
  color: var(--hs-primary);
  background-color: #fff;
}

/* Header / footer chrome */
header.site-header { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1); }
header.site-header.menuMinor,
header.site-header .nav-middle.menuMinor { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .3); }

.second-navigation { display: none; }
.attesa-social { font-size: 16px; }

/* Footer sits on a dark band (#3f3f3f). Headings need white (else §2 paints them
   purple); links/icons are forced white too, intentionally overriding Attesa's
   Footer text colour. Remove these rules rather than fighting them elsewhere. */
.site-footer :is(h2, h3, h4, h5, h6),
.footerArea :is(h2, h3, h4, h5, h6) { color: #fff !important; }

.footerArea a,
.footerArea .attesa-contact-info i { color: #fff; }

.site-info { font-size: 0; }
.site-info .custom { font-size: 13px; }

#toTop.visible { bottom: 90px; right: 35px; }
.grecaptcha-badge { display: none !important; }

/* Forms */
input[type="text"],
input[type="email"],
textarea {
  border-color: lightgray;
  border-radius: 10px;
}

/* Mobile header spacing */
@media (max-width: 767px) {
  .nav-top .top-block-left,
  .nav-top .top-block-left.invert { display: flex; }
}
@media (max-width: 600px) {
  .nav-top .container { padding: 1em .4em 0; }
}

/* =========================================================================
   10. RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
  :root { --hs-section-pad: clamp(20px, 5vw, 24px); }
}