/* =========================================================
   EXISTING LIVE RULES — reproduced verbatim from the current
   production zs-customcss.css (fetched 2026-08-21) so this
   file can be pasted into Zoho's Custom CSS panel as a full
   replacement without losing prior fixes. The local copy of
   this file in the downloaded snapshot was empty/stale.
   ========================================================= */

/* Responsive fix: header logo is hardcoded to width:500px;height:202.5px via inline
   style on every page, with no rule anywhere to shrink it. The compact mobile header
   (small logo) only shows below 992px; from 992px up, the full header renders with
   this oversized fixed logo, cramming the nav/search/cart into the remaining space.
   This is most visible on tablets in landscape (1024-1366px wide) and small desktop
   windows just above 992px. Overriding it responsively below. */

.theme-branding-info .theme-logo-parent a img[data-zs-logo] {
  max-width: 100% !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .theme-branding-info .theme-logo-parent a img[data-zs-logo] {
    width: 220px !important;
    height: auto !important;
  }
}

/* Stuck "current page" highlight in dropdown submenus.
   The theme marks the nav item matching the current page with class
   theme-menu-selected, but after clicking a submenu link and then
   soft-navigating elsewhere (e.g. Home), that class isn't cleared - so the
   last-clicked submenu item keeps showing as "selected" even though it's
   no longer the current page. Confirmed via live DevTools inspection that
   the real selector is
   .theme-navigation-and-icons .theme-menu-area .theme-menu ul li.theme-menu-selected>a
   (the earlier .theme-sub-menu guess was based on the stale downloaded
   snapshot and never matched the live theme).

   IMPORTANT: do not set background to transparent/none here - every
   submenu item normally has an opaque background:#FFFFFF pill
   (ul li ul li a{background:#FFFFFF}). Making the selected one transparent
   exposes the page's background photo behind the dropdown instead, which
   itself looks like a stray line/shadow (it's the photo, not a border).
   Instead, force the SAME solid white + default text color as its
   unselected siblings so it's visually identical - no highlight, no
   see-through gap. */
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li.theme-menu-selected > a {
  background: #FFFFFF !important;
  color: #111111 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove the auto-generated category name heading ("Workbooks", "Enrollment", etc.)
   on collection/category pages. This is theme template markup shared by every
   category page (<div class="theme-category-name"><h1 class="theme-category-heading">),
   not a page-builder element - so it's hidden via CSS rather than deleted per-page. */
.theme-section-heading {
  display: none !important;
}

/* Style links in the Registration row as buttons */
table tr:nth-child(3) td a {
  display: inline-block;
  background-color: #1e293b; /* Match your button color */
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.2s ease;
}

table tr:nth-child(3) td a:hover {
  background-color: #0f172a;
}

/* =========================================================
   NEW MOBILE-RESPONSIVENESS FIXES — added 2026-08-21.

   Root cause shared by nearly every rule below: this theme lets
   the site owner set separate spacing/sizing per breakpoint, but
   across the whole site only a couple of elements actually carry
   a mobile-specific override - most headings/tables/images were
   sized once for desktop and never revisited for phones.

   Breakpoint choice: standardized on max-width:768px, matching
   the live theme's own dominant convention (768px used 75x vs
   767px used 0x in the theme's style.css). Two rules below
   (Job Opportunities blockquote indent, Private Lessons image)
   intentionally use 991px instead, because their root cause is
   the page grid's min-width:992px column-stacking threshold, not
   a phone-specific size issue.

   Two rules below (Private Lessons empty-paragraph spacers, and
   the Club Calendar / Contact Us iframe heights) are marked
   VERIFY - they're reasoned, evidence-based starting points, not
   confirmed-correct pixel values. Check them on an actual phone
   after publishing and adjust if needed; see the plan/verification
   notes shared alongside this file for the page-by-page checklist.
   ========================================================= */

/* Item 1 - Home hero title too big on mobile.
   "Way of the Board Chess Club" is a flat inline
   style="font-size:64px" span with no mobile override anywhere;
   the theme's blanket heading line-height:1.8 then turns each
   wrapped line into a huge vertical slab. Shrinking font-size
   alone isn't enough - line-height needs tightening too. */
@media (max-width: 768px) {
  [data-element-id="elm_Eu6hTIZZyhiopMJX2NTa5A"] p[style*="font-size:64px"] {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }
}

/* Items 2 & 5 - Enrollment and Upcoming Tournaments table gaps.
   Both pages use the same Zoho table widget: 5 columns forced to
   inline %-widths summing to 100%, no cell padding/responsive
   rule anywhere. On a ~375px phone that crushes each column to
   ~60-90px and breaks words mid-letter. Fix: let the table scroll
   horizontally at a sane minimum width instead of fighting the
   existing % widths - they resolve against 640px instead of the
   viewport width, which is wide enough to stop the word-breaking.
   Also benefits Workbooks for free if it uses the same widget. */
@media (max-width: 768px) {
  .zpelem-table .zptable {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .zpelem-table .zptable table {
    width: auto !important;
    min-width: 640px !important;
  }
  .zpelem-table .zptable table td,
  .zpelem-table .zptable table th {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }
}

/* Item 4 - Private Lessons page gaps.
   The body-copy block uses six manually-inserted empty
   <p style="font-size:18px;"><br></p> paragraphs as blank-line
   spacers (line-height:32px each) between the intro/fees/time-slots/
   next-steps sections - on a short phone viewport these compound
   into noticeable dead space while scrolling. Hides just those
   empty spacer paragraphs on mobile, not real content.
   VERIFY: check this is really the gap the user means (vs. the
   adjacent hero image, which also has a desktop-only size rule
   with no mobile counterpart) before treating this as final. */
@media (max-width: 768px) {
  [data-element-id="elm_whOhPMUAqq8aEaHxXZTJVQ"] p:has(> br:only-child) {
    display: none !important;
  }
}

/* Item 7a - Afterschool Chess Tournaments heading too big on mobile.
   Same pattern as item 1: inline style="font-size:48px" with no
   mobile override, theme's line-height:1.8 turns wrapped lines
   into oversized gaps. */
@media (max-width: 768px) {
  [data-element-id="elm_95mmm0Mito38sZp0Bzp-LA"] {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
}

/* Item 7b - Afterschool Chess Tournaments carousel image margins.
   The slide image only has an explicit size rule for
   min-width:992px (800x600) - nothing for mobile, so it falls
   back awkwardly inside its dark carousel section.
   VERIFY: the carousel container's height is set by the widget's
   own JS (data-zs-slider="min-height-el:..."), so this image-only
   fix may not fully close the dark empty margin around it - check
   on a real phone after publishing. */
@media (max-width: 768px) {
  [data-element-id="elm_AIK6UDXKRTacUd8fkDcYvw"] .zpimage-container figure img {
    width: 100% !important;
    height: auto !important;
    max-width: 350px !important;
  }
}

/* Item 8 - Club Calendar gaps.
   Ruled out section padding (.zpsection{padding-block:0 !important}
   confirmed live, both section wrappers on this page have empty
   inline styles). The real cause: the Google Calendar iframe has a
   hardcoded height="600" HTML attribute, while Google's embed often
   renders shorter at narrow widths, leaving reserved blank space.
   VERIFY: the calendar content inside is cross-origin and driven by
   its own height=600 query param - test ~450px and ~550px on a real
   phone and keep whichever tightens the gap without clipping the
   calendar grid. */
@media (max-width: 768px) {
  [data-element-id="elm_TB4co3eENqTJeqcX4Awbzw"] iframe {
    height: 450px !important;
  }
}

/* Item 9 - Job Opportunities gaps/alignment.
   Each listing's heading and body paragraphs are wrapped in
   <blockquote style="margin:0px 0px 0px 40px;..."> - a 40px
   left-indent authored for the desktop two-column layout. Below
   992px the column stacks to full width, so the centered image
   above sits flush while the text stays indented 40px, eating a
   big chunk of a ~350px phone width. blockquote has zero
   theme-level styling anywhere on the site, so this is safe
   site-wide and should also help any other page using the same
   authoring habit. */
@media (max-width: 991px) {
  blockquote {
    margin-left: 0 !important;
  }
}

/* Item 10 - Contact Us gap below form.
   The contact form is a cross-origin iframe
   (forms.zohopublic.com) with a hardcoded height="800", while the
   visible form (email, phone, message, submit) renders in far
   less space - the reserved height shows as a large blank gap
   before the next section.
   VERIFY: 550px is a starting estimate from the visible field
   count; adjust +/-50-100px after checking a real phone render so
   the submit button isn't clipped and no gap remains. Zoho Forms
   may also offer a native auto-height embed option worth checking
   as a longer-term alternative to a fixed guessed height. */
@media (max-width: 768px) {
  [data-element-id="elm_BSmIR_c5-YkXzZzV95SL7A"] iframe {
    height: 550px !important;
  }
}

/* Hide Non-returnable label text globally across all product pages */
.theme-prod-non-returnable-out-of-stock {
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Ensure injected custom badge stays fully visible */
#custom-seat-count {
  font-size: 14px !important;
  line-height: normal !important;
  visibility: visible !important;
}