/*
Theme Name: David Scott Hagerstrom
Theme URI: https://davidhagerstrom.com
Description: Child theme of Astra for davidhagerstrom.com. Implements the David Scott Hagerstrom design system: Bright Pink / Deep Purple / True White / cool light gray, Pliant Expanded headers, Akt Light body. Dark ground is the default; the .dsh-on-light scope is reserved for resume/document bands.
Author: David Scott Hagerstrom
Template: astra
Version: 1.0.0
Text Domain: dsh-child
*/

/* ==========================================================================
   1. BRAND WEBFONTS
   Pliant (headers, variable wdth+wght) and Akt (body, variable wght) are
   supplied by the brand owner. Bungee is the LOGO typeface only and is never
   set live -- the supplied lockup PNGs are used instead.
   ========================================================================== */

@font-face{
  font-family:"Pliant";
  src:url("assets/fonts/Pliant-Variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:100% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Akt";
  src:url("assets/fonts/Akt-Variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root{
  /* ---- Brand core ---- */
  --dsh-pink:#ff66c4;
  --dsh-purple:#210d41;
  --dsh-white:#ffffff;


  /* ---- Pink ramp ---- */
  --pink-100:#ffe4f5;
  --pink-200:#ffc2e7;
  --pink-300:#ff99d6;
  --pink-400:#ff66c4;
  --pink-500:#f24bb1;
  --pink-600:#d62f95;
  --pink-700:#a81f72;

  /* ---- Purple ramp ---- */
  --purple-900:#12061f;
  --purple-800:#180930;
  --purple-700:#210d41;
  --purple-600:#2c1354;
  --purple-500:#3a1b6b;
  --purple-400:#4c2789;

  /* ---- Cool light gray ramp ---- */
  --gray-050:#f6f5fa;
  --gray-100:#eceaf3;
  --gray-200:#d9d5e6;
  --gray-300:#bdb7cf;
  --gray-400:#9a93b0;
  --gray-500:#736c8c;
  --gray-600:#524b69;

  /* ---- Surfaces (dark is the default mode) ---- */
  --surface-page:var(--purple-700);
  --surface-deep:var(--purple-800);
  --surface-raised:var(--purple-600);
  --surface-card:rgba(255,255,255,0.05);
  --surface-card-hover:rgba(255,255,255,0.09);
  --surface-inset:rgba(0,0,0,0.25);
  --surface-invert:var(--dsh-white);
  --surface-accent:var(--dsh-pink);
  --surface-scrim:rgba(18,6,31,0.72);

  /* ---- Text ---- */
  --text-strong:var(--dsh-white);
  --text-body:var(--gray-200);
  --text-muted:var(--gray-400);
  --text-accent:var(--dsh-pink);
  --text-on-accent:var(--purple-700);
  --text-on-invert:var(--purple-700);
  --text-link:var(--dsh-pink);
  --text-link-hover:var(--pink-300);

  /* ---- Lines ---- */
  --border-hairline:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.28);
  --border-accent:var(--dsh-pink);
  --border-focus:var(--pink-300);

  /* ---- Interactive ---- */
  --accent-rest:var(--dsh-pink);
  --accent-hover:var(--pink-300);
  --accent-press:var(--pink-600);
  /* Pink on white only clears AA at the 700 shade (5.9:1); #ff66c4 is 2.6:1. */
  --accent-on-light:var(--pink-700);
  --accent-disabled:rgba(255,102,196,0.35);

  /* ---- Status (form validation only) ---- */
  --status-error:#ff5c7a;
  --status-success:#4be0a8;
  --status-warning:#ffc857;

  /* ---- Type ---- */
  --font-display:"Pliant","Arial Narrow",system-ui,sans-serif;
  --font-body:"Akt","Helvetica Neue",Helvetica,system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  --weight-body:300;
  --weight-body-medium:400;
  --weight-display:700;
  --font-stretch-display:125%;

  --size-hero:clamp(3rem,9vw,7.5rem);
  --size-display:clamp(2.5rem,6vw,4.5rem);
  --size-h1:clamp(2rem,4.4vw,3.25rem);
  --size-h2:clamp(1.5rem,2.8vw,2.25rem);
  --size-h3:1.375rem;
  --size-eyebrow:0.8125rem;
  --size-body-lg:1.25rem;
  --size-body:1.0625rem;
  --size-body-sm:0.9375rem;
  --size-caption:0.8125rem;

  --leading-tight:0.92;
  --leading-snug:1.08;
  --leading-heading:1.15;
  --leading-body:1.6;
  --leading-loose:1.75;

  --tracking-hero:-0.01em;
  --tracking-display:0.005em;
  --tracking-eyebrow:0.18em;
  --tracking-body:0;
  --tracking-button:0.06em;

  /* ---- Spacing ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --space-11:180px;

  --gutter-page:clamp(20px,5vw,64px);
  --measure-prose:64ch;
  --measure-narrow:44ch;
  --section-y:clamp(44px,6vw,80px);
  --grid-gap:24px;
  --nav-height:78px;

  /* ---- Radius ---- */
  --radius-xs:6px;  --radius-sm:10px; --radius-md:16px;
  --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --radius-media:20px;

  /* ---- Effects ---- */
  --shadow-sm:0 1px 2px rgba(18,6,31,0.4);
  --shadow-md:0 12px 28px rgba(18,6,31,0.45);
  --shadow-lg:0 28px 64px rgba(18,6,31,0.55);
  --glow-pink:0 0 0 1px rgba(255,102,196,0.5),0 10px 40px rgba(255,102,196,0.28);
  --glow-pink-strong:0 0 0 1px rgba(255,102,196,0.8),0 14px 56px rgba(255,102,196,0.45);
  --ring-focus:0 0 0 3px rgba(255,153,214,0.55);
  --inset-hairline:inset 0 0 0 1px rgba(255,255,255,0.08);

  --scrim-bottom:linear-gradient(to top,rgba(18,6,31,0.92) 0%,rgba(18,6,31,0.55) 38%,rgba(18,6,31,0) 78%);
  /* Backgrounds are flat colour, with no bloom of any kind. */

  --blur-glass:blur(18px);
  --overlay-glass:rgba(33,13,65,0.68);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:120ms;
  --dur-ui:200ms;
  --dur-reveal:700ms;
}

/* Light band scope -- resume / document sections ONLY. The site never goes light. */
.dsh-on-light{
  --surface-page:var(--dsh-white);
  --surface-deep:var(--gray-050);
  --surface-card:var(--gray-050);
  --surface-card-hover:var(--gray-100);
  --surface-inset:var(--gray-100);
  --surface-invert:var(--purple-700);
  --surface-scrim:rgba(33,13,65,0.6);
  --text-strong:var(--purple-700);
  --text-body:var(--gray-600);
  --text-muted:var(--gray-500);
  --text-on-invert:var(--dsh-white);
  --border-hairline:var(--gray-200);
  --border-strong:var(--gray-300);
  --accent-hover:var(--pink-500);
  /* #ff66c4 is 2.6:1 on white. Remapping the token here keeps every inline
     var(--dsh-pink) on-brand and lifts it to 5.9:1. */
  --dsh-pink:var(--pink-700);
  --text-accent:var(--pink-700);
}

/* ==========================================================================
   3. BASE -- dark ground, white text, high contrast (brand rules)
   ========================================================================== */

html{scroll-behavior:smooth}
/* Anchored sections must not land under the sticky header. */
[id]{scroll-margin-top:calc(var(--nav-height) + 16px)}

body,
body.wp-singular,
.ast-separate-container,
.ast-plain-container{
  background-color:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:var(--size-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Astra wrappers must not paint their own ground over the purple. */
#page,#content,.site-content,.ast-container,
.entry-content,.site,.ast-page-builder-template .site-content>.ast-container{
  background:transparent;
}

/* Full-width content is a brand rule -- kill Astra's centered max-width. */
.ast-page-builder-template .entry-content,
.ast-page-builder-template .site-content .ast-container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
  margin:0;
}

::selection{background:var(--dsh-pink);color:var(--purple-700)}

/* ---- Headings: Pliant Bold Expanded, ALL CAPS ---- */
h1,h2,h3,h4,h5,h6,
.entry-title,.site-title{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-stretch:var(--font-stretch-display);
  text-transform:uppercase;
  color:var(--text-strong);
  letter-spacing:var(--tracking-display);
  word-spacing:0.06em;
  line-height:var(--leading-heading);
}
h1{font-size:var(--size-h1);line-height:var(--leading-tight)}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3)}

