/*
Theme Name: Football Squares Hub Child
Description: Child theme for footballsquareshub.com. Leather-and-chalk palette, download buttons, tables, FAQ and a plain footer. Ads are handled by the Football Squares Hub plugin.
Author: Football Squares Hub
Template: kadence
Version: 1.0.3
Text Domain: fsqh-child
*/

:root {
  --fsqhc-brand: #7a3413;
  --fsqhc-brand-dark: #4b1e0a;
  --fsqhc-chalk: #fbf6f1;
  --fsqhc-line: #e8d8c9;
  --fsqhc-ink: #1f1915;
  --fsqhc-muted: #655a52;
  --fsqhc-gold: #c9821a;
  --fsqhc-light: #ffd27a;
  --global-palette1: #7a3413;
  --global-palette2: #4b1e0a;
  --global-palette3: #1f1915;
  --global-palette4: #2a221d;
  --global-palette5: #655a52;
}

body {
  color: var(--fsqhc-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

/* Reading column: under 80 characters, centered in the content box */
.entry-content-wrap .entry-content.single-content,
.content-area .entry-content { max-width: 46rem; margin-left: auto !important; margin-right: auto !important; }

/* In-content figures */
.entry-content .fsqhc-figure { margin: 1.6rem 0; }
.entry-content .fsqhc-figure img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--fsqhc-line); }
.entry-content .fsqhc-figure figcaption { margin-top: .45rem; font-size: .88rem; color: var(--fsqhc-muted); text-align: center; }

/* Headings */
.entry-title, h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--fsqhc-brand-dark); }
.entry-content h2 {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25;
  margin-top: 2.4rem; padding: 0.1rem 0 0.1rem 0.8rem; color: var(--fsqhc-ink);
  border-left: 6px solid var(--fsqhc-brand);
}
.entry-content h3 { font-size: 1.15rem; font-weight: 700; }

/* Title area: a chalk band with one leather rule under it */
.entry-hero, .page-hero-section { background-color: var(--fsqhc-chalk); border-bottom: 4px solid var(--fsqhc-brand); }
.entry-header { padding: 1.4rem 1.2rem 1.2rem; background: var(--fsqhc-chalk); border-bottom: 4px solid var(--fsqhc-brand); border-radius: 8px 8px 0 0; margin-bottom: 1.4rem; }

/* Links */
.entry-content a { color: var(--fsqhc-brand); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--fsqhc-brand-dark); }

/* Download buttons: any list link to a PDF or Excel file */
.entry-content li:has(> a[href$=".pdf"]),
.entry-content li:has(> a[href$=".xlsx"]) {
  list-style: none; margin: 0 0 0.9rem 0; padding: 0.9rem 1rem;
  background: var(--fsqhc-chalk); border: 1px solid var(--fsqhc-line); border-top: 4px solid var(--fsqhc-brand);
  border-radius: 6px; font-size: 0.95rem; color: var(--fsqhc-muted);
}
.entry-content ul:has(> li > a[href$=".pdf"]) { margin-left: 0; padding-left: 0; }
.entry-content li > a[href$=".pdf"],
.entry-content li > a[href$=".xlsx"] {
  display: inline-block; margin: 0 0.6rem 0.35rem 0; padding: 0.6rem 1rem;
  background: var(--fsqhc-brand); color: #fff; border-radius: 5px; text-decoration: none; font-size: 1rem;
}
.entry-content li > a[href$=".pdf"]:hover,
.entry-content li > a[href$=".xlsx"]:hover { background: var(--fsqhc-brand-dark); color: #fff; }
.entry-content li > a[href$=".pdf"]:focus-visible,
.entry-content li > a[href$=".xlsx"]:focus-visible { outline: 3px solid var(--fsqhc-gold); outline-offset: 2px; }
.entry-content li > a[href$=".xlsx"] { background: #1d6f42; }

/* Steps */
.entry-content ol { padding-left: 1.4rem; }
.entry-content ol > li { margin-bottom: 0.6rem; padding-left: 0.3rem; }
.entry-content ol > li::marker { font-weight: 800; color: var(--fsqhc-brand); }

/* Tables: scroll inside their own box on phones */
.entry-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.2rem 0 0.5rem; font-size: 0.95rem; }
.entry-content th { background: var(--fsqhc-brand-dark); color: #fff; text-align: left; padding: 0.6rem 0.8rem; white-space: nowrap; }
.entry-content td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--fsqhc-line); }
.entry-content tbody tr:nth-child(even) td { background: var(--fsqhc-chalk); }
.entry-content table + p { font-size: 0.88rem; color: var(--fsqhc-muted); }
/* The table scrolls by itself, so its wrapper must not clip it. Without this, phones cut off the first column. */
.entry-content .wp-block-table { overflow: visible; }
/* Figures such as 2.3 stay on one line. A wide table scrolls sideways instead of breaking its numbers. */
.entry-content .wp-block-table th, .entry-content .wp-block-table td { word-break: normal; overflow-wrap: normal; }

