/* Lichfield branding — logo sizing and title-next-to-logo in nav and footer.
   Loaded globally from default.hbs. */

.gh-navigation-logo,
.gh-footer-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6em;
    text-decoration: none;
}

/* Logo image — bumped from Source's default ~30px to a more presentable 56px.
   Uses !important because Source ships hard-coded sizing on these selectors. */
.gh-navigation-logo img {
    height: 56px !important;
    width: auto !important;
    max-height: 56px;
}
.gh-footer-logo img {
    height: 40px !important;
    width: auto !important;
    max-height: 40px;
}

/* Club name text next to the logo */
.lc-nav-title {
    font-size: 2rem;
    font-weight: 700;
    color: inherit;
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.gh-footer-logo .lc-nav-title {
    font-size: 1.7rem;
    font-weight: 600;
}

/* Hide the long title on narrow screens — keep the logo only. */
@media (max-width: 600px) {
    .lc-nav-title { display: none; }
    .gh-navigation-logo img {
        height: 44px !important;
        max-height: 44px;
    }
}

/* Current-page indicator in the primary nav. Ghost's {{navigation}} helper
   tags the active <li> with `nav-current` — we paint a thick accent-coloured
   underline beneath that link via an absolutely-positioned ::after so the
   surrounding nav layout is unaffected (no padding/border shift). */
.gh-navigation .nav-current > a {
    position: relative;
}
.gh-navigation .nav-current > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 4px;
    background: var(--ghost-accent-color, #2e7d32);
    border-radius: 2px;
}

/* Horizontal dividers — Source has no explicit margin so they sit too close
   to surrounding paragraphs. Give them moderate breathing room.
   Lists trim their own bottom margin so HRs after a <ul> end up tighter
   than after a <p>; bump the HR's own top-margin a bit more to compensate. */
hr,
.gh-content hr {
    margin: 3rem 0 !important;
}
.gh-content ul + hr,
.gh-content ol + hr {
    margin-top: 4rem !important;
}

/* Feature images at the top of posts/pages — Ghost has no native crop UI,
   and Source renders feature images at full intrinsic height which blows
   up the layout for tall photos. Cap as a 16:7 banner that crops centrally
   via object-fit. The full-resolution image is still uploaded; we just
   constrain the rendered shape. .gh-article scope keeps author avatars
   (which also use .gh-article-image) untouched. */
.gh-article .gh-article-image {
    aspect-ratio: 16 / 7;
    max-height: 420px;
    overflow: hidden;
    border-radius: 8px;
}
.gh-article .gh-article-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Listing-page banner — used by /match-reports/, /news/ when the
   corresponding tag has a feature_image. Sits above the post list as a
   slimmer cousin of the home hero. */
.lc-page-hero {
    background: var(--ghost-accent-color, #2e7d32);
    color: #fff;
    padding: 4.5rem 0 4rem;
    text-align: center;
    position: relative;
}
.lc-page-hero.has-bg-image {
    background-size: cover;
    background-position: center;  /* default; overridable per-post via internal tag */
    background-repeat: no-repeat;
}
.lc-page-hero.lc-crop-top { background-position: top center; }
.lc-page-hero.lc-crop-bottom { background-position: bottom center; }
.lc-page-hero.has-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62));
    pointer-events: none;
    z-index: 0;
}
.lc-page-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}
.lc-page-hero-title {
    font-size: clamp(3rem, 4.6vw, 4.4rem);
    line-height: 1.15;
    margin: 0 0 0.4em;
    color: #fff;
    letter-spacing: -0.005em;
}
.lc-page-hero-tagline {
    font-size: clamp(1.5rem, 1.7vw, 1.8rem);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 640px;
    opacity: 0.95;
}
.lc-page-hero-eyebrow {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
    margin-bottom: 0.6em;
    padding: 0.3em 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}
.lc-page-hero-eyebrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}
@media (max-width: 600px) {
    .lc-page-hero { padding: 3rem 0 2.6rem; }
}

/* Body-text links — green with dotted underline.
   Scoped to article content (.gh-content), the home welcome strip, and the
   editable footer panel. Navigation, buttons, tag chips, pagination, post-nav
   cards etc. all live outside these wrappers and keep their existing styles. */
