/*
Theme Name: Football Players Religion
Theme URI: https://example.com/football-players-religion
Author: Football Players Religion
Description: A fast, lightweight, dark editorial theme built for football religion reference articles organised by club, league and squad. Includes sticky navigation, a smart sticky related-posts panel, automatic related posts, crawlable pagination and SEO-plugin-friendly markup. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: football-players-religion
Tags: blog, news, dark, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, two-columns
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --bg:#101411;--surface:#171d19;--surface-2:#232824;--line:#2c312e;
  --green-d:#004d2a;--green:#168447;--gold:#d4af37;
  --text:#fff;--muted:#b9c0ba;--link:#4fc47f;
  --header-h:60px;--adminbar:0px;--hdr-offset:var(--header-h);
  --maxw:1180px;--readw:780px;--r:10px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-offset) + var(--adminbar) + 14px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg,video,iframe,embed,object{max-width:100%}
img{height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);line-height:1.25;margin:0 0 .6em}
p{margin:0 0 1.2em}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
button,input,select,textarea{font:inherit}
.container{width:min(100% - 32px,var(--maxw));margin-inline:auto}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus,.skip-link:focus{background:var(--gold);clip:auto!important;clip-path:none;color:#101411;display:block;font-weight:700;height:auto;left:8px;padding:12px 18px;text-decoration:none;top:8px;width:auto;z-index:100000;border-radius:6px}

/* Buttons and form controls */
.btn,.search-submit,input[type=submit],button[type=submit],.wp-block-button__link,.pagination .prev,.pagination .next{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;background:var(--green);color:#fff;border:1px solid var(--green);border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover,.search-submit:hover,input[type=submit]:hover,button[type=submit]:hover,.wp-block-button__link:hover,.pagination .prev:hover,.pagination .next:hover{color:#fff;border-color:var(--gold)}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],input[type=search],select,textarea{width:100%;min-height:46px;padding:10px 14px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
textarea{min-height:150px}
label{display:block;margin-bottom:6px;font-weight:600}

/* ==========================================================================
   Header and navigation
   ========================================================================== */
.site-header{position:sticky;top:var(--adminbar);z-index:100;height:var(--header-h);background:var(--bg);border-bottom:1px solid var(--line)}
.header-static .site-header{position:relative;top:0}
.header-inner{display:flex;align-items:center;gap:8px;height:100%}
.site-branding{min-width:0;flex:1 1 auto}
.brand{display:inline-flex;align-items:center;gap:10px;max-width:100%;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.brand__mark{flex:none;width:44px;height:44px}
.brand__img{width:auto;max-height:42px}
.brand__text{display:block;min-width:0}
.brand__name{display:block;font:700 1.05rem/1.15 var(--serif);letter-spacing:.01em}
.brand__tag{display:block;margin-top:2px;font:400 .72rem/1.2 var(--sans);color:var(--muted)}
.header-actions{display:flex;gap:2px;flex:none}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:8px;color:var(--text);cursor:pointer}
.icon-btn:hover{background:var(--surface);color:var(--gold)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-toggle{display:none}
.menu,.sub-menu{list-style:none;margin:0;padding:0}
.site-nav .menu{display:flex;gap:2px}
.site-nav a{display:block;padding:9px 14px;color:var(--text);font-weight:600;font-size:.95rem;text-decoration:none;border-radius:6px}
.site-nav a:hover{color:var(--gold)}
.site-nav .current-menu-item>a,.site-nav .current-menu-ancestor>a,.site-nav .current-post-ancestor>a,.site-nav .current-cat>a{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold);border-radius:6px 6px 0 0}
.site-nav .menu-item{position:relative}
.site-nav .sub-menu{position:absolute;left:0;top:100%;min-width:220px;display:none;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.site-nav .menu-item:hover>.sub-menu,.site-nav .menu-item:focus-within>.sub-menu{display:block}
.header-search{display:none;position:absolute;left:0;right:0;top:100%;padding:12px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.search-open .header-search{display:block}
.search-form{display:flex;gap:8px}
.search-form>label{flex:1;margin:0}
.search-form .search-field{width:100%}

@media (min-width:900px){
  :root{--header-h:68px}
  .site-branding{flex:0 0 auto;margin-right:28px}
  .site-nav{flex:1}
  .brand__name{font-size:1.08rem}
}
@media (max-width:899.98px){
  .nav-toggle{display:grid}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--header-h) - var(--adminbar));overflow-y:auto;padding:6px 16px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
  .js .nav-open .site-nav{display:block}
  .site-nav .menu{display:block}
  .site-nav a{padding:14px 6px;border-top:1px solid var(--line);border-radius:0}
  .site-nav li:first-child>a{border-top:0}
  .site-nav .current-menu-item>a,.site-nav .current-menu-ancestor>a,.site-nav .current-post-ancestor>a,.site-nav .current-cat>a{box-shadow:none}
  .site-nav .sub-menu{position:static;display:block;min-width:0;padding:0 0 0 14px;background:none;border:0}
}
html:not(.js) .site-header{height:auto}
html:not(.js) .header-inner{flex-wrap:wrap;height:auto;padding-block:8px}
html:not(.js) .site-nav{order:5;width:100%;display:block}
html:not(.js) .nav-toggle,html:not(.js) .search-toggle{display:none}
html:not(.js) .site-nav .menu{flex-wrap:wrap}

/* ==========================================================================
   Layout, headings and cards
   ========================================================================== */
.site-main{padding:32px 0 56px;min-height:60vh}
.page-head{margin-bottom:28px}
.page-head::after{content:"";display:block;width:56px;height:3px;margin-top:14px;background:var(--gold)}
.page-title{margin:0;font-size:clamp(1.65rem,4.6vw,2.5rem);font-weight:700}
.page-note{margin:8px 0 0;color:var(--muted);font-size:.9rem}
.archive-description{max-width:70ch;margin-top:12px;color:var(--muted)}
.archive-description p{margin:0 0 .8em}

.card-list{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.card-list{gap:24px}}
.card-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card:hover{border-color:var(--green)}
.card:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.card__media{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__ph{display:block;width:100%;height:100%;background:var(--green-d)}
.card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.card__title{margin:0 0 8px;font-size:1.22rem;line-height:1.28}
.card__title a{color:var(--text);text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0}
.card:hover .card__title a{color:var(--gold)}
.card__title a:focus-visible{outline:none}
.card__excerpt{margin:0 0 12px;color:var(--muted);font-size:.95rem;line-height:1.55}

.card--list .card__media{aspect-ratio:16/9}
.card--list .card__body{padding:18px 20px 22px}
.card--list .card__title{font-size:1.3rem;line-height:1.25;margin-bottom:8px}
.card--list .card__excerpt{margin:0;font-size:.98rem;line-height:1.6}
@media (min-width:768px){
  .card--list .card__media{aspect-ratio:2/1}
  .card--list .card__body{padding:22px 26px 26px}
  .card--list .card__title{font-size:1.5rem;line-height:1.22;margin-bottom:10px}
  .card--list .card__excerpt{font-size:1.02rem}
}

.pagination{margin-top:40px}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:8px;color:var(--text);text-decoration:none;background:var(--surface)}
.pagination a.page-numbers:hover{border-color:var(--gold);color:var(--gold)}
.pagination .page-numbers.current{border-color:var(--gold);color:var(--gold);font-weight:700}
.pagination .page-numbers.dots{border-color:transparent;background:none}
.pagination .prev,.pagination .next{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.no-results{max-width:60ch}

/* ==========================================================================
   Single article
   ========================================================================== */
.container--list{width:min(100% - 32px,920px)}
.container--read{width:min(100% - 32px,var(--readw))}
.breadcrumbs{margin-bottom:16px;color:var(--muted);font-size:.85rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0;padding:0;list-style:none}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--muted);opacity:.6}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--gold)}
.entry-title{margin:0 0 14px;font-size:clamp(1.75rem,5.2vw,2.7rem);font-weight:700;line-height:1.15}
.entry-meta{display:flex;flex-wrap:wrap;gap:4px 20px;color:var(--muted);font-size:.9rem}
.entry-thumb{margin:22px 0 28px}
.entry-thumb img{width:100%;border-radius:var(--r)}
.entry-thumb figcaption{margin-top:8px;color:var(--muted);font-size:.85rem}