/* Rank Math FAQ (the block prints .rank-math-list-item on the page) */
.rank-math-faq-item, .rank-math-list-item { border: 1px solid var(--fsqhc-line); border-radius: 6px; padding: 0.9rem 1rem; margin-bottom: 0.7rem; background: #fff; }
.rank-math-faq-item .rank-math-question, .rank-math-list-item .rank-math-question { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; color: var(--fsqhc-brand-dark); }
.rank-math-faq-item .rank-math-answer, .rank-math-list-item .rank-math-answer { color: var(--fsqhc-ink); }
.rank-math-list-item .rank-math-answer p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .entry-content h2 { font-size: 1.35rem; }
  .entry-content li > a[href$=".pdf"], .entry-content li > a[href$=".xlsx"] { display: block; text-align: center; margin-right: 0; }
}

/* ---------------------------------------------------------------
   phones and tablets
   --------------------------------------------------------------- */

/* Wide data tables: the first column stays in view while the rest scrolls */
.entry-content table th:first-child, .entry-content table td:first-child { position: sticky; left: 0; z-index: 1; }
.entry-content table td:first-child { background: #fff; }
.entry-content tbody tr:nth-child(even) td:first-child { background: var(--fsqhc-chalk); }

@media (max-width: 600px) {
  /* more room for the text: narrower side gaps */
  .entry-content-wrap { padding: 1.1rem 12px; }

  /* shorter page titles, so the answer starts on the first screen */
  .entry-header .entry-title, h1.entry-title { font-size: 1.6rem; line-height: 1.2; }
  .entry-content h2 { font-size: 1.3rem; line-height: 1.25; }
  .entry-content p, .entry-content li { margin-bottom: 1.1rem; }
  .entry-content li { margin-bottom: 0.5rem; }

  /* compact tables: more columns fit before any sideways scroll, and they use the full card width */
  .entry-content table { font-size: 0.82rem; margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); max-width: none; }
  .entry-content th { padding: 0.45rem 0.32rem; white-space: normal; line-height: 1.2; vertical-align: bottom; }
  .entry-content td { padding: 0.45rem 0.32rem; }
  .entry-content th:first-child, .entry-content td:first-child { padding-left: 0.6rem; }

  /* download buttons use the full width */
  .entry-content li > a[href$=".pdf"], .entry-content li > a[href$=".xlsx"] { display: block; }
}

@media (max-width: 360px) {
  .entry-header .entry-title, h1.entry-title { font-size: 1.45rem; }
  .entry-content table { font-size: 0.76rem; }
  .entry-content th, .entry-content td { padding: 0.4rem 0.22rem; }
}

/* comfortable tap targets wherever the menu is a hamburger (phones and tablets) */
@media (max-width: 1024px) {
  button.menu-toggle-open, .menu-toggle-open.drawer-toggle { min-width: 44px; min-height: 44px; padding: 10px; }
  #mobile-drawer .drawer-nav-drop-wrap a, #mobile-drawer .menu-item > a, .mobile-navigation ul li a { font-size: 1rem; }
}

/* ---------------------------------------------------------------
   header
   --------------------------------------------------------------- */

