/*
File Name: style.css
Theme Name:  RT-Theme 19 - Simple Child Theme
Author: Tolga Can
Version: 1.0
Author URI: http://themeforest.net/user/stmcan
Theme URI: http://themeforest.net/user/stmcan
Description:   Theme designed by Tolga Can - <a href="http://themeforest.net/user/stmcan">stmcan</a>
License: GNU General Public License
License URI: /Licensing/gpl.txt
Template: rttheme19
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

.entry-thumbnail {
	display: none;
}

h1, h2, h3 {
	font-family: 'Fraunces', serif!important;
}

#post-1571 > section > div {
	display: none;
}

.slm-rn-full{display:inline}
.slm-rn-short{display:none}
.slm-mvp-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #c8d9ee;}
.slm-mvp-home,.slm-mvp-away{font-size:.82em;color:#374151;}
.slm-mvp-away{text-align:right;}

@media(max-width:480px){.slm-rn-full{display:none}.slm-rn-short{display:inline}
.slm-sc{font-size:1.05em!important;padding:5px 9px!important;min-width:32px!important}
.slm-sd{padding:5px 5px!important;font-size:.8em!important}
.slm-mvp-away{text-align:left;}}

/* ============================================================
   SITEWIDE HEADER OVERRIDE -- v1.3.0
   Replaces RT-19 blue header with new white nav style
============================================================ */

/* Main header bar */
.top-header,
.top-header.stuck,
.top-header.sticky {
	background: rgba(255,255,255,0.97) !important;
	background-color: rgba(255,255,255,0.97) !important;
	background-image: none !important;
	border-bottom: 1px solid #e2ddd8 !important;
	height: 56px !important;
	box-shadow: none !important;
}

/* Header inner wrapper */
.header-elements {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 56px !important;
	min-height: 56px !important;
	padding: 0 48px !important;
}

/* Logo */
#logo.site-logo {
	float: none !important;
	/* position: static !important; */
	margin: 0 !important;
	padding: 0 !important;
	height: 56px !important;
	display: flex !important;
	align-items: center !important;
}

#logo.site-logo a {
	display: flex !important;
	align-items: center !important;
	height: 56px !important;
}

#logo .main_logo {
	max-height: 36px !important;
	width: auto !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	top: auto !important;
	transform: none !important;
}

#logo .sticky_logo {
	display: none !important;
}

/* Nav wrapper */
.header-right {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	height: 56px !important;
}

.header-right > nav {
	float: none !important;
	position: static !important;
}

/* Top level menu */
ul#navigation.menu {
	display: flex !important;
	align-items: center !important;
	gap: 28px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 56px !important;
}

ul#navigation.menu > li {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

ul#navigation.menu > li > a {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #4a4540 !important;
	text-decoration: none !important;
	padding: 0 !important;
	line-height: 56px !important;
	background: none !important;
	border: none !important;
}

ul#navigation.menu > li > a > span {
	color: #4a4540 !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	padding: 0 !important;
}

ul#navigation.menu > li > a:hover,
ul#navigation.menu > li.current-menu-item > a,
ul#navigation.menu > li.current-menu-ancestor > a {
	color: #1662b9 !important;
	background: none !important;
}

ul#navigation.menu > li > a:hover > span,
ul#navigation.menu > li.current-menu-item > a > span,
ul#navigation.menu > li.current-menu-ancestor > a > span {
	color: #1662b9 !important;
}

/* Dropdown arrow indicators -- REMOVED 30 Aug 2026.
   This added a second caret (a literal U+25BE) on top of the parent theme's
   own fontello caret, which already renders correctly inside the bar
   (#navigation>li.menu-item-has-children>a>span:after, content "\f107").
   The <span> inside the link is full-width block-level, so this inline
   ::after wrapped onto a new line BELOW it and overflowed the 56px header --
   the stray arrows Fletch reported floating under the menu on every page.
   Do not reinstate: the theme already provides the indicator. */

/* Dropdown panels */
ul#navigation.menu > li > ul.sub-menu {
	display: none;
	position: absolute !important;
	top: 56px !important;
	left: 0 !important;
	background: #ffffff !important;
	border: 0.5px solid rgba(0,0,0,0.12) !important;
	border-top: 2px solid #2a6db5 !important;
	border-radius: 0 0 6px 6px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
	min-width: 200px !important;
	padding: 0 !important;
	list-style: none !important;
	margin: 0 !important;
	z-index: 300 !important;
}

