/*
Landlords page rebuild (V3) -- Hero right-hand card, "Try It Here" button,
Trustpilot mini widget under the left-hand bullet list, and the persistent
"Landlords - get in touch" slide-out (tab + panel + HubSpot form fields).

Loaded only where the slide-out markup exists -- either via
get_template_part( 'partials/landlord-slideout' ) or the legacy Block: Content
HTML (see yellowball_enqueue_landlord_slideout_assets). Scope is intentionally NOT prefixed
with a wrapper class: several rules (.hs_firstname, .hs-button, .hbspt-form,
the .hs-form-* HubSpot field classes) already match the theme's existing,
un-scoped naming convention -- these are HubSpot's own generated class names,
not ours, so scoping them under a parent selector would just make every rule
more specific for no benefit, and the whole point of loading this file only
on this one page is that it never reaches any other page in the first place.

If the site later gets more HubSpot forms elsewhere with different intended
styling, these .hs_* / .hbspt-form rules will need scoping at that point --
they don't need it today because this file simply isn't loaded anywhere else.
*/

/* ---- Hero right-hand card ------------------------------------------------ */

#sign-up-banner{
  padding: 0 !important;
}

.hbspt-form{
  font-family: "Noto Sans";
  padding: 40px;
  background-color: white;
  border-radius: 12px;
  width: 100%;
  max-width: 648px;
}

.toolkit-cta p{
  font-family: "Noto Sans";
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: black;
  margin-bottom: 16px;
}

.hs-button{
  display: inline-block;
  padding-block: 15px;
  padding-inline: 30px;
  align-items: center;
  background-color: rgb(255, 123, 172) !important;
  border-radius: 50px;
  font-family: "Noto Sans";
  font-size: 17px;
  letter-spacing: 5px;
  line-height: 1.5;
  border: none !important;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #000;
  cursor: pointer;
  transition: 500ms;
  height: auto !important;
}
.hs-button:hover{
  transform: matrix(0.95, 0, 0, 0.95, 0, 0);
}

@media (width <= 479px) {
  .hbspt-form { padding: 20px; }
}

/* ---- Trustpilot mini widget, hero left column ----------------------------- */

.hero-left-trust{
  margin-top: 24px;
  /* reserve the widget's height so nothing jumps when the async Trustpilot
     iframe finishes loading */
  min-height: 110px;
}
.hero-left-trust .trustpilot-widget{
  width: 220px;
  max-width: 100%;
}

/* ---- Slide-out tab + panel ------------------------------------------------ */

.landlord-slideout__tab{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2147482999;
  background-color: rgb(255, 123, 172);
  color: #000;
  border: none;
  border-radius: 10px 0 0 10px;
  padding: 54px 34px;
  font-family: "Noto Sans";
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.landlord-slideout__tab:hover{ transform: translateY(-50%) translateX(-4px); }

.landlord-slideout__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2147482999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.landlord-slideout.is-open .landlord-slideout__backdrop{
  opacity: 1;
  pointer-events: auto;
}

.landlord-slideout__panel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 90vw;
  background: #fff;
  z-index: 2147483000;
  padding: 48px 32px 32px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.2);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.landlord-slideout.is-open .landlord-slideout__panel{
  transform: translateX(0);
}
.landlord-slideout__panel h2{
  font-family: "Noto Sans";
  font-size: 25px;
  margin-bottom: 20px;
}

.landlord-slideout__close{
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #323e48;
  padding: 4px 8px;
}
.landlord-slideout__close:focus-visible,
.landlord-slideout__tab:focus-visible{
  outline: 3px solid #323e48;
  outline-offset: 2px;
}

/* Switch to a full-width bar pinned to the bottom edge on phones (portrait)
   AND on any viewport too short for the 596px-tall vertical tab -- phones in
   landscape are only ~375-430px tall, so the vertical tab was being clipped at
   both ends there. The 640px height ceiling sits below the shortest common
   laptop (720px), so the desktop tab above is left exactly as-is. */