/* One clean row: slimmer links, darker text, no wrapping */
#masthead { background: #fff; border-bottom: 1px solid var(--fsqhc-line); }
#masthead .site-main-header-inner-wrap { min-height: 68px; }
#masthead .site-branding img.custom-logo { height: 30px; width: auto; max-width: none; }
#masthead .header-navigation .header-menu-container > ul { flex-wrap: nowrap; align-items: center; }
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a {
  font-size: 0.95rem; font-weight: 600; color: var(--fsqhc-ink); white-space: nowrap;
  padding-left: 0.62em; padding-right: 0.62em; letter-spacing: 0;
}
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container > ul > li.menu-item:hover > a { color: var(--fsqhc-brand); }

/* The page you are on */
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a { color: var(--fsqhc-brand); box-shadow: inset 0 -3px 0 var(--fsqhc-brand); }

/* Generator is the main action: a button at the end of the row */
#masthead .header-navigation .header-menu-container > ul > li.menu-item:has(> a[href$="/generator/"]) { order: 99; margin-left: 0.5rem; }
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a[href$="/generator/"] {
  background: var(--fsqhc-brand); color: #fff; border-radius: 8px; padding: 0.55em 1.1em; box-shadow: none; line-height: 1.2;
}
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a[href$="/generator/"]:hover { background: var(--fsqhc-brand-dark); color: #fff; }

/* Dropdowns: light cards that are easy to read */
#masthead .header-navigation ul ul.sub-menu {
  background: #fff; border: 1px solid var(--fsqhc-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(75, 30, 10, 0.14);
  padding: 6px; min-width: 230px;
}
#masthead .header-navigation ul ul.sub-menu li.menu-item { border: 0; }
#masthead .header-navigation ul ul.sub-menu li.menu-item > a {
  font-size: 0.95rem; font-weight: 500; color: var(--fsqhc-ink); padding: 0.6rem 0.8rem; border-radius: 6px; border: 0; width: auto; white-space: nowrap;
}
#masthead .header-navigation ul ul.sub-menu li.menu-item > a:hover,
#masthead .header-navigation ul ul.sub-menu li.current-menu-item > a { background: var(--fsqhc-chalk); color: var(--fsqhc-brand); }

/* Stays at the top on desktop, so the menu is always one move away */
@media (min-width: 1025px) {
  #masthead { position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 8px rgba(75, 30, 10, 0.06); }
  .admin-bar #masthead { top: 32px; }
}

/* Small laptops: a little tighter so everything still fits in one row */
@media (min-width: 1140px) and (max-width: 1279px) {
  #masthead .site-branding img.custom-logo { height: 27px; }
  #masthead .header-navigation .header-menu-container > ul > li.menu-item > a { font-size: 0.86rem; padding-left: 0.45em; padding-right: 0.45em; }
  #masthead .header-navigation .header-menu-container > ul > li.menu-item > a[href$="/generator/"] { padding: 0.5em 0.9em; }
}

/* Between tablet and laptop the full menu does not fit, so the compact menu is used a little longer */
@media (min-width: 1025px) and (max-width: 1139px) {
  #masthead #main-header { display: none; }
  #masthead #mobile-header { display: block; }
}

/* Phones and tablets: a compact bar */
@media (max-width: 1139px) {
  #masthead .site-branding img.custom-logo { height: 28px; width: auto; }
  #mobile-drawer .drawer-inner { background: var(--fsqhc-brand-dark); max-width: 420px; }
  #mobile-drawer .menu-item > a, #mobile-drawer .drawer-nav-drop-wrap > a { color: #fff; font-size: 1rem; }
  #mobile-drawer .current-menu-item > a, #mobile-drawer .current-menu-item > .drawer-nav-drop-wrap > a { color: var(--fsqhc-light); font-weight: 700; }
  #mobile-drawer .menu-item > a[href$="/generator/"] { color: var(--fsqhc-light); font-weight: 700; }
  #mobile-drawer .drawer-sub-toggle, #mobile-drawer .menu-toggle-close { color: #fff; }
}

