/* ========================================================================
   RIVERBEND WEALTH MANAGEMENT — Discovery Call Page
   v11 — Clean rewrite.
   - Logo: smaller, no shadow, no rounding, responsive
   - Form button: NOT touched (HubSpot default)
   - Images/videos: soft corners + medium drop shadow
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. FONTS
   ------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700&display=swap');

/* ------------------------------------------------------------------------
   2. BRAND TOKENS
   ------------------------------------------------------------------------ */
:root {
  --rb-black:       #141414;
  --rb-light-cream: #FFF5DF;
  --rb-cream:       #F0E7D3;
  --rb-blue:        #3B688A;
  --rb-brown:       #5C4126;

  --rb-border:      #1414141a;
  --rb-border-soft: #14141410;

  --rb-font: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --shadow-soft: 0 12px 32px rgba(20, 20, 20, 0.12), 0 4px 12px rgba(20, 20, 20, 0.06);
}

/* ------------------------------------------------------------------------
   3. GLOBAL BASE
   ------------------------------------------------------------------------ */
body,
.body-container-wrapper,
.body-wrapper {
  background-color: var(--rb-cream) !important;
  color: var(--rb-black) !important;
  font-family: var(--rb-font) !important;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

body, p, a, span, div, li, label,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rb-font) !important;
}

/* ------------------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0 0 0.5em;
  text-shadow: none !important;
}

h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
}

h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

p {
  line-height: 1.65;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

a { color: var(--rb-blue); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--rb-brown); }

strong, b { font-weight: 600; }

/* ------------------------------------------------------------------------
   5. PAGE BUTTONS (NOT form buttons)
   ------------------------------------------------------------------------ */