p{color:var(--text-body)}

a{color:var(--text-link);text-decoration:none;transition:color var(--dur-ui) var(--ease-out)}
a:hover,a:focus{color:var(--text-link-hover)}

/* Focus is never removed. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--ring-focus);
  border-color:var(--border-focus);
  border-radius:var(--radius-xs);
}

/* Rounded corners are a brand rule, but the radius belongs to MEDIA frames --
   not to the logo lockup, whose own artwork already carries its corners. A
   blanket radius here clipped the white play mark and read as a cropped box. */
.dsh-media img,.dsh-media video,.dsh-media iframe,
.elementor-widget-image img,
.elementor-widget-video iframe,.elementor-widget-video video,
.wp-block-image img{
  border-radius:var(--radius-media);
}
/* Logos are artwork, never a framed image. */
.elementor-widget-xpro-site-logo img,
.xpro-site-logo img,
.custom-logo,
.dsh-logo img{
  border-radius:0!important;
  clip-path:none!important;
  object-fit:contain;
}

/* ==========================================================================
   4. BRAND UTILITY CLASSES
   Applied to Elementor containers/widgets from the editor so no page needs
   an HTML widget to reach the design system.
   ========================================================================== */

/* ---- Eyebrow: navigational, pink, heavily tracked ---- */
.dsh-eyebrow,
.dsh-eyebrow .elementor-heading-title{
  font-family:var(--font-display)!important;
  font-weight:var(--weight-display)!important;
  font-stretch:var(--font-stretch-display);
  text-transform:uppercase!important;
  font-size:var(--size-eyebrow)!important;
  letter-spacing:var(--tracking-eyebrow)!important;
  color:var(--text-accent)!important;
  line-height:1.4!important;
}

