/*
Theme Name: BFRA Light Theme
Theme URI: https://bfra.net.au
Author: Bathurst Football Referees Association
Description: Light theme for BFRA — white, black, green and ember orange.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: bfra-light
*/

/* ============================================================
   CRITICAL BASE — renders before Tailwind CDN processes
   ============================================================ */
:root {
    --page:        #ffffff;
    --page-alt:    #f8fafc;
    --page-mid:    #f1f5f9;
    --ink:         #0f172a;
    --ink-mid:     #374151;
    --ink-lite:    #6b7280;
    --grass:       #16a34a;
    --grass-mid:   #15803d;
    --grass-dark:  #14532d;
    --grass-lite:  #22c55e;
    --ember:       #ea580c;
    --ember-lite:  #fb923c;
    --ember-dark:  #c2410c;
    --ember-pale:  #fff7ed;
}

html {
    background-color: var(--page);
    color: var(--ink);
    scroll-behavior: smooth;
}

body {
    background-color: var(--page) !important;
    color: var(--ink);
    font-family: Barlow, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Quick-class CSS fallbacks so no flash occurs before Tailwind loads */
.bg-page      { background-color: var(--page) !important; }
.bg-page-alt  { background-color: var(--page-alt) !important; }
.bg-page-mid  { background-color: var(--page-mid) !important; }
.bg-grass     { background-color: var(--grass) !important; }
.bg-ember     { background-color: var(--ember) !important; }
.bg-ink       { background-color: var(--ink) !important; }
.text-ink     { color: var(--ink) !important; }
.text-grass   { color: var(--grass) !important; }
.text-ember   { color: var(--ember) !important; }
.text-white   { color: #ffffff !important; }

/* ============================================================
   WORDPRESS COMPATIBILITY
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--grass);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 4px 4px;
    font-weight: 700;
    z-index: 9999;
    transition: top .2s;
}
.skip-link:focus { top: 0; }

body.admin-bar .site-header { top: 32px; }
@media (max-width:782px) { body.admin-bar .site-header { top: 46px; } }

.alignleft  { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignwide  { margin-left: -4vw; margin-right: -4vw; }
.alignfull  { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; }

.sticky { border-left: 4px solid var(--grass); padding-left: 1rem; }

.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; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus {
    background:#f1f1f1; border-radius:3px; box-shadow:0 0 2px 2px rgba(0,0,0,.6);
    clip:auto !important; clip-path:none; color:#21759b; display:block;
    font-size:14px; height:auto; left:5px; line-height:normal;
    padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000;
}

/* Pagination */
.pagination .page-numbers {
    display:inline-flex; align-items:center; justify-content:center;
    width:2.5rem; height:2.5rem; margin:0 .15rem; border-radius:6px;
    background:var(--page-mid); color:var(--ink); text-decoration:none;
    font-weight:600; border: 1px solid #e2e8f0; transition:all .2s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background:var(--grass); color:#fff; border-color:var(--grass); }

/* WP captions */
.wp-caption-text { font-size:.85rem; color:var(--ink-lite); margin-top:.25rem; }

/* Comments */
.comment-respond label { display:block; margin-bottom:.25rem; font-weight:600; color:var(--ink); }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
    width:100%; border:1px solid #e2e8f0; background:#fff;
    color:var(--ink); padding:.5rem .75rem; border-radius:6px; margin-bottom:1rem;
}
.comment-respond input[type="submit"] {
    background:var(--grass); color:#fff; padding:.6rem 1.5rem;
    border:none; border-radius:6px; font-weight:700; cursor:pointer;
    text-transform:uppercase; letter-spacing:.05em;
}
.comment-respond input[type="submit"]:hover { background:var(--grass-mid); }


/* ============================================================
   BUTTON HOVER FIXES
   Explicit CSS overrides for hover states involving custom
   Tailwind colors — ensures reliable cross-browser rendering.
   ============================================================ */

/* "Become a Referee" outline button — fully self-contained, no Tailwind dependency */
a.bfra-ref-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 2px solid #16a34a;
    color: #14532d;
    background-color: transparent;
    border-radius: 0.75rem;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
a.bfra-ref-btn:hover {
    background-color: #14532d !important;
    color: #ffffff !important;
    border-color: #14532d !important;
}
a.bfra-ref-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* "Contact Us" outline button */
a.bfra-btn-outline-contact,
.bfra-btn-outline-contact {
    border: 2px solid #16a34a;
    color: #16a34a;
    transition: all 0.2s;
}
a.bfra-btn-outline-contact:hover,
.bfra-btn-outline-contact:hover {
    background-color: #14532d !important;
    color: #ffffff !important;
    border-color: #14532d !important;
}

/* Nav active states */
.current-menu-item > a,
.current-menu-ancestor > a {
    color: #16a34a !important;
    background-color: #f0fdf4 !important;
}

/* Ensure page header ember bar shows */
.border-b-4.border-grass {
    border-bottom: 4px solid #16a34a !important;
}

/* Sponsor / affiliate logos in pre-footer */
.sponsor-logo img,
.pre-footer-sponsors img {
    max-height: 3rem;
    width: auto;
    object-fit: contain;
    display: block;
}

/* "Become a Referee" outline button — class used in front-page.php */
a.bfra-btn-outline-grass {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 2px solid #16a34a;
    color: #14532d;
    background-color: transparent;
    border-radius: 0.75rem;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
a.bfra-btn-outline-grass:hover {
    background-color: #14532d !important;
    color: #ffffff !important;
    border-color: #14532d !important;
    transform: scale(1.02);
}
a.bfra-btn-outline-grass svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}