@media (max-width: 768px), (max-height: 640px){
  .landlord-slideout__tab{
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    transform: none;
    writing-mode: horizontal-tb;
    border-radius: 0;
    text-align: center;
    /* Font scales with viewport width so the full label stays on one line
       (white-space: nowrap above) all the way down to a 320px-wide phone --
       at a flat 26px it overflowed and "GET IN TOUCH" was clipped to "GET IN TOU". */
    padding: 22px 12px;
    font-size: clamp(14px, 4.8vw, 26px);
    letter-spacing: 1px;
  }
  .landlord-slideout__tab:hover{ transform: none; }
  .landlord-slideout__panel{
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .landlord-slideout.is-open .landlord-slideout__panel{
    transform: translateY(0);
  }
}

/* Landscape phones specifically (<=500px tall). Vertical space is scarce, so
   keep the bar slim and let the panel use the full height. Deliberately a
   tighter ceiling than the 640px above, so a 360x640 phone in PORTRAIT keeps
   the chunky bar and only true landscape gets the slim one. */
@media (max-height: 500px){
  .landlord-slideout__tab{
    padding: 11px 12px;
    font-size: clamp(13px, 2.4vw, 19px);
  }
  .landlord-slideout__panel{
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 40px 24px 24px;
  }
}

/* Lift HubSpot's "Refer & Earn" web interactive clear of the CTA bar.
   HubSpot fixes its container at bottom:10px, which put it directly under the
   bar; because the bar paints far above it (z-index 2147482999 vs 9999) the
   pop-up's own "Refer Now" button ended up hidden behind it -- 82% overlap in
   portrait, 40% in landscape.
   Matched by id PREFIX: the numeric suffix is the interactive's content id
   (356991465662 today) and would change if the interactive is ever replaced.
   Same two breakpoints as the tab above, so landscape phones -- which are wider
   than 768px and so never hit the width query -- are covered too.
   Only ever loaded on this page, so no other HubSpot pop-up on the site moves. */
@media (max-width: 768px), (max-height: 640px){
  [id^="hs-overlay-cta-"]{
    bottom: 80px !important;
  }
}

/*
.landlord-slideout__tab-wrap / __close-wrap: these two wrapper classes exist
in the page HTML purely to work around a WordPress core quirk, not for any
visual purpose -- they need no rules here. See the "wpautop() gotcha" note in
the HTML content that gets pasted into the block editor: wpautop() forces a
blank line immediately next to any tag it recognizes as block-level, but
<button> is NOT on that list, so a <button> sitting directly next to a
recognized block tag gets a stray line break (and then a stray </p>)
manufactured next to it regardless of how the source HTML was formatted.
Wrapping each <button> in its own plain <div> sidesteps this, because every
tag transition in the markup then becomes div-to-div, which wpautop's own
"unwrap block tags from <p>" logic handles cleanly. The wrapper divs have no
layout purpose (their only children are position:fixed / position:absolute,
already out of flow), which is exactly why they don't need a rule here.
*/

.contoblock:has(#landlord-slideout){
  display: none;
}

/* ---- HubSpot form field styles (client-supplied, reused verbatim) -------- */

.hs_firstname,
.hs_lastname,
.hs_email,
.hs_phone,
.hs-fieldtype-select,
.hs-fieldtype-textarea{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
}
.hs_firstname .hs-input,
.hs_lastname .hs-input,
.hs_email .hs-input,
.hs_phone .hs-input,
.hs-fieldtype-select .hs-input{
  font-family: "Noto Sans";
  background-color: rgb(0, 0, 0, 0.15);
  border-radius: 10px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
  height: 42px;
  padding-inline: 20px;
  border: none;
  width: 100%;
  box-sizing: border-box !important;
}
.hs_firstname span,
.hs_lastname span,
.hs_email span,
.hs_phone span,
.hs-fieldtype-select span,
.hs-fieldtype-textarea span{
  color: black;
  letter-spacing: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.57;
  text-transform: uppercase;
}
.hs_firstname label,
.hs_lastname label,
.hs_email label,
.hs_phone label,
.hs-fieldtype-select label,
.hs-fieldtype-textarea label{
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100% !important;
}
.hs_firstname span.hs-form-required,
.hs_lastname span.hs-form-required,
.hs_email span.hs-form-required,
.hs_phone span.hs-form-required,
.hbspt-form span.hs-form-required,
.landlord-slideout__panel span.hs-form-required{
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgb(255, 0, 0);
  letter-spacing: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.57;
  text-transform: uppercase;
}
.hs-fieldtype-select select{ appearance: none; }
.hs-fieldtype-select .input{ position: relative; }
.hs-fieldtype-select .input::after{
  position: absolute;
  content: "";
  width: 18px;
  height: 12px;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(-90deg);
  background-image: url("/wp-content/themes/yellowball/img/chevron-left.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hs-fieldtype-textarea .hs-input{
  font-family: "Noto Sans";
  background-color: rgb(0, 0, 0, 0.15);
  border-radius: 10px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
  height: 90px;
  padding-block: 21px;
  padding-inline: 20px;
  border: none;
  width: 100% !important;
  box-sizing: border-box !important;
}
.form-columns-2{
  width: auto;
  max-width: 100% !important;
  column-gap: 2%;
  margin-bottom: 17px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.form-columns-1{
  width: 100%;
  max-width: 100% !important;
  column-gap: 2%;
  margin-bottom: 17px !important;
}

/* Custom pink circular checkbox. The real <input> stays present (not
   display:none) and is layered transparently on top of the visible circle
   so a click always lands on the real control -- display:none inputs are
   not reliably clickable via label-forwarding across browsers. */
.hs-form-booleancheckbox-display{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.hs-form-booleancheckbox-display .hs-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* The checkbox's own required-asterisk span is nested INSIDE its label
   sentence ("...privacy policy.<span class="hs-form-required">*</span>"),
   not a standalone field label like EMAIL's -- override the generic
   flex-column rule above so it stays inline with the sentence instead of
   wrapping onto its own line. */
.hs-form-booleancheckbox-display span.hs-form-required{
  display: inline !important;
  flex-direction: unset !important;
  gap: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
.hs-form-booleancheckbox-display::before{
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgb(220, 220, 220);
  display: block;
}
.hs-form-booleancheckbox-display::after{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  background-color: rgb(255, 123, 172);
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  transition: all 0.4s;
  opacity: 0;
}
.hs-form-booleancheckbox-display:has(input:checked)::after{ opacity: 1; }
.hs-form-booleancheckbox::marker{ display: none; }
.hs-form-booleancheckbox-display span{
  font-family: "Noto Sans";
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: capitalize;
  color: black;
}
.hs-form-booleancheckbox-display a{
  font-family: "Noto Sans";
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgb(255, 123, 172) !important;
  text-decoration: underline solid rgb(255, 123, 172) !important;
}
.legal-consent-container{ margin-top: 0 !important; }
.legal-consent-container .hs-form-booleancheckbox-display > span{ text-transform: none !important; }

.hs-error-msgs{
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  color: red !important;
}
.hs-error-msgs li label{
  color: red !important;
  font-size: 15px !important;
  text-transform: none !important;
}

.hs-richtext{
  font-family: "Noto Sans";
  padding-inline: 8px;
  padding-block: 6px;
  border: 1px solid rgb(221, 221, 221);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: black;
  overflow-y: scroll;
}

.hbspt-form .hs-input:focus,
.landlord-slideout__panel .hs-input:focus{
  outline: none !important;
  box-shadow: none !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.hbspt-form .inputs-list,
.landlord-slideout__panel .inputs-list{
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

@media (width <= 768px){
  .form-columns-2{ display: flex; flex-flow: column; gap: 16px; }
}
@media (width <= 479px){
  .form-columns-2 input{ width: 100% !important; }
}