/* mobile header fits small phones */
@media (max-width: 1139px) {
  #masthead #mobile-header .site-branding img.custom-logo { height: auto; max-height: 28px; width: auto; max-width: calc(100vw - 112px); }
  #masthead #mobile-header .site-header-row-container-inner .site-container { padding-left: 16px; padding-right: 12px; }
  #masthead #mobile-header .site-main-header-inner-wrap, #masthead #mobile-header .site-header-row { min-height: 58px; }
  #mobile-drawer .menu-toggle-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------
   footer
   One calm band: brand, the pages people want, legal links, copyright.
   No images and no scripts.
   --------------------------------------------------------------- */
#colophon { display: none; }
.fsqhc-footer { background: var(--fsqhc-brand-dark); color: #f1e4d8; margin-top: 2.5rem; font-size: 0.95rem; line-height: 1.5; }
.fsqhc-footer a { color: #fff; text-decoration: none; }
.fsqhc-footer a:hover, .fsqhc-footer a:focus { color: var(--fsqhc-light); text-decoration: underline; }
.fsqhc-footer-inner { max-width: 1140px; margin: 0 auto; padding: 2.2rem 1.5rem 1.6rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }

.fsqhc-footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; font-family: var(--global-heading-font-family, inherit); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.2px; color: #fff; }
.fsqhc-footer-brand svg { width: 28px; height: 28px; flex: none; }
.fsqhc-footer-brand b { color: var(--fsqhc-light); font-weight: 800; }
.fsqhc-footer-brand i { font-style: normal; color: #c9ad98; font-weight: 600; }
.fsqhc-footer-tag { margin: 0.7rem 0 0; max-width: 30rem; color: #dcc8b8; }

.fsqhc-footer-links h2 { margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c9ad98; font-weight: 700; border: 0; padding: 0; }
.fsqhc-footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 1.5rem; }
.fsqhc-footer-links li { margin: 0; }
.fsqhc-footer-links a { display: inline-block; padding: 0.4rem 0; font-weight: 600; }

.fsqhc-footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.fsqhc-footer-bar-inner { max-width: 1140px; margin: 0 auto; padding: 1rem 1.5rem 1.3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1.5rem; }
.fsqhc-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.3rem; }
.fsqhc-footer-menu li { margin: 0; }
.fsqhc-footer-menu a { display: inline-block; padding: 0.4rem 0; font-size: 0.88rem; color: #f1e4d8; }
.fsqhc-footer-copy { margin: 0; font-size: 0.88rem; color: #dcc8b8; white-space: nowrap; }
.fsqhc-footer-note { flex: 1 1 100%; margin: 0.2rem 0 0; font-size: 0.8rem; color: #c9ad98; }

@media (max-width: 782px) {
  .fsqhc-footer { margin-top: 1.5rem; }
  .fsqhc-footer-inner { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.8rem 1.1rem 1.2rem; }
  .fsqhc-footer-links a { padding: 0.72rem 0; }
  .fsqhc-footer-bar-inner { padding: 0.8rem 1.1rem 1.2rem; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .fsqhc-footer-menu { gap: 0 1.1rem; }
  .fsqhc-footer-menu a { padding: 0.72rem 0; }
  .fsqhc-footer-copy { white-space: normal; }
}

@media (max-width: 380px) {
  .fsqhc-footer-brand { font-size: 1.02rem; gap: 0.45rem; }
  .fsqhc-footer-brand svg { width: 24px; height: 24px; }
}

/* ---------------------------------------------------------------
   last touch-size details
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fsqhc-footer-brand { padding: 0.6rem 0; }
  .fsqhc-footer-links a { padding: 0.72rem 0; }
  .fsqhc-footer-menu a { padding: 0.8rem 0; }
}
/* Tablets are touch screens too: full-height fields and buttons in the tools */
@media (max-width: 1024px) {
  .fsqh input[type=text], .fsqh input[type=number], .fsqh select, .fsqh textarea { min-height: 44px; font-size: 16px; }
  .fsqh .fsqh-sq input[type=text] { font-size: 0.74rem; }
  .fsqh.fsqh-fit .fsqh-sq input[type=text] { font-size: 10px; min-height: 34px; }
  .fsqh .fsqh-btn { min-height: 44px; }
  .fsqh .fsqh-mini { min-height: 36px; }
}

/* 1.0.3: the logo image already carries the site name, so the text title beside it is hidden.
   The name stays available to screen readers and search engines through the logo's alt text. */
.site-branding a.brand.has-logo-image .site-title-wrap { display: none; }
.site-branding a.brand.has-logo-image img.custom-logo { width: 290px; max-width: 60vw; height: auto; }
@media (max-width: 600px) { .site-branding a.brand.has-logo-image img.custom-logo { width: 220px; } }