.entry-content{font-size:1.0625rem;line-height:1.78}
@media (min-width:768px){.entry-content{font-size:1.125rem}}
.entry-content>*{max-width:100%}
.entry-content [id]{scroll-margin-top:calc(var(--hdr-offset) + var(--adminbar) + 14px)}
.entry-content :is(h2,h3,h4,h5,h6){margin:1.9em 0 .6em}
.entry-content h2{font-size:1.7rem}
.entry-content h3{font-size:1.4rem}
.entry-content h4{font-size:1.18rem}
.entry-content h5,.entry-content h6{font-size:1.05rem}
.entry-content ul,.entry-content ol{margin:0 0 1.25em;padding-left:1.45em}
.entry-content li{margin:.3em 0}
.entry-content blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--gold);color:var(--muted);font-family:var(--serif);font-size:1.1em}
.entry-content figure{margin:1.6em 0}
.entry-content img{border-radius:6px}
.entry-content figcaption,.wp-caption-text{margin-top:8px;color:var(--muted);font-size:.85rem}
.entry-content table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.6em 0;font-size:.95rem;line-height:1.5;-webkit-overflow-scrolling:touch}
.entry-content th,.entry-content td{padding:10px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.entry-content th{background:var(--surface-2);font-weight:700}
.entry-content tbody tr:nth-child(even){background:var(--surface)}
.entry-content .wp-block-table{overflow-x:auto;margin:1.6em 0}
.entry-content .wp-block-table table{display:table;margin:0}
.entry-content pre{overflow-x:auto;padding:14px;background:var(--surface);border-radius:8px;font-size:.9rem}
.entry-content iframe{width:100%}
.entry-content details{margin:0 0 1.25em}
.entry-content summary{cursor:pointer;font-weight:700}
.alignleft{float:left;margin:.3em 1.4em 1em 0}
.alignright{float:right;margin:.3em 0 1em 1.4em}
.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}
.page-links{margin:1.5em 0;font-weight:600}