/* ---- Hero / display headings ---- */
.dsh-hero .elementor-heading-title{
  font-size:var(--size-hero)!important;
  line-height:var(--leading-tight)!important;
  letter-spacing:var(--tracking-hero)!important;
  color:var(--text-strong)!important;
  word-spacing:0.06em;
}
.dsh-display .elementor-heading-title{
  font-size:var(--size-display)!important;
  line-height:var(--leading-tight)!important;
  color:var(--text-strong)!important;
  word-spacing:0.06em;
}

/* Card and grid copy: 16px minimum for sustained reading. */
.dsh-card p,.dsh-card li{font-size:1rem;line-height:var(--leading-body)}
.dsh-card h3{margin-bottom:var(--space-2)}

/* ---- Body copy scales ---- */
.dsh-lede,.dsh-lede p{
  font-size:var(--size-body-lg);
  line-height:var(--leading-body);
  color:var(--text-body);
  max-width:var(--measure-narrow);
}
.dsh-prose,.dsh-prose p{
  font-size:var(--size-body-lg);
  line-height:var(--leading-body);
  color:var(--text-body);
  max-width:var(--measure-prose);
}

/* ---- Backgrounds ----
   Flat colour everywhere: deep purple grounds carry no gradient or bloom. */
.dsh-flat{background-image:none!important}

/* Retired: the teal bloom that used to sit on deep-surface sections. The
   selector is kept inert so any section still carrying the class renders
   as plain purple rather than picking up a stale gradient. */
.dsh-glow-teal::before{content:none!important}
.dsh-glow-teal{background-image:none!important}

/* ---- Cards: 24px radius, hairline border, 5% white fill ---- */
.dsh-card{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  transition:background var(--dur-ui) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out);
}
.dsh-card:hover{
  background:var(--surface-card-hover);
  transform:translateY(-2px);
}
/* One accent card per page, filled pink with purple ink. */
.dsh-card-accent{
  background:var(--surface-accent);
  border-radius:var(--radius-lg);
  border:none;
}
.dsh-card-accent h1,.dsh-card-accent h2,.dsh-card-accent h3,
.dsh-card-accent .elementor-heading-title{color:var(--text-on-accent)!important}
.dsh-card-accent p{color:var(--purple-700);opacity:.85}

