/* ===========================================================================
   Headstone Tennis Club - sitewide design layer
   Deployed to wp-content/mu-plugins/htc-brand.css, enqueued by
   htc-structured-data.php (v1.9+). Delete the file to revert the whole site.

   WHY THIS EXISTS
   The Flash Pro theme ships with a palette and a typography set that are not
   the club's. Two nearly-but-not-quite blues either side of the brand green,
   a condensed display face used for body copy, and a header 192px tall before
   a visitor sees anything. This file aligns all three with the design that
   was approved locally.

   PALETTE, sampled from the logo file itself:
       #103870  indigo   ("HEADSTONE")
       #186838  green    ("TENNIS CLUB", and the racquets) -> #0E6935 in use

   TYPEFACE
   The approved local draft asked for Inter with a system fallback. Inter is
   not installed on the machine it was approved on, so what was actually
   approved - and what is reproduced here - is the system stack: Segoe UI on
   Windows, San Francisco on Mac, Roboto on Android. No webfont to download,
   and identical to the version that was signed off.

   CONTRAST, all measured, WCAG 2.2 AA (4.5 body / 3.0 large and UI):
       white     on #103870 ....... 11.53:1
       white     on #0B2750 ....... 14.79:1
       white     on #0A2246 ....... 15.81:1
       white     on #0E6935 ........ 6.79:1
       #D4DEEC   on #0B2750 ....... 10.62:1
       #C9D3DD   on #0B2750 ........ 9.62:1
       #103870   on #FFFFFF ....... 11.53:1
       #0E6935   on #FFFFFF ........ 6.79:1
       #0E6935   on #EAF3ED ........ 6.17:1

   !important is used deliberately and often: the theme writes most of these
   from the Customizer, which emits an inline <style> late in the head, and
   the top-bar text carries inline style attributes on its own spans.
   =========================================================================== */

:root{
  --htc-navy:      #103870;   /* the logo blue */
  --htc-navy-deep: #0B2750;
  --htc-navy-dark: #0A2246;
  --htc-green:     #0E6935;   /* the logo green */
  --htc-green-dark:#0A4A26;
  --htc-line:      #E1E3D8;
  --htc-sand:      #F1F0E7;
  --htc-mint:      #EAF3ED;
  --htc-ink:       #16221C;
  --htc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif;
}

/* ===========================================================================
   1. TYPOGRAPHY
   The theme sets PT Sans Narrow on body and nav, Archivo Narrow on h2 and
   PT Sans Narrow on h3 - three condensed faces, which is what made the live
   page read as cramped next to the approved draft.

   font-family carries !important because the Customizer's inline rules are
   specific. Colour and metrics do NOT: `html body h1` (0,0,3) already beats
   the Customizer's bare `h1` (0,0,1), while `.htc-home h1` (0,1,1) still
   beats us - so the home page template keeps its own scale untouched.
   =========================================================================== */
html body,
html body #site-navigation li,
html body #site-navigation ul li li,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body input, html body select, html body textarea,
html body .btn, html body button{
  font-family: var(--htc-sans) !important;
}

/* 0.5px of tracking is drawn for a condensed face and looks loose on this one */
html body{ letter-spacing: normal !important; color: var(--htc-ink); }

html body h1, html body h2, html body h3, html body h4{
  letter-spacing: -.015em;
  line-height: 1.2;
}
html body h1{ color: var(--htc-navy); font-size: 38px; }
html body h2{ color: var(--htc-green); font-size: 30px; }
html body h3{ color: var(--htc-navy); font-size: 24px; }   /* was #318ee2, a
                                       bright blue belonging to neither logo */

/* ===========================================================================
   2. PAGE WIDTH
   .tg-container had no max-width - it simply grew, so on a wide monitor the
   logo and the social icons sat hard against the window edges (the icons were
   half off-screen) and body copy ran to unreadable line lengths. 1160px with
   a 22px gutter is the width the approved draft uses, so header, content and
   footer now line up on the same edge.
   =========================================================================== */