ul#navigation.menu > li:hover > ul.sub-menu { display: block !important; }

ul#navigation.menu > li > ul.sub-menu > li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
}

ul#navigation.menu > li > ul.sub-menu > li:last-child {
	border-bottom: none !important;
}

ul#navigation.menu > li > ul.sub-menu > li > a {
	display: block !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #2c2c2a !important;
	background: none !important;
	border-left: none !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	line-height: normal !important;
}

ul#navigation.menu > li > ul.sub-menu > li > a > span {
	color: #2c2c2a !important;
	padding: 0 !important;
	line-height: normal !important;
}

ul#navigation.menu > li > ul.sub-menu > li > a:hover {
	color: #2a6db5 !important;
	background: #f5f5f4 !important;
	border-left: none !important;
}

ul#navigation.menu > li > ul.sub-menu > li > a:hover > span {
	color: #2a6db5 !important;
}

/* LSA home uses its own nav drawer -- suppress RT-19 mobile button injected via wp_footer() */
body.lsa-shell .mobile-menu-button { display: none; }

/* -- RT-19 MOBILE NAV OVERRIDES ---------------------------------- */

/* Move hamburger to right side -- RT-19 uses absolute positioning for this
   element, so override left:auto and set right to match header padding */
.header-elements .mobile-menu-button {
  position: absolute !important;
  left: auto !important;
  right: 15px !important;
}

/* Always expand sub-menus -- no hidden accordion */
.mobile-nav .sub-menu { display: block !important; }

/* # links and no-href parents are section labels, not tappable links */
.mobile-nav li.menu-item-has-children > a[href="#"],
.mobile-nav li.menu-item-has-children > a:not([href]) {
  pointer-events: none;
  cursor: default;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aaa !important;
}

/* Depth-based indentation */
.mobile-nav li[data-depth="1"] > a { padding-left: 16px !important; }
.mobile-nav li[data-depth="2"] > a { padding-left: 28px !important; font-size: 14px !important; color: #888 !important; }

/* -- GET INVOLVED CTA -- */
ul#navigation.menu > li.menu-cta {
	padding: 0 0 0 12px !important;
}

ul#navigation.menu > li.menu-cta > a {
	background: #1662b9 !important;
	color: #fff !important;
	padding: 7px 16px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
}

ul#navigation.menu > li.menu-cta > a > span {
	color: #fff !important;
	font-weight: 600 !important;
	padding: 0 !important;
	line-height: normal !important;
}

ul#navigation.menu > li.menu-cta > a:hover {
	background: #0f4a8a !important;
	color: #fff !important;
}

ul#navigation.menu > li.menu-cta > a:hover > span {
	color: #fff !important;
}
/* ============================================================
   SITEWIDE FOOTER STYLES
   Added to child-style.css
   All classes prefixed lsa- to avoid RT-19 conflicts.
   ============================================================ */

/* -- SIX TEAMS SECTION -- */

.lsa-footer-teams {
  background: #f9f8f6;
  padding: 36px 20px;
  border-top: 1px solid #e2ddd8;
}

.lsa-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.lsa-footer-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1662b9;
  margin-bottom: 4px;
}

.lsa-footer-h2 {
  font-family: 'Fraunces', serif !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  color: #1a1814;
}

.lsa-teams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lsa-team-card {
  background: #f9f8f6;
  border: 1px solid #e2ddd8;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1814;
  display: block;
}

.lsa-team-photo {
  position: relative;
  height: 140px;
  overflow: hidden;
  background: #2a3a4a;
}

.lsa-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lsa-team-tag {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid #e2ddd8;
}

.lsa-team-card--champion {
  border-color: #d97706;
}

.lsa-champion-ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: #d97706;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
}


/* -- NEVER PLAYED SECTION -- */

.lsa-footer-join {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}

.lsa-footer-join-bg {
  position: absolute;
  inset: 0;
  background: #1a2a3a url('https://leedssoftball.co.uk/wp-content/uploads/2025/07/IMG_3439.jpeg') center / cover no-repeat;
}

.lsa-footer-join-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,16,40,0.95) 0%, rgba(8,16,40,0.6) 60%, rgba(8,16,40,0.2) 100%);
}

