/*
Theme Name: ANBCC
Theme URI: https://www.anbcc.co.uk
Author: Ampfield & North Baddesley Cricket Club
Author URI: https://www.anbcc.co.uk
Description: Custom theme for Ampfield & North Baddesley Cricket Club — built to host the club's pages (Home, Teams, Fixtures & Results, Junior Cricket, News and more), styled in the club's pitch green and ball red brand colours, with live Play-Cricket data support via the ANBCC Play-Cricket plugin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anbcc
*/

/* ==========================================================================
   1. Custom properties
   ========================================================================== */
:root {
    --anbcc-green: #02551D;
    --anbcc-green-dark: #01330F;
    --anbcc-red: #D60000;
    --anbcc-cream: #F7F5EF;
    --anbcc-ink: #182022;
    --anbcc-grey: #6b7280;
    --anbcc-border: #e6e3da;
    --anbcc-white: #ffffff;
    --anbcc-container: 1180px;
    --anbcc-font-heading: "Oswald", "Arial Narrow", sans-serif;
    --anbcc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--anbcc-font-body);
    color: var(--anbcc-ink);
    background: var(--anbcc-white);
    line-height: 1.65;
    font-size: 17px;
}

img { max-width: 100%; height: auto; }

a { color: var(--anbcc-green); text-decoration: underline; text-decoration-thickness: 1px; }
a:hover { color: var(--anbcc-red); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--anbcc-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0 0 0.6em;
}

.anbcc-container {
    max-width: var(--anbcc-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   3. Skip link
   ========================================================================== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--anbcc-green);
    color: #fff;
    padding: 12px 20px;
    z-index: 10000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ==========================================================================
   4. Site header
   ========================================================================== */
.site-header {
    background: var(--anbcc-white);
    border-bottom: 4px solid var(--anbcc-green);
    position: sticky;
    top: 0;
    z-index: 999;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    max-width: var(--anbcc-container);
    margin: 0 auto;
    gap: 20px;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}
.site-branding img.custom-logo { display: block; height: 56px; width: auto; }
.site-branding .site-title {
    font-family: var(--anbcc-font-heading);
    font-size: 20px;
    text-transform: uppercase;
    color: var(--anbcc-green);
    margin: 0;
    line-height: 1.1;
}
.site-branding .site-title a { color: inherit; text-decoration: none; }
.site-branding .site-description {
    font-size: 12px;
    color: var(--anbcc-grey);
    text-transform: none;
    letter-spacing: 0;
    margin: 2px 0 0;
    font-family: var(--anbcc-font-body);
}

/* Primary nav */
.menu-toggle {
    display: none;
    background: var(--anbcc-green);
    color: #fff;
    border: 0;
    padding: 10px 14px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.primary-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.primary-navigation li { position: relative; }
.primary-navigation a {
    display: block;
    padding: 10px 14px;
    color: var(--anbcc-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    white-space: nowrap;
}
.primary-navigation > ul > li > a::after {
    content: "";
    display: block;
    height: 3px;
    background: var(--anbcc-red);
    width: 0;
    transition: width .18s ease;
    margin-top: 2px;
}
.primary-navigation > ul > li:hover > a::after,
.primary-navigation > ul > li.current-menu-item > a::after,
.primary-navigation > ul > li.current-menu-ancestor > a::after { width: 100%; }
.primary-navigation a:hover { color: var(--anbcc-green); }

.primary-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--anbcc-border);
    border-top: 3px solid var(--anbcc-red);
    min-width: 220px;
    flex-direction: column;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    padding: 6px;
    z-index: 20;
}
.primary-navigation ul li:hover > ul,
.primary-navigation ul li:focus-within > ul { display: flex; }
.primary-navigation ul ul a { padding: 9px 12px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.primary-navigation ul ul a::after { display: none; }

/* ==========================================================================
   5. Buttons (fallback for non-block content)
   ========================================================================== */
.wp-block-button__link,
.button, button[type="submit"], input[type="submit"] {
    font-family: var(--anbcc-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px !important;
}

/* ==========================================================================
   6. Content area
   ========================================================================== */
.site-main { min-height: 40vh; }
.entry-content { max-width: var(--anbcc-container); margin: 0 auto; padding: 40px 24px; }
.entry-content > *:first-child { margin-top: 0; }

/* Full-width group blocks (hero/CTA sections) should bleed edge-to-edge */
.entry-content > .wp-block-group { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.entry-content > .wp-block-group .wp-block-group { margin-left: 0; margin-right: 0; width: auto; max-width: none; }
.entry-content > .wp-block-group > * { max-width: var(--anbcc-container); margin-left: auto; margin-right: auto; }

/* Tables from the Play-Cricket plugin / core table block */
table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th,
.pcw-table td, .pcw-table th { padding: 10px 12px; border-bottom: 1px solid var(--anbcc-border); text-align: left; }
.pcw-table thead, .wp-block-table thead { background: var(--anbcc-green); color: #fff; }
.pcw-row-highlight { background: #fff4e0; }
.pcw-tag { display: inline-block; background: var(--anbcc-red); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
.pcw-heading { font-family: var(--anbcc-font-heading); text-transform: uppercase; color: var(--anbcc-green); }
.pcw-next-card { border: 2px solid var(--anbcc-green); border-radius: 8px; padding: 20px; text-align: center; }
.pcw-eyebrow { display: inline-block; background: var(--anbcc-red); color: #fff; font-size: 12px; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; margin-bottom: 8px; }
.pcw-empty { padding: 16px; background: var(--anbcc-cream); border-radius: 6px; color: var(--anbcc-grey); }

/* ==========================================================================
   7. Blog / news list
   ========================================================================== */
.wp-block-post-title a { color: var(--anbcc-green); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--anbcc-red); }
.wp-block-post-date { color: var(--anbcc-grey); font-size: 14px; text-transform: none; letter-spacing: 0; display: block; margin-bottom: 8px; }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer { background: var(--anbcc-green-dark); color: #dfe7e1; margin-top: 60px; }
.footer-widgets {
    max-width: var(--anbcc-container);
    margin: 0 auto;
    padding: 50px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.footer-widgets h2, .footer-widgets h3 {
    color: #fff;
    font-size: 16px;
    border-bottom: 2px solid var(--anbcc-red);
    padding-bottom: 8px;
    display: inline-block;
}
.footer-widgets a { color: #dfe7e1; }
.footer-widgets a:hover { color: var(--anbcc-red); }
.footer-widgets ul { list-style: none; padding: 0; margin: 0; }
.footer-widgets li { margin-bottom: 8px; }
.footer-logo img { height: 60px; margin-bottom: 14px; }
.footer-social { display: flex; gap: 12px; margin-top: 14px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1); text-decoration: none; font-size: 14px;
}
.footer-social a:hover { background: var(--anbcc-red); }

.site-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 18px 24px;
    text-align: center;
    font-size: 13px;
    color: #b9c4bd;
}
.site-footer-bottom a { color: #b9c4bd; }

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 880px) {
    .menu-toggle { display: inline-block; }
    .primary-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 3px solid var(--anbcc-red);
        max-height: 80vh;
        overflow-y: auto;
    }
    .primary-navigation.is-open { display: block; }
    .primary-navigation ul { flex-direction: column; padding: 10px; }
    .primary-navigation ul ul { position: static; border: 0; box-shadow: none; display: none; padding-left: 14px; }
    .primary-navigation li.submenu-open > ul { display: flex; }
    .footer-widgets { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .entry-content { padding: 26px 18px; }
}