.tg-container{
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* ===========================================================================
   3. HEADER - TOP BAR
   Was a white band with green 16px text. Now the navy the approved draft
   uses, so the header reads as one object rather than two.
   =========================================================================== */
.site-header .header-top{
  background: var(--htc-navy-deep) !important;
}
.site-header .header-top .tg-container{
  display: flex !important;
  align-items: center !important;
  gap: 18px;
}
.site-header .header-top .left-content{
  margin: 0 auto 0 0 !important;
  flex: 1 1 auto;
}
.site-header .header-top .right-content{
  margin: 0 !important;
  flex: 0 0 auto;
}
/* the spans carry inline colour and size attributes, hence !important */
.site-header .header-top .left-content p{
  margin: 0 !important;
  padding: 9px 0 !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #D4DEEC !important;
}
.site-header .header-top .left-content span,
.site-header .header-top .left-content strong{
  color: #D4DEEC !important;
  font-size: 14.5px !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}
.site-header .header-top .left-content a,
.site-header .header-top .left-content a span,
.site-header .header-top .left-content a strong{
  color: #FFFFFF !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- social icons, now sitting on navy ---------- */
.social-menu{ display: flex !important; gap: 8px; justify-content: flex-end; }
.social-menu li{ padding: 0 !important; float: none !important; }
.social-menu a{
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.40) !important;
}
.social-menu a::before{ font-size: 16px !important; }
.social-menu a:hover,
.social-menu a:focus{
  background: var(--htc-green) !important;
  border-color: var(--htc-green) !important;
}

/* ===========================================================================
   4. HEADER - LOGO ROW
   The logo was served at its full 420px with 20px of wrapper padding and 10px
   of its own, making the row 142px tall. At 230px it is still comfortably
   legible and the row comes down to about 78px.
   =========================================================================== */
.site-header .header-bottom{
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--htc-line);
}
.site-header .header-bottom .tg-container{ align-items: center !important; }
.site-header .header-bottom .logo{ padding: 13px 0 !important; }
.site-header .header-bottom .logo-image{ padding: 0 !important; }
.site-header .header-bottom .logo-image img{
  width: 230px !important;
  height: auto !important;
  padding: 0 !important;
  display: block;
}

/* ===========================================================================
   5. MAIN NAVIGATION
   The theme spaced items with 40px of padding on the <li> and 23px above and
   below, which fixed the row at 70px and left the link itself with no hit
   area of its own. Padding moves onto the link, which gives it a hover pill
   and a real target.
   =========================================================================== */
#primary-menu > li{
  padding: 0 3px 0 0 !important;
}
#primary-menu > li > a{
  display: block;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  padding: 10px 11px !important;
  border-radius: 8px;
  line-height: 1.15 !important;
  color: var(--htc-navy) !important;
  transition: background-color .16s, color .16s;
}
#primary-menu > li > a:hover,
#primary-menu > li > a:focus{
  background: var(--htc-sand) !important;
  color: var(--htc-navy) !important;
}
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a,
#primary-menu > li.current-menu-ancestor > a,
#primary-menu > li.current_page_ancestor > a{
  background: var(--htc-mint) !important;
  color: var(--htc-green) !important;
}

/* ---------- dropdown panels ---------- */
#primary-menu .sub-menu{
  border: 1px solid var(--htc-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 34px rgba(11,39,80,.16) !important;
  overflow: hidden;
  padding: 6px 0 !important;
}
#primary-menu .sub-menu li{ padding: 0 !important; }
#primary-menu .sub-menu a{
  color: var(--htc-navy) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  display: block;
}
#primary-menu .sub-menu a:hover,
#primary-menu .sub-menu a:focus{
  background: var(--htc-mint) !important;
  color: var(--htc-green) !important;
}
/* Keep the last two panels on screen. They open leftward from their item and
   ran off the right edge, giving every page a horizontal scrollbar. */
#primary-menu > li:nth-last-child(-n+2) > .sub-menu{
  left: auto !important;
  right: 0 !important;
}

/* the search affordance, trimmed to match the shorter row */
.header-bottom .search-wrap{ padding: 0 0 0 18px !important; }