.lsa-footer-join-inner {
  position: relative;
  z-index: 2;
  padding: 32px 20px;
}

.lsa-footer-join-h2 {
  font-family: 'Fraunces', serif !important;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.lsa-footer-join-h2 em {
  font-style: italic;
  color: #7ab8ff;
}

.lsa-footer-join-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
  line-height: 1.6;
}

.lsa-footer-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* -- MINI FOOTER NUDGE -- */

.lsa-footer-nudge {
  background: #1662b9;
  padding: 20px;
}

.lsa-footer-nudge-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.lsa-footer-nudge-copy {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
}

.lsa-footer-nudge-copy strong {
  color: #fff;
}


/* -- SHARED BUTTON STYLES -- */

.lsa-btn-blue {
  background: #1662b9;
  color: #fff;
  padding: 12px 20px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  white-space: nowrap;
}

.lsa-btn-blue:hover {
  background: #0f4a8a;
  color: #fff;
  text-decoration: none;
}

.lsa-footer-nudge .lsa-btn-blue {
  background: #fff;
  color: #1662b9;
}

.lsa-footer-nudge .lsa-btn-blue:hover {
  background: #e8f1fb;
  color: #1662b9;
}

.lsa-btn-ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 12px 20px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.35);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  white-space: nowrap;
}

.lsa-btn-ghost:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
  text-decoration: none;
}


/* -- COPYRIGHT STRIP -- */

.lsa-footer-strip {
  background: #f9f8f6;
  padding: 20px;
  border-top: 1px solid #e2ddd8;
}

.lsa-footer-strip p {
  font-size: 12px;
  color: #7a7470;
  margin-bottom: 8px;
}

.lsa-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lsa-footer-links a {
  font-size: 12px;
  color: #7a7470;
  text-decoration: none;
}

.lsa-footer-links a:hover {
  color: #1662b9;
}


/* ========================================
   TABLET -- 640px+
======================================== */
@media (min-width: 640px) {
  .lsa-footer-teams { padding: 40px 32px; }
  .lsa-footer-join-inner { padding: 40px 32px; }
  .lsa-footer-nudge { padding: 20px 32px; }
  .lsa-footer-strip { padding: 20px 32px; }
  .lsa-teams-grid { grid-template-columns: repeat(3, 1fr); }
  .lsa-team-photo { height: 150px; }
  .lsa-footer-join { min-height: 280px; }
  .lsa-footer-join-h2 { font-size: 36px; }
}


/* ========================================
   DESKTOP -- 900px+
======================================== */
@media (min-width: 900px) {
  .lsa-footer-teams { padding: 52px 48px; }
  .lsa-footer-inner { max-width: none; }
  .lsa-footer-h2 { font-size: 28px; }
  .lsa-team-photo { height: 150px; }

  .lsa-footer-join { min-height: 300px; align-items: center; }
  .lsa-footer-join-bg::after {
	background: linear-gradient(90deg, rgba(8,16,40,0.92) 40%, rgba(8,16,40,0.3) 100%);
  }
  .lsa-footer-join-inner { max-width: 520px; padding: 64px 48px; }
  .lsa-footer-join-h2 { font-size: 40px; }

  .lsa-footer-nudge { padding: 24px 48px; }
  .lsa-footer-nudge-copy { font-size: 15px; }

  .lsa-footer-strip {
	padding: 20px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
  .lsa-footer-strip p { margin-bottom: 0; }
  .lsa-footer-links { flex-wrap: nowrap; gap: 20px; }
}

/* ========================================
   PHOTO GRID -- shared gallery layout
   Added 30 Aug 2026 for the FAQs page.

   The in-page galleries were built with an inline
   grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) and images left
   at their natural aspect ratio. That produced ragged rows of wildly
   different heights and, with 8 photos, a single orphan on a second row.

   This gives uniform tiles (fixed 4:3 box + object-fit:cover) and a column
   count that divides evenly, so rows always come out square. Reusable --
   the other in-page galleries can be moved onto this class too.
======================================== */

/* minmax(0, 1fr), not a bare 1fr. Plain 1fr means minmax(auto, 1fr), so one
   item with a large min-content size blows the whole track out. Seen for
   real on Cheekies 30 Aug 2026: an image 404'd, its alt text set the
   min-content width, and the grid computed as "0px 3000px 0px 0px". */
.lsa-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.lsa-photo-grid a { display: block; }

.lsa-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  display: block;
}