.entry-tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.entry-tags a{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.85rem;text-decoration:none}
.entry-tags a:hover{border-color:var(--gold);color:var(--gold)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.share__label{margin:0 6px 0 0;color:var(--muted);font-weight:600;font-size:.9rem}
.share a,.share button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--gold);color:var(--gold)}

.post-navigation{margin-top:36px}
.post-navigation .nav-links{display:grid;gap:12px}
@media (min-width:640px){.post-navigation .nav-links{grid-template-columns:1fr 1fr}}
.post-navigation a{display:block;height:100%;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--text);text-decoration:none}
.post-navigation a:hover{border-color:var(--gold)}
.post-navigation .nav-label{display:block;margin-bottom:4px;color:var(--muted);font-size:.8rem}
.post-navigation .nav-title{display:block;font-family:var(--serif);font-weight:700;line-height:1.3}
.post-navigation .nav-next{text-align:right}

.related-posts{margin-top:56px;padding:40px 0 8px;border-top:1px solid var(--line)}
.section-title{margin:0 0 22px;font-size:clamp(1.35rem,3.4vw,1.8rem)}

.comments-area{margin-top:48px}
.comment-list{list-style:none;margin:0 0 2em;padding:0}
.comment-list .children{list-style:none;padding-left:1.2em}
.comment-body{margin-bottom:1.2em;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.comment-meta{color:var(--muted);font-size:.85rem}
.comment-meta .avatar{display:inline-block;margin-right:8px;border-radius:50%;vertical-align:middle}
.comment-form p{margin:0 0 1em}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{margin-top:0;background:#0b0e0c;border-top:1px solid var(--line)}
.footer-grid{display:grid;gap:28px;padding:36px 0 28px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:40px}}
.footer-about{margin:14px 0 0;max-width:46ch;color:var(--muted);font-size:.93rem}
.footer-title{margin:0 0 12px;font:700 1rem/1.3 var(--serif)}
.footer-menu{list-style:none;margin:0;padding:0}
.footer-menu a{display:inline-block;padding:5px 0;color:var(--muted);text-decoration:none}
.footer-menu a:hover{color:var(--gold)}
.footer-widgets{padding-bottom:20px}
.footer-bottom{padding:16px 0 20px;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}
.footer-bottom p{margin:0}

/* ==========================================================================
   Search suggestions
   ========================================================================== */
.search-form{position:relative}
.fpr-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;margin:0;padding:6px;list-style:none;max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.fpr-suggest[hidden]{display:none}
.fpr-suggest a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;color:var(--text);font-weight:600;line-height:1.3;text-decoration:none}
.fpr-suggest img{flex:none;width:56px;height:42px;border-radius:6px;object-fit:cover}
.fpr-suggest li.is-active a,.fpr-suggest a:hover{background:var(--surface);color:var(--gold)}
.fpr-suggest__all a{color:var(--link);font-weight:700}
.fpr-suggest__empty{padding:12px 10px;color:var(--muted);font-size:.95rem}