/* ===========================================================================
   6. PAGE-TITLE BAND (every page except the home page)
   =========================================================================== */
#flash-breadcrumbs,
.breadcrumb-trail.breadcrumbs{ background: var(--htc-navy) !important; }
#flash-breadcrumbs .tg-container{
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}
.breadcrumb-trail.breadcrumbs .trail-title{
  font-size: 34px !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em;
  color: #FFFFFF !important;
  margin: 0 !important;
}
.breadcrumb-trail.breadcrumbs .trail-items{ margin-top: 9px !important; }

/* ===========================================================================
   7. FOOTER
   Rebuilt to the approved three-column layout. The columns are the theme's
   own widget areas, so the committee can still edit every word from
   Appearance -> Widgets.
   =========================================================================== */
#top-footer{
  background: var(--htc-navy-deep) !important;
  padding: 50px 0 26px !important;
}
#top-footer .tg-column-wrapper{
  display: grid !important;
  grid-template-columns: 1.4fr 1fr .8fr;
  gap: 36px;
  float: none !important;
}
#top-footer .footer-block{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#top-footer .widget{ margin: 0 !important; }
#top-footer .widget-title{
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  margin: 0 0 12px !important;
  text-transform: none !important;
}
#top-footer .widget-title::first-letter{ color: #FFFFFF !important; }
#top-footer,
#top-footer p,
#top-footer .textwidget{
  color: #C9D3DD !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
}
#top-footer p{ margin: 0 0 12px !important; }
#top-footer p:last-child{ margin-bottom: 0 !important; }
#top-footer a{ color: #FFFFFF !important; }

/* the LTA mark reads as a badge on a white card rather than a raw JPEG */
#top-footer .so-widget-sow-image img,
#top-footer .widget_media_image img{
  background: #FFFFFF;
  border-radius: 10px;
  padding: 12px;
  width: 150px !important;
  height: auto !important;
}

#bottom-footer{
  background: var(--htc-navy-dark) !important;
  padding: 18px 0 !important;
}
#bottom-footer .copyright-text p{
  color: #C9D3DD !important;
  font-size: 14px !important;
  margin: 0 !important;
}

#footer-scroll-up,
#scroll-up{ background: var(--htc-navy) !important; }
#footer-scroll-up:hover, #footer-scroll-up:focus,
#scroll-up:hover, #scroll-up:focus{ background: var(--htc-green) !important; }

/* ===========================================================================
   8. COOKIE BAR
   =========================================================================== */
#cookie-notice{ background: var(--htc-navy-deep) !important; }
#cookie-notice .cn-button#cn-accept-cookie{
  background: var(--htc-green) !important;
  color: #FFFFFF !important;
}
#cookie-notice .cn-button#cn-accept-cookie:hover,
#cookie-notice .cn-button#cn-accept-cookie:focus{
  background: var(--htc-green-dark) !important;
}

/* ===========================================================================
   9. KEYBOARD FOCUS on the navy grounds
   =========================================================================== */
#top-footer a:focus-visible,
#bottom-footer a:focus-visible,
#flash-breadcrumbs a:focus-visible,
.header-top a:focus-visible,
.social-menu a:focus-visible{
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* ===========================================================================
   10. NARROW SCREENS
   The theme collapses the navigation into a burger below 980px. Everything
   here only tidies what is left.
   =========================================================================== */
@media only screen and (max-width: 979px){
  .site-header .header-top .tg-container{ flex-wrap: wrap; }
  .site-header .header-top .left-content{ flex: 1 1 100%; }
  .site-header .header-top .left-content p{ padding: 8px 0 2px !important; }
  .site-header .header-top .right-content{ flex: 1 1 100%; }
  .social-menu{ justify-content: flex-start; padding-bottom: 8px; }
  .site-header .header-bottom .logo-image img{ width: 190px !important; }
  #primary-menu > li{ display: block; padding: 0 !important; }
  #primary-menu > li > a{ border-radius: 0; padding: 13px 12px !important;
    font-size: 15px !important; text-transform: none; letter-spacing: normal !important; }
  #primary-menu .sub-menu{ border-radius: 0 !important; box-shadow: none !important; }
  #top-footer .tg-column-wrapper{ grid-template-columns: 1fr 1fr; }
  .breadcrumb-trail.breadcrumbs .trail-title{ font-size: 28px !important; }
}
@media only screen and (max-width: 640px){
  #top-footer .tg-column-wrapper{ grid-template-columns: 1fr; gap: 28px; }
}