/* ---- Featured video: the whole 16:9 frame has to be visible at once,
   under the 78px sticky header, without scrolling. Capping WIDTH keeps the
   aspect ratio intact while bounding the resulting height. ---- */
.dsh-hero-media .elementor-widget-container,
.dsh-fit-video .elementor-widget-container{
  max-width:calc((100vh - 300px) * 16 / 9);
  min-width:min(100%,420px);
  margin-inline:auto;
}
/* Any other 16:9 video stays under 62vh so it never eats a whole screen. */
.elementor-widget-video .elementor-wrapper{
  max-width:calc(62vh * 16 / 9);
  margin-inline:auto;
}
/* Vertical 9:16 and square 1:1 sit in grids and are already small -- the
   16:9 cap above would be meaningless for them, so lift it. */
.elementor-widget-video .elementor-wrapper.elementor-aspect-ratio-916,
.elementor-widget-video .elementor-wrapper.elementor-aspect-ratio-11,
.elementor-widget-video .elementor-wrapper.elementor-aspect-ratio-32{
  max-width:100%;
}

/* ---- Media frame ---- */
.dsh-media,.dsh-media img,.dsh-media video,.dsh-media iframe{
  border-radius:var(--radius-media);
  overflow:hidden;
}
.dsh-media img{
  transition:transform 420ms var(--ease-out);
  display:block;width:100%;height:100%;object-fit:cover;
}
.dsh-card:hover .dsh-media img{transform:scale(1.04)}

/* ---- Tag / pill ---- */
.dsh-tag{
  display:inline-block;
  font-family:var(--font-body);
  font-size:var(--size-caption);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-accent);
  border:1px solid rgba(255,102,196,0.4);
  border-radius:var(--radius-pill);
  padding:5px 12px;
  margin:0 6px 6px 0;
}

/* ---- Resume rows ---- */
.dsh-resume-row{
  border-top:1px solid var(--border-hairline);
  padding-top:var(--space-6);
  padding-bottom:var(--space-6);
}
.dsh-dates{
  font-family:var(--font-mono);
  font-size:var(--size-caption);
  color:var(--text-muted);
  letter-spacing:0.04em;
}
/* The play triangle is the one unicode glyph used as a bullet, always pink. */
.dsh-bullets ul{list-style:none;margin:0;padding:0}
.dsh-bullets li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
  font-size:var(--size-body);
  line-height:var(--leading-body);
  color:var(--text-body);
}
.dsh-bullets li::before{
  content:"\25B6";
  position:absolute;left:0;top:0;
  color:var(--dsh-pink);
  font-size:0.8em;
  line-height:1.9;
}

/* ---- Light-band accessibility ----
   These override Elementor's generated kit colours, which are emitted after
   this sheet and otherwise force white headings onto the white resume band. */
.dsh-on-light h1,.dsh-on-light h2,.dsh-on-light h3,
.dsh-on-light h4,.dsh-on-light h5,.dsh-on-light h6,
.dsh-on-light .elementor-heading-title,
.dsh-on-light strong{
  color:var(--purple-700)!important;   /* 15.9:1 on white */
}
.dsh-on-light,
.dsh-on-light .dsh-bullets li{
  color:var(--gray-600);               /* 7.6:1 on white */
}
.dsh-on-light .dsh-dates{
  color:var(--gray-500)!important;     /* 5.1:1 on white */
}
/* Pink at #ff66c4 is only 2.6:1 on white. The 700 shade keeps the accent
   inside the brand ramp and clears AA at 5.9:1. */
.dsh-on-light a,
.dsh-on-light .dsh-tag,
.dsh-on-light .elementor-widget-text-editor p[style*="dsh-pink"],
.dsh-on-light [style*="--dsh-pink"]{
  color:var(--accent-on-light)!important;
}
.dsh-on-light .dsh-tag{border-color:rgba(168,31,114,0.45)}
.dsh-on-light .dsh-bullets li::before{color:var(--accent-on-light)}
.dsh-on-light .dsh-resume-row{border-top-color:var(--gray-200)}

/* ==========================================================================
   5. ELEMENTOR BUTTONS -- pink fill takes PURPLE ink, never white.
   ========================================================================== */