/* ==========================================================================
   "Most read" popup. States (data-state): strip, open, mini.
   ========================================================================== */
.fpr-pop{position:fixed;left:0;right:0;bottom:0;z-index:90;visibility:hidden;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.fpr-pop[hidden]{display:none}
.fpr-pop.is-visible{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.fpr-pop__panel{background:var(--surface-2);border-top:2px solid var(--gold);padding-bottom:env(safe-area-inset-bottom)}
.fpr-pop__bar{display:flex;align-items:center;gap:6px;width:min(100%,var(--readw));min-height:50px;margin-inline:auto;padding:0 6px 0 16px}
.fpr-pop__title{flex:1;margin:0;font-size:.95rem;font-weight:700}
.fpr-pop__toggle{min-height:40px;padding:0 14px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:.85rem;font-weight:600;cursor:pointer}
.fpr-pop__toggle:hover{border-color:var(--gold);color:var(--gold)}
.fpr-pop__min{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:8px;color:var(--text);cursor:pointer}
.fpr-pop__min:hover{color:var(--gold)}
.fpr-pop__min svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.fpr-pop__list{display:none;width:min(100%,var(--readw));max-height:min(46vh,380px);margin:0 auto;padding:0 10px 10px;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.fpr-pop[data-state=open] .fpr-pop__list{display:block}
.fpr-pop__item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;color:var(--text);text-decoration:none}
.fpr-pop__item:hover{background:var(--surface);color:var(--gold)}
.fpr-pop__thumb{flex:none;width:68px;height:51px;border-radius:6px;overflow:hidden;background:var(--green-d)}
.fpr-pop__thumb img{width:100%;height:100%;object-fit:cover}
.fpr-pop__name{font-size:.92rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fpr-pop__pill{display:none;min-height:44px;padding:0 18px;background:var(--gold);color:#101411;border:0;border-radius:999px;font-weight:700;font-size:.92rem;box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer}
.fpr-pop__pill:hover{background:#fff}
.fpr-pop[data-state=mini]{left:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
.fpr-pop[data-state=mini] .fpr-pop__panel{display:none}
.fpr-pop[data-state=mini] .fpr-pop__pill{display:inline-flex;align-items:center}
.has-fpr-pop .site-footer{padding-bottom:64px}
@media (min-width:1500px){
  .has-fpr-pop .site-footer{padding-bottom:0}
  .fpr-pop:not([data-state=mini]){left:auto;right:20px;bottom:20px;width:340px}
  .fpr-pop:not([data-state=mini]) .fpr-pop__panel{border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.45);overflow:hidden}
  .fpr-pop__bar,.fpr-pop__list{width:auto}
  .fpr-pop__toggle{display:none}
  .fpr-pop:not([data-state=mini]) .fpr-pop__list{display:block;max-height:340px}
}

/* ==========================================================================
   Misc and accessibility
   ========================================================================== */
.error-404 .search-form{margin:20px 0}
.error-404 .link-list{padding-left:1.2em}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{.site-header,.site-footer,.fpr-pop,.share,.related-posts,.post-navigation{display:none!important}body{background:#fff;color:#000}}