/* ===========================================================================
   11. FIXES FOUND WHILE TESTING THE LIVE PAGE
   =========================================================================== */

/* The email "social" icon has never had a glyph: the theme only maps the
   hosts it recognises, and a mailto: link matches none of them. It went
   unnoticed while the circle was filled navy; on the new transparent circle
   it read as an empty ring. This is FontAwesome 4's envelope. */
.social-menu a[href^="mailto:"]::before{
  content: "\f0e0" !important;
  font-family: FontAwesome !important;
}

/* The dropdown chevron is a <span class="sub-toggle"> that follows the link
   inside the <li>. Giving the link display:block for its hover pill pushed
   that span onto a line of its own, so the item lays out as a flex row. */
#primary-menu > li{
  display: flex !important;
  align-items: center;
}
#primary-menu > li > .sub-toggle{
  display: inline-flex !important;
  align-items: center;
  margin-left: -7px;
  padding-right: 3px;
  font-size: 14px;
  color: var(--htc-navy);
  cursor: pointer;
}
#primary-menu > li.current-menu-item > .sub-toggle,
#primary-menu > li.current-menu-ancestor > .sub-toggle,
#primary-menu > li.current_page_ancestor > .sub-toggle{ color: var(--htc-green); }

/* the top bar's right-hand group carries a fixed width from the theme */
.site-header .header-top .tg-container{ gap: 0 !important; }
.site-header .header-top .right-content{ width: auto !important; }

@media only screen and (max-width: 979px){
  /* the same item, stacked: label and chevron share the row, the panel below */
  #primary-menu > li{ display: flex !important; flex-wrap: wrap; }
  #primary-menu > li > a{ flex: 1 1 auto; }
  #primary-menu > li > .sub-toggle{
    flex: 0 0 48px; justify-content: center; min-height: 46px;
    margin-left: 0; padding-right: 0; font-size: 17px;
  }
  #primary-menu > li > .sub-menu{ flex: 1 1 100%; }
}

/* ===========================================================================
   12. FOOTER, SECOND PASS
   Four columns now the Facebook page embed has gone, and the AWeber sign-up
   form brought into line with them. AWeber injects its own <style> block keyed
   to #af-form-1156886800, so these need matching specificity to win.
   =========================================================================== */
#top-footer .tg-column-wrapper{ grid-template-columns: 1.05fr 1.2fr 1.15fr .78fr; }

#top-footer .htc-lta{
  background: #FFFFFF;
  border-radius: 10px;
  padding: 12px;
  width: 150px !important;
  height: auto !important;
  display: block;
}

/* AWeber prints its own heading; the widget title above it says the same thing */
#top-footer #af-form-1156886800 .af-header{ display: none !important; }
#top-footer #af-form-1156886800,
#top-footer #af-form-1156886800 .af-body{
  font-family: var(--htc-sans) !important;
  font-size: 15px !important;
  color: #C9D3DD !important;
  padding: 0 !important;
  text-align: left !important;
}
#top-footer #af-form-1156886800 .af-element{
  padding: 0 !important;
  margin: 0 0 12px !important;
}
#top-footer #af-form-1156886800 label.previewLabel{
  font-family: var(--htc-sans) !important;
  font-size: 14px !important;
  color: #C9D3DD !important;
  margin-bottom: 5px !important;
}
#top-footer #af-form-1156886800 .af-textWrap{ width: 100% !important; }
#top-footer #af-form-1156886800 input.text{
  font-family: var(--htc-sans) !important;
  font-size: 15px !important;
  width: 100% !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
}
#top-footer #af-form-1156886800 .buttonContainer{ margin-top: 14px !important; }
#top-footer #af-form-1156886800 input.submit{
  font-family: var(--htc-sans) !important;
  background: var(--htc-green) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  width: auto !important;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
}
#top-footer #af-form-1156886800 input.submit:hover,
#top-footer #af-form-1156886800 input.submit:focus{
  background: var(--htc-green-dark) !important;
}
#top-footer #af-form-1156886800 .privacyPolicy p{
  font-family: var(--htc-sans) !important;
  font-size: 13px !important;
  color: #A9B7C7 !important;     /* 7.4:1 on #0B2750 */
  margin: 0 !important;
}
#top-footer #af-form-1156886800 .privacyPolicy a{ color: #FFFFFF !important; }