.elementor-button,
.elementor-button-link{
  font-family:var(--font-display)!important;
  font-weight:var(--weight-display)!important;
  font-stretch:var(--font-stretch-display);
  text-transform:uppercase!important;
  letter-spacing:var(--tracking-button)!important;
  border-radius:var(--radius-pill)!important;
  transition:background var(--dur-ui) var(--ease-out),
             color var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             transform var(--dur-fast) var(--ease-out)!important;
}
.elementor-button:hover{transform:translateY(-2px)}
.elementor-button:active{transform:scale(0.98)}

/* Primary */
.dsh-btn-primary .elementor-button{
  background-color:var(--accent-rest)!important;
  color:var(--text-on-accent)!important;
  box-shadow:var(--glow-pink);
}
.dsh-btn-primary .elementor-button:hover{
  background-color:var(--accent-hover)!important;
  box-shadow:var(--glow-pink-strong);
}
/* Secondary -- hairline ghost */
.dsh-btn-secondary .elementor-button{
  background-color:transparent!important;
  color:var(--text-strong)!important;
  border:1px solid var(--border-strong)!important;
}
.dsh-btn-secondary .elementor-button:hover{
  background-color:rgba(255,255,255,0.06)!important;
  border-color:var(--dsh-pink)!important;
  color:var(--dsh-pink)!important;
}
/* Invert -- white fill, purple ink. For use on the pink accent card. */
.dsh-btn-invert .elementor-button{
  background-color:var(--dsh-white)!important;
  color:var(--purple-700)!important;
}
.dsh-btn-invert .elementor-button:hover{
  background-color:var(--purple-700)!important;
  color:var(--dsh-white)!important;
}

/* ==========================================================================
   6. CONTACT FORM 7
   Dark inset wells, pink focus ring, pill submit -- matched to the system.
   ========================================================================== */

.dsh-form .wpcf7-form{display:flex;flex-direction:column;gap:var(--space-5);max-width:620px}
.dsh-form .dsh-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:600px){.dsh-form .dsh-field-row{grid-template-columns:1fr}}

.dsh-form label{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-stretch:var(--font-stretch-display);
  text-transform:uppercase;
  font-size:var(--size-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  color:var(--text-strong);
  margin-bottom:var(--space-2);
}

.dsh-form input[type="text"],
.dsh-form input[type="email"],
.dsh-form input[type="tel"],
.dsh-form input[type="url"],
.dsh-form textarea,
.dsh-form select{
  width:100%;
  background:var(--surface-inset)!important;
  border:1px solid var(--border-hairline)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--text-strong)!important;
  font-family:var(--font-body)!important;
  font-weight:var(--weight-body);
  font-size:var(--size-body)!important;
  padding:14px 16px!important;
  transition:border-color var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out);
}
.dsh-form textarea{min-height:150px;resize:vertical}
.dsh-form ::placeholder{color:var(--text-muted);opacity:1}

.dsh-form input:focus,
.dsh-form textarea:focus,
.dsh-form select:focus{
  outline:none;
  border-color:var(--border-focus)!important;
  box-shadow:var(--ring-focus)!important;
}

/* Native select arrow, drawn in the brand pink. */
.dsh-form select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff66c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  padding-right:44px!important;
}
.dsh-form select option{background:var(--purple-700);color:var(--dsh-white)}