.cta_button,
.hs-cta-wrapper a,
a.button {
  display: inline-block;
  background-color: var(--rb-blue) !important;
  color: var(--rb-light-cream) !important;
  font-family: var(--rb-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  padding: 0.95rem 2rem !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
  box-shadow: none !important;
  line-height: 1.2;
}

.cta_button:hover,
.hs-cta-wrapper a:hover,
a.button:hover {
  background-color: var(--rb-brown) !important;
  color: var(--rb-light-cream) !important;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------------
   6. CONTENT IMAGES & VIDEO — soft corners + drop shadow
   Targets only images inside content modules, NOT logos.
   ------------------------------------------------------------------------ */
.hs_cos_wrapper_type_linked_image img,
.hs_cos_wrapper_type_image img,
.hs_cos_wrapper_type_image_grid img,
.hs_cos_wrapper_type_module img:not([alt*="logo" i]) {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"] {
  max-width: 100%;
  border-radius: var(--r-lg);
  border: none;
  box-shadow: var(--shadow-soft);
}

.hs_cos_wrapper_type_video,
.embed-responsive,
.hs-responsive-embed {
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
}

/* ------------------------------------------------------------------------
   7. LOGO — smaller, NO shadow, NO rounding, responsive
   This must come AFTER section 6 so it overrides any image rules.
   ------------------------------------------------------------------------ */
.header img,
.header-container img,
header img,
.hs_cos_wrapper_type_logo img,
.footer img,
.footer-container img,
footer img {
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------------
   8. HUBSPOT MEETINGS EMBED
   ------------------------------------------------------------------------ */
iframe[src*="meetings.hubspot"],
iframe[src*="meetings-na"],
iframe[src*="app.hubspot.com/meetings"] {
  min-height: 720px;
  border: none !important;
  border-radius: var(--r-lg);
  background-color: var(--rb-light-cream);
  width: 100%;
  max-width: 900px;
  display: block;
  margin: 2rem auto;
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------------------
   9. ACCORDION — no border
   ------------------------------------------------------------------------ */
.hs-accordion-item,
.hs-accordion__item,
.accordion-item,
.accordion__item,
[class*="accordion-card"],
[class*="accordion"] [class*="item"] {
  border: none !important;
  background-color: transparent !important;
}

/* ------------------------------------------------------------------------
   10. SECTION RHYTHM
   ------------------------------------------------------------------------ */
.dnd-section,
.dnd_area-row-wrapper {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ------------------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .header img,
  .header-container img,
  header img,
  .hs_cos_wrapper_type_logo img,
  .footer img,
  .footer-container img,
  footer img {
    max-height: 32px !important;
  }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  h1 { font-size: clamp(2.25rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.625rem, 5vw, 2rem); }

  .header img,
  .header-container img,
  header img,
  .hs_cos_wrapper_type_logo img,
  .footer img,
  .footer-container img,
  footer img {
    max-height: 28px !important;
  }

  .dnd-section,
  .dnd_area-row-wrapper {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  iframe[src*="meetings.hubspot"],
  iframe[src*="meetings-na"] {
    min-height: 640px;
  }
}

@media (max-width: 480px) {
  .header img,
  .header-container img,
  header img,
  .hs_cos_wrapper_type_logo img,
  .footer img,
  .footer-container img,
  footer img {
    max-height: 24px !important;
  }
}

/* ------------------------------------------------------------------------
/* ------------------------------------------------------------------------
   FORM — minimal underline aesthetic on blue background
   ------------------------------------------------------------------------ */
:root {
  /* Global */
  --hsf-global__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hsf-global__font-size: 18px;
  --hsf-global__color: #FFF5DF;
  --hsf-global-error__color: #C4604E;

  /* Form background */
  --hsf-background__background-color: #3B688A;
  --hsf-background__border-radius: 16px;
  --hsf-background__padding: 48px;

  /* Headings inside form (the "Let's get to know you") */
  --hsf-heading__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hsf-heading__color: #FFF5DF;

  /* Field labels */
  --hsf-field-label__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hsf-field-label__font-size: 16px;
  --hsf-field-label__color: #FFF5DF;
  --hsf-field-label-requiredindicator__color: #FFF5DF;

  /* Field inputs — underline-only, no box */
  --hsf-field-input__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hsf-field-input__color: #FFF5DF;
  --hsf-field-input__background-color: transparent;
  --hsf-field-input__placeholder-color: rgba(255, 245, 223, 0.4);
  --hsf-field-input__border-color: rgba(255, 245, 223, 0.4);
  --hsf-field-input__border-width: 0 0 1px 0;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 0;
  --hsf-field-input__padding: 12px 0;

  /* Textarea — same underline treatment */
  --hsf-field-textarea__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hsf-field-textarea__color: #FFF5DF;
  --hsf-field-textarea__background-color: transparent;
  --hsf-field-textarea__placeholder-color: rgba(255, 245, 223, 0.4);
  --hsf-field-textarea__border-color: rgba(255, 245, 223, 0.4);
  --hsf-field-textarea__border-width: 0 0 1px 0;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 0;
  --hsf-field-textarea__padding: 12px 0;

  /* Submit button — cream pill */
  --hsf-button__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hsf-button__font-size: 16px;
  --hsf-button__color: #141414;
  --hsf-button__background-color: #FFF5DF;
  --hsf-button__border-radius: 12px;
  --hsf-button__padding: 14px 32px;
  --hsf-button__box-shadow: none;

  /* Spacing */
  --hsf-row__vertical-spacing: 32px;
  --hsf-row__horizontal-spacing: 24px;
  --hsf-module__vertical-spacing: 24px;
}

/* Radio buttons — pill cards with circle key indicator */
--hsf-field-radio__padding: 14px 20px;
--hsf-field-radio__background-color: rgba(255, 245, 223, 0.08);
--hsf-field-radio__color: #FFF5DF;
--hsf-field-radio__border-color: rgba(255, 245, 223, 0.25);
--hsf-field-radio__border-width: 1px;
--hsf-field-radio__border-style: solid;

/* Checkboxes — same treatment for consistency */
--hsf-field-checkbox__padding: 14px 20px;
--hsf-field-checkbox__background-color: rgba(255, 245, 223, 0.08);
--hsf-field-checkbox__color: #FFF5DF;
--hsf-field-checkbox__border-color: rgba(255, 245, 223, 0.25);
--hsf-field-checkbox__border-width: 1px;
--hsf-field-checkbox__border-style: solid;

/* Tone down the radio circles — make them smaller and softer */
.hs-form input[type="radio"],
.hs-form input[type="checkbox"] {
  accent-color: #FFF5DF !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
}

/* The orphan asterisk floating above options (the "*" in your screenshot) */
.hs-form-required {
  display: none !important;
}

/* Textarea — underline only, matches inputs */
--hsf-field-textarea__font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--hsf-field-textarea__color: #FFF5DF;
--hsf-field-textarea__background-color: transparent;
--hsf-field-textarea__placeholder-color: rgba(255, 245, 223, 0.4);
--hsf-field-textarea__border-color: rgba(255, 245, 223, 0.4);
--hsf-field-textarea__border-width: 0 0 1px 0;
--hsf-field-textarea__border-style: solid;
--hsf-field-textarea__border-radius: 0;
--hsf-field-textarea__padding: 12px 0;

/* Hide orphan asterisks above radio/checkbox groups */
.hs-form-required {
  display: none !important;
}

/* Also try this if the above doesn't catch it — HubSpot sometimes uses different classes for grouped fields */
.hs-form-field > .hs-form-required,
.hs-form-booleancheckbox + .hs-form-required,
fieldset .hs-form-required,
[class*="required"][class*="indicator"]:empty,
.hs-fieldtype-radio .hs-form-required,
.hs-fieldtype-checkbox .hs-form-required {
  display: none !important;
}

/* ------------------------------------------------------------------------
   FIX: Phone country code dropdown
   ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
   FIX: Phone country code dropdown
   ------------------------------------------------------------------------ */

//* ------------------------------------------------------------------------
   FIX: HubSpot phone country dropdown
   ------------------------------------------------------------------------ */

/* The dropdown panel that opens with country list */
[class*="hsfc-PhoneInput__CountryList"],
[class*="hsfc-PhoneInput__Dropdown"],
[class*="hsfc-PhoneInput__Menu"],
[class*="hsfc-PhoneInput"] [role="listbox"],
[class*="hsfc-PhoneInput"] ul {
  background-color: #FFF5DF !important;
  background: #FFF5DF !important;
  color: #141414 !important;
  border: 1px solid rgba(20, 20, 20, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.15) !important;
  z-index: 9999 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Each country option */
[class*="hsfc-PhoneInput__Country"],
[class*="hsfc-PhoneInput__Option"],
[class*="hsfc-PhoneInput"] [role="option"],
[class*="hsfc-PhoneInput"] li {
  color: #141414 !important;
  padding: 10px 14px !important;
  background-color: transparent !important;
}

/* Hover and selected state */
[class*="hsfc-PhoneInput__Country"]:hover,
[class*="hsfc-PhoneInput__Option"]:hover,
[class*="hsfc-PhoneInput"] [role="option"]:hover,
[class*="hsfc-PhoneInput"] li:hover,
[class*="hsfc-PhoneInput__Country--selected"],
[class*="hsfc-PhoneInput__Option--highlighted"] {
  background-color: #F0E7D3 !important;
  color: #141414 !important;
}

/* Search input inside dropdown */
[class*="hsfc-PhoneInput__Search"] input,
[class*="hsfc-PhoneInput"] input[type="search"],
[class*="hsfc-PhoneInput"] input[type="text"] {
  background-color: #FFFFFF !important;
  color: #141414 !important;
  border: 1px solid rgba(20, 20, 20, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Make sure phone input wrapper stacks correctly */
.hsfc-PhoneInput,
[class*="hsfc-PhoneInput"] {
  position: relative;
  z-index: 100;
}

/* ------------------------------------------------------------------------
   6. CONTENT IMAGES & VIDEO — soft corners + drop shadow
   ------------------------------------------------------------------------ */
.hs_cos_wrapper_type_linked_image img,
.hs_cos_wrapper_type_image img,
.hs_cos_wrapper_type_image_grid img,
.hs_cos_wrapper_type_module img:not([alt*="logo" i]) {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

/* YouTube/Vimeo embeds */
iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"] {
  max-width: 100%;
  border-radius: var(--r-lg);
  border: none;
  box-shadow: var(--shadow-soft);
}

/* HubSpot native video player */
.hs-video-container,
.hs-video-wrapper,
.hs_cos_wrapper_type_video_player,
.hs_cos_wrapper_type_hubspot_video,
[class*="hs-video"],
[class*="hubspot-video"],
video,
video.hs-video {
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* The actual <video> element inside HubSpot's player */
.hs-video-container video,
.hs-video-wrapper video,
[class*="hs-video"] video {
  border-radius: var(--r-lg);
  max-width: 100%;
  height: auto;
}

/* Generic video wrappers */
.hs_cos_wrapper_type_video,
.embed-responsive,
.hs-responsive-embed {
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
}

@media (max-width: 768px) {
  /* Force the quote text to use full container width */
  .hs-elevate-testimonial-slider__quote-text,
  [class*="_hs-elevate-testimonial-slider__quote-text"] {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Make sure content container fills the slide width — no narrow column */
  .hs-elevate-testimonial-slider__content-container,
  [class*="_hs-elevate-testimonial-slider__content-container"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Slide padding — give arrows room but use most of width */
  .splide__slide,
  blockquote.hs-elevate-testimonial-slider__slide,
  blockquote[class*="_hs-elevate-testimonial-slider__slide"] {
    padding: 1.5rem 3rem !important;
  }

  /* Customer/Client label — slightly darker for readability */
  .hs-elevate-testimonial-slider__author-title,
  [class*="_hs-elevate-testimonial-slider__author-title"] {
    opacity: 1 !important;
    color: rgba(255, 245, 223, 0.8) !important;
  }

  /* If image missing, hide empty image container so it doesn't add space */
  .hs-elevate-testimonial-slider__image-container:empty,
  [class*="_hs-elevate-testimonial-slider__image-container"]:empty,
  .hs-elevate-testimonial-slider__image-container:not(:has(img)),
  [class*="_hs-elevate-testimonial-slider__image-container"]:not(:has(img)) {
    display: none !important;
  }
}