/* restated after the four-column rule above, which would otherwise win on
   source order inside these ranges */
@media only screen and (max-width: 979px){
  #top-footer .tg-column-wrapper{ grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 640px){
  #top-footer .tg-column-wrapper{ grid-template-columns: 1fr; gap: 28px; }
}

/* ===========================================================================
   13. THE MOBILE ACCORDION TOGGLE
   The theme pins .sub-toggle absolutely at top:11px/right:15px with a solid
   green fill. Section 11 turned the item into a flex row for the desktop
   chevron, and the two together left the three toggles floating in a column
   of green blocks that no longer lined up with their rows. Taking it out of
   absolute positioning and letting it stretch to the row height fixes it, and
   matches the quiet chevron the desktop menu now uses.
   =========================================================================== */
@media only screen and (max-width: 979px){
  #primary-menu > li{
    position: relative;
    align-items: stretch;
  }
  #primary-menu > li > .sub-toggle{
    position: static !important;
    flex: 0 0 52px;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: var(--htc-navy) !important;
    border-left: 1px solid var(--htc-line);
    font-size: 17px;
  }
  #primary-menu > li > .sub-toggle:hover,
  #primary-menu > li > .sub-toggle:focus{
    background: var(--htc-sand) !important;
  }
}

/* Order matters once the item wraps. The markup is <a>, <ul class="sub-menu">,
   <span class="sub-toggle"> - so on an expanded item the chevron wrapped to a
   third line underneath the open panel. */
@media only screen and (max-width: 979px){
  #primary-menu > li > a{ order: 1; }
  #primary-menu > li > .sub-toggle{ order: 2; }
  #primary-menu > li > .sub-menu{ order: 3; }
}

/* ===========================================================================
   14. DROPDOWN PANEL POSITION
   Found by hovering the live menu, not by reading the CSS.

   The theme gives .sub-menu `position:absolute` and a transform but NO `top`
   - it relies on the panel's static position, which under the old markup was
   "below the link, inside the item's 23px of bottom padding". Section 5 moved
   that padding onto the link and section 11 made the item a flex row, and an
   absolutely positioned child of a flex container takes its static position
   from the container's alignment - so with align-items:center the panels
   centred themselves on a 36px row and opened ABOVE the header, off screen.

   Measured on the live page: Club News resolved to top:-70.14px, putting the
   panel at y=-18. Two lines fix it: give the item the height of the header
   row so 100% lands on the row's bottom edge, then say so explicitly.

   73px = the logo row: 13px padding + 47px logo + 13px padding, all set in
   section 4. If the logo size changes, change this with it.
   =========================================================================== */
@media only screen and (min-width: 980px){
  #primary-menu > li{ min-height: 73px; }
  #primary-menu > li > .sub-menu{ top: 100% !important; }
}

/* ===========================================================================
   15. THE BREADCRUMB TRAIL
   The page-title band printed the title AND a "Home > Page" trail underneath
   it. On a two-level site that trail says nothing the navigation does not
   already say, and on a phone it took a third of the band.

   Hidden, not deleted, and only the list: the <h1> stays, and the theme still
   emits BreadcrumbList JSON-LD (verified: 2 occurrences on an interior page),
   so Google keeps whatever it was getting from it.
   =========================================================================== */
.breadcrumb-trail.breadcrumbs .trail-items{ display: none !important; }
#flash-breadcrumbs .tg-container{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}