@media (min-width: 640px) {
  .lsa-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .lsa-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ========================================
   SIX TEAMS GRID -- 6 across only when there is room
   Adopted from the homepage (lsa-home.css) when the two copies were merged,
   30 Aug 2026. style.css previously switched to six columns at 900px, which
   left each card about 130px wide. The homepage waited until 1200px, which
   reads far better; content pages now inherit that.
======================================== */
@media (min-width: 1200px) {
  .lsa-teams-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ====================================================================
   SHARED SECTIONS -- moved out of lsa-home.css, 30 Aug 2026
   The "Never played" CTA and the copyright strip are now single-source
   parts (parts/never-played.php, parts/site-footer.php) used by BOTH the
   homepage and every content page. Their styles therefore have to live
   here, because style.css loads everywhere while lsa-home.css is enqueued
   only for the homepage template.

   The homepage styled a BARE `footer` element. That is deliberately
   renamed .lsa-site-footer -- a bare footer rule in this file would also
   restyle the parent theme footer on un-migrated pages.
   ==================================================================== */

:root {
  --blue: #1662b9;
  --blue-dark: #0f4a8a;
  --blue-light: #e8f1fb;
  --text: #1a1814;
  --text-mid: #4a4540;
  --text-muted: #7a7470;
  --border: #e2ddd8;
  --off-white: #f9f8f6;
  --score-grey: #8a9ab0;
  --score-grey-bg: #c8d9ee;
  --mvp-bbh: #0F6E56;
  --mvp-sbh: #3C3489;
  --pad: 20px;
}

.join-band { position: relative; overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; }
.join-bg { position: absolute; inset: 0; background: #1a2a3a url('https://leedssoftball.co.uk/wp-content/uploads/2025/07/IMG_3439.jpeg') center / cover no-repeat; }
.join-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,16,40,0.95) 0%, rgba(8,16,40,0.6) 60%, rgba(8,16,40,0.2) 100%); }
.join-inner { position: relative; z-index: 2; padding: 32px var(--pad); }
.join-inner .s-label { color: rgba(255,255,255,0.5); }
.join-inner h2 { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 10px; letter-spacing: -0.02em; }
.join-inner h2 em { font-style: italic; color: #7ab8ff; }
.join-inner p { font-size: 14px; color: rgba(255,255,255,0.78); margin-bottom: 22px; line-height: 1.6; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-blue { background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 7px; text-decoration: none; font-weight: 600; font-size: 14px; display: inline-block; }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; padding: 12px 20px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.35); text-decoration: none; font-weight: 500; font-size: 14px; display: inline-block; }
.s-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding-left: 0; }
.footer-links a { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.lsa-site-footer { background: var(--off-white); padding: 28px var(--pad); border-top: 1px solid var(--border); }


/* ========================================
   TWO-UP PHOTO GRID
   For galleries inside a migrated page's 1140px container. The default
   four-up grid there would make each photo about 276px -- SMALLER than the
   296px the same photos had before migrating. Two-up gives about 550px.

   This modifier has to live in THIS file, not lsa-home.css: the child
   style.css is enqueued after lsa-home.css, so on equal specificity this
   file wins. A .lsa-photo-grid--two written in lsa-home.css was silently
   beaten by .lsa-photo-grid below and rendered four-up anyway.
======================================== */
@media (min-width: 900px) {
  .lsa-photo-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three-up, for a gallery that holds exactly three photos. In the default
     four-column grid the third row ends with a gap where a fourth should be. */
  .lsa-photo-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ========================================
   SINGLE-PHOTO GALLERY -- do not quarter it
   A .lsa-photo-grid holding ONE photo must not stay a 4-column grid: the
   photo takes a quarter of the container. Found on Get Involved, where four
   separate one-image galleries sit beside the long registration form -- each
   image rendered 107px wide inside a 464px column. The site-wide grid rollout
   (v1.6.2) made this worse; they were ~147px before it.

   :has() is used rather than a class so it self-corrects for any future
   gallery, without needing the page markup changed.
======================================== */
.lsa-photo-grid:has(> a:only-child),
.lsa-photo-grid:has(> img:only-child) {
  grid-template-columns: minmax(0, 1fr);
}