.gh-content a,
.lc-welcome-inner a,
.lc-footer-panel-inner a {
    color: var(--ghost-accent-color, #2e7d32);
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.15s, text-decoration-style 0.15s;
}
.gh-content a:hover,
.lc-welcome-inner a:hover,
.lc-footer-panel-inner a:hover {
    text-decoration-style: solid;
    color: color-mix(in srgb, var(--ghost-accent-color, #2e7d32) 80%, #000);
}

/* Site-wide footer panel — content edited in Pages → "Footer panel".
   Sits above the footer on every page, centre-aligned, with a soft tint
   so it reads as ancillary content rather than competing with the page. */
.lc-footer-panel {
    background: color-mix(in srgb, var(--ghost-accent-color, #2e7d32) 6%, #fff);
    border-top: 1px solid color-mix(in srgb, var(--ghost-accent-color, #2e7d32) 12%, #fff);
    padding: 3rem 0 3.2rem;
    text-align: center;
}
.lc-footer-panel-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
}
.lc-footer-panel-inner > :first-child { margin-top: 0; }
.lc-footer-panel-inner > :last-child { margin-bottom: 0; }
.lc-footer-panel-inner h1,
.lc-footer-panel-inner h2,
.lc-footer-panel-inner h3 {
    color: color-mix(in srgb, var(--ghost-accent-color, #2e7d32) 80%, #000);
}

/* Source's .gh-footer carries margin-top: 12vw on non-page templates, which
   leaves a large white gap between our footer panel and the site footer.
   The panel already provides its own visual separation, so collapse the
   margin whenever the panel sits directly above the footer. */
.lc-footer-panel + .gh-footer {
    margin-top: 0;
}

/* Sponsor strip — appears below the footer when @custom.sponsor_image is set.
   Styled as a quiet, secondary-content band so it doesn't compete with the
   main page. Image is capped at 320px tall (240px on phones) and centred,
   with a small "Sponsored by" label above so its role reads cleanly. */
.lc-sponsor {
    background: #f7f7f7;
    border-top: 1px solid #e8e8e8;
    padding: 2.6rem 0 2.8rem;
    text-align: center;
}
.lc-sponsor-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
}
.lc-sponsor-label {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin-bottom: 1.1rem;
    font-weight: 600;
}
.lc-sponsor a {
    display: inline-block;
    text-decoration: none;
    line-height: 0;  /* trims phantom whitespace under the inline image */
    cursor: pointer;
}
.lc-sponsor a img {
    cursor: pointer;  /* some browsers don't inherit the anchor's pointer
                         cursor onto the inner image; force it explicitly */
}
.lc-sponsor img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    transition: transform 0.15s, box-shadow 0.15s;
}
/* Size variants — set via @custom.sponsor_size in admin. Medium is default. */
.lc-sponsor-small  img { max-height: 200px; }
.lc-sponsor-medium img { max-height: 320px; }
.lc-sponsor-large  img { max-height: 480px; }

.lc-sponsor a:hover img {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
@media (max-width: 600px) {
    .lc-sponsor { padding: 2rem 0 2.2rem; }
    .lc-sponsor-small  img { max-height: 160px; }
    .lc-sponsor-medium img { max-height: 240px; }
    .lc-sponsor-large  img { max-height: 340px; }
}

/* Numbered pagination — Ghost's {{pagination}} helper renders:
       <nav class="pagination" role="navigation">
         <a class="newer-posts" href="…">Newer Posts</a>
         <span class="page-number">Page 2 of 12</span>
         <a class="older-posts" href="…">Older Posts</a>
       </nav>
   Source ships no styling for this since it uses infinite-scroll. */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    margin: 4rem auto 5rem;
    max-width: 720px;
    padding: 0 2rem;
    font-size: 1.6rem;
}
.pagination .page-number {
    color: #6b6b6b;
    flex: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pagination a {
    text-decoration: none;
    color: var(--ghost-accent-color, #2e7d32);
    font-weight: 600;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--ghost-accent-color, #2e7d32);
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.pagination a:hover {
    background: var(--ghost-accent-color, #2e7d32);
    color: #fff;
}
.pagination .newer-posts { order: 1; }
.pagination .page-number { order: 2; }
.pagination .older-posts { order: 3; }

/* Tag chips at the foot of each post. Uses Ghost's {{foreach tags}} which
   skips internal (`#`-prefixed) tags by default, so #imported-from-wp etc.
   stay hidden. */
.lc-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 3rem 0 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e8e8e8;
}
.lc-post-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--ghost-accent-color, #2e7d32);
    background: rgba(46, 125, 50, 0.08);
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
.lc-post-tag:hover {
    background: var(--ghost-accent-color, #2e7d32);
    color: #fff;
}

/* Prev/next within the same primary tag, rendered at the bottom of a post.
   Width and horizontal alignment come from the parent gh-canvas wrapper,
   which Source uses to place children in the 720px main column. */
.lc-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin: 4rem 0 5rem;
}
.lc-post-nav:empty { display: none; }
.lc-post-nav-link {
    display: block;
    padding: 1.6rem 1.8rem;
    border: 1px solid #dde1e3;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.lc-post-nav-link:hover {
    border-color: var(--ghost-accent-color, #2e7d32);
    transform: translateY(-2px);
}
.lc-post-nav-direction {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ghost-accent-color, #2e7d32);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4em;
}
.lc-post-nav-title {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2a2a2a;
}
.lc-post-nav-prev { grid-column: 1; }
.lc-post-nav-next {
    grid-column: 2;
    text-align: right;
}
@media (max-width: 600px) {
    .lc-post-nav { grid-template-columns: 1fr; }
    .lc-post-nav-prev,
    .lc-post-nav-next {
        grid-column: 1;
        text-align: left;
    }
}