/* ==========================================================================
   Augusta Pediatric Associates — Contact Us, left column

   What was there: a flat sky-blue half with a crown, one phone number and a
   great deal of nothing. Most of the column was not missing — it was invisible.
   `CONTACT US`, the after-hours line and two of the three phone rows carry the
   theme's `animation bottom-to-top` class, which parks them at `opacity: 0`
   waiting for a reveal that never fires on this page. Same trap as the doctors
   band on the bio pages.

   What it is now: the landing page's drifting blue checkerboard behind a stack
   of soft white cards — the heading, then every way to reach the practice,
   including the address and the hours, which the page never carried at all.
   ========================================================================== */

:root {
  --apa-ct-navy:  #224d7b;
  --apa-ct-sky:   #4987c6;
  --apa-ct-body:  #45536d;
  --apa-ct-red:   #c9283f;
}

/* --------------------------------------------------------------------------
   1 · The ground
   --------------------------------------------------------------------------
   The same tile as the home page's "We're ready, let's talk" band, pinned to a
   fixed height so the squares never grow with the viewport, and drifting
   sideways the way the band behind the home buttons does. One tile per 90s is
   about 23px a second: you notice it if you look at it, and not otherwise.

   The veil over it is what lets white type sit on a pattern of white squares.
   -------------------------------------------------------------------------- */

/* Static, and at the size the pattern is everywhere else on the site: the tile
   pinned to 355px tall, which is what it rendered at in the home page's band.
   Both columns already carry the theme's `padding: 10% 13%`, so leaving that
   alone is what puts this column's first line exactly level with REQUEST A
   ROUTINE APPOINTMENT on the other side — 74.6px down from the top of both. */
/* The theme makes this inner a COLUMN flex box with `justify-content: center`,
   so the vertical axis is the main axis — `align-items` here controls the
   horizontal one and does nothing for the top edge. `justify-content` is the
   property that lands the first line level with the form's heading. */
.apa-contact-side > .vc_column-inner {
  position: relative;
  display: flex;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* the theme's row centres it */
  align-items: stretch;
  background-color: var(--apa-ct-sky) !important;
  background-image: url('/wp-content/uploads/2020/10/APA_CheckerboardBlue_Pattern-scaled.jpg?id=529') !important;
  background-repeat: repeat !important;
  background-size: auto 355px !important;
  background-position: center top !important;
  overflow: hidden;
}

.apa-contact-side > .vc_column-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg,
              rgba(29, 66, 107, .78) 0%,
              rgba(34, 77, 123, .58) 52%,
              rgba(45, 99, 156, .50) 100%);
  pointer-events: none;
}

.apa-contact-side > .vc_column-inner > .wpb_wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  margin: 0;              /* flush with the column padding, like the form */
}

/* the reveal that never fires */
.apa-contact-side .animation,
.apa-contact-side .animation-true {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   2 · The heading
   -------------------------------------------------------------------------- */

.apa-contact-side h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .005em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.apa-contact-side > .vc_column-inner > .wpb_wrapper > .wpb_text_column p {
  margin: 0 0 6px;
  max-width: 26rem;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  line-height: 1.7;
}

.apa-contact-side .wpb_text_column a,
.yellow-links .apa-contact-side .wpb_text_column a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 255, 255, .5);
  transition: text-decoration-color .25s ease;
}

.apa-contact-side .wpb_text_column a:hover { text-decoration-color: #fff; }

/* Sized so the stack ends level with the Send button opposite — removing the
   crown took ~68px out of this column and left the two sides out of step. */
.apa-contact-side .vc_empty_space { height: 30px !important; }

/* --------------------------------------------------------------------------
   3 · The detail cards
   --------------------------------------------------------------------------
   Five rows, one shape: phone, fax, second fax, address, hours. The first
   three are the theme's `thb-iconbox`; the last two are the same markup, added
   because the page carried neither an address nor an opening time.
   -------------------------------------------------------------------------- */

.apa-contact-side .thb-iconbox {
  display: flex !important;
  align-items: center;
  gap: 16px;
  margin: 0 0 10px !important;
  padding: 15px 20px !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 2px rgba(11, 33, 58, .12);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              box-shadow .45s cubic-bezier(.16, 1, .3, 1),
              background-color .3s ease;
}

.apa-contact-side .thb-iconbox:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 14px 30px rgba(11, 33, 58, .22);
}

.apa-contact-side .thb-iconbox figure {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff4fa;
}

.apa-contact-side .thb-iconbox figure svg {
  width: 26px;
  height: 26px;
}

/* the theme's icons hard-code `stroke="#000"` on the group */
.apa-contact-side .thb-iconbox figure svg g,
.apa-contact-side .thb-iconbox figure svg path,
.apa-contact-side .thb-iconbox figure svg circle {
  stroke: var(--apa-ct-navy) !important;
}

.apa-contact-side .iconbox-content { min-width: 0; }

/* the theme writes `font-size: 22` — no unit, so the declaration is dropped
   and the row fell back to whatever the column set */
.apa-contact-side .thb-iconbox h5 {
  margin: 0 0 2px !important;
  font-size: 18px !important;
  line-height: 1.25;
  font-weight: 600;
  color: var(--apa-ct-navy) !important;
}

.apa-contact-side .thb-iconbox h5 a {
  color: inherit !important;
  text-decoration: none;
  transition: color .2s ease;
}

.apa-contact-side .thb-iconbox:hover h5 a { color: var(--apa-ct-red) !important; }

.apa-contact-side .thb-iconbox p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--apa-ct-body) !important;
}

/* --------------------------------------------------------------------------
   4 · Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .apa-contact-side > .vc_column-inner { justify-content: flex-start !important; }
}

/* --------------------------------------------------------------------------
   5 · The form beside it
   --------------------------------------------------------------------------
   The theme set this form for a column with nothing else in it: a 96px
   heading, 48px fields and 16px between every row, which ran it ~300px past
   the bottom of the details opposite. Tightened so the Send button lands level
   with the opening hours, and the whole thing is reachable without scrolling
   twice.
   -------------------------------------------------------------------------- */

.apa-contact-form h1 {
  margin: 0 0 10px !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.06 !important;
}

.apa-contact-form .wpb_text_column p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
}

.apa-contact-form .vc_empty_space { height: 18px !important; }

.apa-contact-form form p {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.apa-contact-form form label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .02em;
}

/* the `<br>` after each label is the theme's row spacing; the label is a block
   now, so the break only adds an empty line */
.apa-contact-form form label + br { display: none; }

.apa-contact-form form input[type="text"],
.apa-contact-form form input[type="tel"],
.apa-contact-form form input[type="email"],
.apa-contact-form form input[type="date"],
.apa-contact-form form select {
  height: 40px !important;
  min-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 15px !important;
}

.apa-contact-form form input[type="submit"] {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 34px !important;
}