/* ==========================================================================
   mobile-fixes.css
   Targeted fixes for mobile / small-screen rendering problems reported by QA
   plus a few related issues found during review. Loaded LAST so these rules
   win over the theme and per-page template stylesheets.

   Issues addressed:
   1. Homepage carousel caption ("YOUR TIME IS VALUABLE" etc.) text bleeding
      out of the white rounded box on phones, because .bg-centenal had a
      fixed pixel height and a fixed pixel width.
   2. Community Engagement YouTube embed (fixed 560x315 iframe) overflowing
      the viewport and forcing horizontal scroll on phones.
   3. Contact page (and other content pages) top heading getting cut off on
      phones, plus an invalid "padding-top:0xp" typo in the theme.
   4. General horizontal-overflow guard so nothing forces sideways scrolling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4. Global: stop any stray element from forcing horizontal scroll.
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* The fixed nav bar (.ZoneNav1) is position:fixed. Keep it from being wider
   than the screen, but DO NOT set overflow here: the desktop dropdown menus
   are positioned outside the nav box and any overflow clipping (even
   overflow-x) would hide them. */
.ZoneNav1 {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. Responsive video embeds.
   The Community Engagement page has a raw <iframe width="560" height="315">
   with no responsive wrapper, so on any screen narrower than 560px it ran
   off the edge. Make YouTube (and any other) embeds scale down to fit while
   keeping a 16:9 aspect ratio.
   -------------------------------------------------------------------------- */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="youtube-nocookie.com"] {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

/* Fallback for older engines without aspect-ratio support: cap the width and
   let the height scale proportionally via a sensible min-height. */
@supports not (aspect-ratio: 16 / 9) {
  iframe[src*="youtube.com"],
  iframe[src*="youtu.be"],
  iframe[src*="youtube-nocookie.com"] {
    height: 56.25vw;      /* 9/16 of the viewport width */
    max-height: 315px;
  }
}

/* --------------------------------------------------------------------------
   3. Contact / content pages: fix the invalid "0xp" typo and make sure the
   page heading is never flush against (or clipped by) the top on mobile.

   The theme has: @media (max-width:767px){ .navpadding-top50{padding-top:0xp} }
   "0xp" is not a valid length, so the declaration was dropped and the top
   spacing was inconsistent. Restore a small, valid top padding on phones.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .navpadding-top50 {
    padding-top: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   1. Homepage carousel caption white box ("bg-centenal").
   The theme sets a FIXED height (278px / 310px) and a FIXED width (580/600px)
   on .bg-centenal. The longest slide ("YOUR TIME IS VALUABLE") has more text
   than fits in that fixed height on a phone, so it spilled out the bottom of
   the white box and onto the photo. Let the box grow with its content and
   size its width fluidly.

   IMPORTANT: these overrides are scoped to mobile ONLY. On desktop the theme
   uses a fixed-height, absolutely-positioned .bg-centenal box together with
   absolutely-positioned slide indicator dots; changing the box height at
   desktop widths shifts those dots into the text, so desktop is left as-is.
   -------------------------------------------------------------------------- */

/* Phones: give the caption room, keep it inside the viewport, and let it flow
   below/over the image cleanly instead of being absolutely clipped. */
@media screen and (max-width: 767px) {
  .carousel .carousel-item {
    height: auto !important;
  }

  .carousel-item img {
    position: relative !important;
    height: auto !important;
    max-height: 260px;
    width: 100%;
    object-fit: cover;
  }

  .carousel-caption {
    position: static !important;
    padding: 0 !important;
  }

  .bg-centenal {
    position: static !important;
    width: auto !important;
    max-width: 92% !important;
    height: auto !important;
    margin: 0 auto !important;  /* sit cleanly below the photo; never overlap it */
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    border-radius: 20px 20px 0 0;
    padding: 18px 20px !important;
  }

  /* Make sure the caption text itself is allowed to wrap and not clipped. */
  .carousel .carousel-item .carousel-caption h2,
  .carousel-caption p {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* NOTE: no override for the 768-991px (tablet) range. From 768px up the theme
   switches the carousel to its fixed-height, absolutely-positioned layout with
   absolutely-positioned indicator dots. Resizing .bg-centenal there pushes the
   dots into the caption text (the exact bug we are avoiding), so the theme's
   original tablet/desktop layout is left untouched. Our overrides apply only
   at <=767px. */

/* --------------------------------------------------------------------------
   5. Long visible URLs (Contact page "Secure Portal" / "Payment Link" show
   the full URL as link text). On a narrow phone these unbreakable strings
   pushed the layout wider than the screen. Allow them to wrap.
   -------------------------------------------------------------------------- */
.lnkoffice a,
.contactblock,
a[href^="http"] {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Body copy: let long unbroken strings (e.g. slash-separated lists like
   "partners/stockholders/beneficiaries/members", long URLs, or long words)
   wrap instead of running off the right edge on narrow screens. */
p, li, dd, dt, td, th, .contactblock, blockquote, figcaption {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Keep any responsive images from ever exceeding their container on mobile. */
img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   3b. Fixed navbar clearance on content pages (the real cause of the Contact
   page "cut off at the top" report).

   .ZoneNav1 is position:fixed, so it's lifted out of normal flow and overlaps
   whatever comes first in <main>. On the 16 pages that open with a full-bleed
   .hometopimg banner, that banner sits behind the nav by design, so it's fine.
   But on the 5 pages with no banner (contact, accessibility, acquisitions,
   careers, terms) the first heading (e.g. "Contact Centenal") renders UNDER
   the fixed nav and is hidden.

   On mobile the fixed nav is ~138px tall (large logo + hamburger). Give <main>
   enough top clearance to clear it, but ONLY when there's no .hometopimg
   banner absorbing that space.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  main#main-content:not(:has(.hometopimg)):not(:has(.careerstopimg)) {
    padding-top: 150px;
  }
}

/* Fallback for browsers without :has() support: apply a body class instead.
   (The 5 bannerless pages can carry class "no-hero" on <body> if needed.) */
@media screen and (max-width: 767px) {
  body.no-hero main#main-content {
    padding-top: 150px;
  }
}

/* Also make in-page anchor targets (e.g. #services, #offices used by the nav
   dropdowns) account for the fixed header so they don't land under it. */
:target,
[id="services"],
[id="offices"],
[id="why-centenal"],
[id="main-content"] {
  scroll-margin-top: 150px;
}

/* --------------------------------------------------------------------------
   6. Office-page staff photos ("OUR STAFF" grid on folsom-ca / santa-ana).
   The theme frames each photo in a fixed 160x210 box (.chamberlogopic) but
   uses object-fit:contain on the image with no width cap. The source photos
   have different aspect ratios (160x200, 400x456, 256x256 square, 182x182,
   ...), so "contain" fit each one differently inside the box and the visible
   photos ended up different sizes/shapes.

   Make every photo fill the same 160x210 frame with object-fit:cover so they
   all render at an identical size (cropping to fit, like a uniform headshot
   grid). Applies at all widths.
   -------------------------------------------------------------------------- */
.chamberlogopic {
  width: 160px;
  max-width: 100%;
  height: 210px;
  overflow: hidden;
}

.chamberlogopic img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center top;  /* keep faces (near the top) in frame when cropping */
  padding-top: 0 !important;    /* theme added inline padding-top:10px that skews the fill */
}

/* On mobile the staff cells stack full-width (col-sm-12/col-xs-12). The photo
   frame is a fixed 160px block that defaults to the left edge, while the name
   below it is centered across the full width, so the name floated off to the
   right of the photo. Center the photo frame too so photo and caption line up. */
@media screen and (max-width: 767px) {
  .chamberlogopic {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. Accessibility (WCAG 2.1 AA) fixes found during the audit.
   -------------------------------------------------------------------------- */

/* 7a. Privacy page links were bright yellow (#fec33e) on white (~1.6:1). The
   rest of the site was moved to dark blue for contrast, but the privacy page
   kept its own !important yellow rule. Bring it in line (dark blue #004a65 on
   white is ~9.7:1) and keep an underline so links aren't color-only. */
.privacy-content a {
  color: #004a65 !important;
  text-decoration: underline;
}
.privacy-content a:hover,
.privacy-content a:focus {
  color: #008dbf !important;
}

/* 7b. The "Our Staff" heading on offices.html is an <h4 class="H4"> at 18px
   bold in #008dbf on white (~3.1:1, below the 4.5:1 needed at that size).
   Darken it to the site's heading navy for compliant contrast. */
.H4 {
  color: #004a65 !important;
}

/* --------------------------------------------------------------------------
   8. Long nav dropdown item names run off the screen on mobile.
   Bootstrap sets .dropdown-item { white-space:nowrap }, so a long label such
   as "Assurance, Audit and Attest Services (Financial Statement Audit,
   Review and Compilations)" cannot wrap and overflows the viewport. Allow the
   menu items to wrap onto multiple lines and keep them within the menu width.
   -------------------------------------------------------------------------- */
.dropdown-menu .dropdown-item {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* The default 28px line-height (2x the 14px font) spread wrapped item names
     ("Tax Preparation / and Planning") far apart. Tighten the line spacing so a
     wrapped name reads as one unit, and add a little vertical padding so
     separate items still have clear space between them. */
  line-height: 1.3;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Keep the open dropdown menu itself from exceeding the screen width. */
.dropdown-menu {
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   9. Dropdown item selected/active state contrast.
   Bootstrap's .dropdown-item.active/:active sets white text on bright blue
   (#007bff). But the site forces link color to navy with `a{color:#004a65
   !important}`, so the white never applies and you get dark-navy text on a
   bright blue box (the hard-to-read "blue box" when a menu item is tapped or
   selected). Replace that with a light neutral background so the navy text
   stays high-contrast and on-brand, matching the hover style.
   -------------------------------------------------------------------------- */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: #eef3f5 !important;  /* light blue-gray */
  color: #004a65 !important;             /* navy text (~8:1 on the light bg) */
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. Service-page title/subhead typography on mobile.
   On phones the big page title (.h1title) shrinks to 26px but keeps a 46px
   line-height and 2px letter-spacing, so a wrapped uppercase title looks very
   spread out. And the subhead (.H4) renders at 26px with only a 20px
   line-height, so when it wraps to two lines they crowd together.
   Tighten the title spacing and give the subhead room to breathe. Mobile only;
   the desktop layout is unchanged.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .h1title {
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
  }
  .H4 {
    line-height: 1.25 !important;
  }
}

/* --------------------------------------------------------------------------
   11. Homepage service list spacing on mobile.
   The service links (.hbullet) use a large line-height (40px/55px) on 18px
   text. On desktop each name is one line, so that tall line-height just acts
   as spacing between items. But on mobile the longer names wrap to two lines,
   and the 40px line-height pushes those two lines far apart, so a single
   service ("TAX PREPARATION AND" / "PLANNING") looks like two separate items.

   On mobile: tighten the line-height so a wrapped name reads as one unit, and
   move the separation between items to real vertical padding instead.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .hbullet {
    line-height: 1.3 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   12. Careers page fixes.
   (a) The careers page has its own hero image banner (.careerstopimg), not the
   background-image .hometopimg used elsewhere, so it isn't a "no-hero" text
   page. It was carrying the no-hero class, which added 150px of top padding
   and left a big white gap above the banner. The no-hero class has been
   removed from the page; here we just make sure the banner clears the fixed
   nav on mobile (the nav is ~138px tall and out of flow).
   (b) The trademark symbol in the hero <h2> rendered full size; shrink it to a
   proper superscript, and give the heading room so its lines don't overlap.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* The careers hero container (.careerstopimg) already has a large top padding
     (150px) that pushed the photo way down, leaving a big white gap under the
     fixed nav. Reduce it to just clear the ~138px nav with a small margin.
     (No extra padding on #careers itself — that was double-counting.) */
  .careerstopimg {
    padding-top: 120px !important;
  }
}

/* Hero heading line spacing (was overlapping on mobile). */
#careers .content h2 {
  line-height: 1.3;
}

/* Trademark symbol: render small. The ™ is wrapped in <sup class="tm"> in the
   markup, so <sup> handles the raise; we just shrink it. */
sup.tm {
  font-size: 0.5em;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   13. Mobile dropdown menus wouldn't close on a second tap.
   Two systems control the nav dropdowns: an inline jQuery .hover() handler
   that toggles an ".open" class (for desktop hover), and Bootstrap's
   data-toggle="dropdown" that toggles ".show" on click. The theme CSS has
   ".dropdown.open .dropdown-menu{display:block}".

   On a touch screen the first tap fires a synthetic mouseenter that adds
   ".open" (and it never gets a mouseleave to remove it). So even after a
   second tap makes Bootstrap remove ".show", the leftover ".open" keeps the
   menu displayed - it never closes.

   Fix: on mobile, don't let the hover ".open" class force the menu open. Let
   Bootstrap's ".show" be the single source of truth, so tapping the toggle
   again closes the menu. Desktop hover (>=768px) is unaffected.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .dropdown.open .dropdown-menu:not(.show) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   14. Terms/no-hero pages: trim redundant top padding on mobile.
   The no-hero pages already get 150px of top padding on <main> to clear the
   fixed nav (see #3b). The Terms page ALSO has padding-top50 on its container
   and padding-top60 on the heading block, which stack on top of that 150px and
   leave a big empty gap above the heading. On mobile, drop that redundant top
   padding so the heading sits just below the nav like the other no-hero pages
   (e.g. Contact). Desktop is unaffected.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  body.no-hero main .container.padding-top50 {
    padding-top: 0 !important;
  }
  body.no-hero main .container .padding-top60 {
    padding-top: 20px !important;
  }
}