/* Checkbox */
.dsh-form .wpcf7-checkbox .wpcf7-list-item{margin:0}
.dsh-form .wpcf7-list-item-label{
  font-family:var(--font-body);
  font-size:var(--size-body-sm);
  color:var(--text-body);
  text-transform:none;
  letter-spacing:0;
}
.dsh-form input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;
  vertical-align:-5px;margin-right:10px;
  background:var(--surface-inset);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xs);
  cursor:pointer;
  transition:background var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.dsh-form input[type="checkbox"]:checked{
  background:var(--dsh-pink);
  border-color:var(--dsh-pink);
  box-shadow:var(--glow-pink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23210d41' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}

/* Submit -- pink pill, purple ink, pink glow */
.dsh-form input[type="submit"],
.dsh-form .wpcf7-submit{
  align-self:flex-start;
  background:var(--accent-rest)!important;
  color:var(--text-on-accent)!important;
  font-family:var(--font-display)!important;
  font-weight:var(--weight-display)!important;
  font-stretch:var(--font-stretch-display);
  text-transform:uppercase!important;
  letter-spacing:var(--tracking-button)!important;
  font-size:var(--size-body)!important;
  border:none!important;
  border-radius:var(--radius-pill)!important;
  padding:16px 34px!important;
  cursor:pointer;
  box-shadow:var(--glow-pink);
  transition:background var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.dsh-form input[type="submit"]:hover,
.dsh-form .wpcf7-submit:hover{
  background:var(--accent-hover)!important;
  box-shadow:var(--glow-pink-strong);
  transform:translateY(-2px);
}
.dsh-form input[type="submit"]:active{transform:scale(0.98)}

/* CF7 response messages */
.dsh-form .wpcf7-response-output{
  border-radius:var(--radius-sm)!important;
  border-width:1px!important;
  font-family:var(--font-body);
  font-size:var(--size-body-sm);
  padding:14px 18px!important;
  margin:0!important;
  color:var(--text-strong);
}
.dsh-form form.sent .wpcf7-response-output{
  border-color:var(--status-success)!important;
  background:rgba(75,224,168,0.10);
}
.dsh-form form.invalid .wpcf7-response-output,
.dsh-form form.failed .wpcf7-response-output{
  border-color:var(--status-error)!important;
  background:rgba(255,92,122,0.10);
}
.dsh-form .wpcf7-not-valid-tip{
  color:var(--status-error);
  font-size:var(--size-caption);
  margin-top:6px;
}
.dsh-form .wpcf7-spinner{background-color:var(--dsh-pink)}

/* ==========================================================================
   7. XPRO HEADER / FOOTER
   ========================================================================== */

/* Sticky glass header -- the only fixed element in the system.
   Trimmed from 112px to 78px (-30%). */
.dsh-header{
  min-height:var(--nav-height)!important;
  background:var(--overlay-glass)!important;
  -webkit-backdrop-filter:var(--blur-glass);
  backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--border-hairline);
}

/* Nav links: Pliant caps, pink on hover and current page. */
.dsh-nav .xpro-menu-list li > a,
.dsh-nav .xpro-nav-menu li > a,
.dsh-nav a.xpro-menu-item{
  font-family:var(--font-display)!important;
  font-weight:var(--weight-display)!important;
  font-stretch:var(--font-stretch-display);
  text-transform:uppercase!important;
  font-size:var(--size-caption)!important;
  letter-spacing:var(--tracking-button)!important;
  color:var(--text-body)!important;
  transition:color var(--dur-ui) var(--ease-out)!important;
}
.dsh-nav .xpro-menu-list li > a:hover,
.dsh-nav .xpro-menu-list li.current-menu-item > a,
.dsh-nav .xpro-nav-menu li > a:hover,
.dsh-nav .xpro-nav-menu li.current-menu-item > a{
  color:var(--dsh-pink)!important;
}

.dsh-footer{
  background:var(--surface-deep)!important;
  border-top:1px solid var(--border-hairline);
}

/* ==========================================================================
   8. CURSOR + PINK GLOW
   The brand ships a custom cursor; the glow is the vaporwave "presence".
   Both are suppressed for touch and for reduced-motion users.
   ========================================================================== */

@media (hover:hover) and (pointer:fine){
  html,body,a,button,[role="button"],select,summary,label,
  .elementor-button,input[type="submit"]{
    cursor:url("assets/cursor.png") 16 2,auto;
  }
  input[type="text"],input[type="email"],textarea{cursor:text}
}

#dsh-glow{
  position:fixed;top:0;left:0;
  width:900px;height:900px;margin:-450px 0 0 -450px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(circle closest-side,
    rgba(255,153,214,.46),
    rgba(255,153,214,.26) 42%,
    rgba(255,153,214,.10) 68%,
    rgba(255,153,214,0) 100%);
  will-change:transform;
}
#page,.site{position:relative;z-index:1}

/* ---- Click firework ----
   A one-shot burst on pointer-down. Not ambient motion: it exists only for
   the duration of a click, and it is suppressed for reduced-motion users. */
#dsh-spark-layer{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}
.dsh-spark{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  will-change:transform,opacity;
}

@media (prefers-reduced-motion:reduce){
  #dsh-glow{display:none}
  #dsh-spark-layer{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}