/* IOMRA brand styling, layered on top of MudBlazor.
   Palette: deep rifle-green #1B3A2B with a brass/gold accent #C9A227. */

html, body {
    font-family: 'Inter', sans-serif;
    background-color: #F7F6F2;
}

/* ---- Layout ---- */

/* Keep the footer at the bottom of the window on pages with little content - the news index
   before the first release is published, for instance - rather than leaving it stranded
   partway up. box-sizing matters here: MudMainContent is padded to clear the app bar, and
   without it that padding would be added to the full viewport height and force a scrollbar. */
.mud-main-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.iomra-page {
    flex: 1 0 auto;
}

/* ---- App bar ---- */

.iomra-appbar {
    background: linear-gradient(90deg, #1B3A2B 0%, #234A34 100%) !important;
}

.iomra-brand {
    color: #F7F6F2 !important;
    font-family: 'Outfit', sans-serif;
    line-height: 1.1;
}

.iomra-brand-sub {
    color: #C9C7BE !important;
}

/* The horizontal nav belongs to desktop only; below the md breakpoint the burger and drawer do
   the job. Done with our own rule rather than MudBlazor's d-none/d-md-flex pair, which cannot be
   used on a MudStack: the component adds d-flex, and MudBlazor declares that after d-none with
   both important, so the nav stayed visible on phones alongside the burger. */
.iomra-desktop-nav {
    display: none;
}

@media (min-width: 960px) {
    .iomra-desktop-nav {
        display: block;
    }
}

/* Badge and name together, held off whatever sits to their left. */
.iomra-brand-block {
    margin-left: 8px;
}

/* The badge links home. Flex so the anchor wraps the image exactly, with none of the extra space
   an inline element leaves beneath it. */
.iomra-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
    border-radius: 50%;
    transition: opacity .15s ease;
}

.iomra-logo-link:hover {
    opacity: 0.85;
}

/* The association medallion. Served at 192px so it stays crisp on a high-density screen, and
   sized down here rather than in the markup. */
.iomra-logo {
    height: 40px;
    width: 40px;

    /* The badge is picked in the backoffice, so it will not always be the square the site
       ships with. Fitted inside the space rather than stretched to fill it: a squashed
       association badge looks worse than one with air around it. */
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
    margin-right: 3px;
}

/* The brand has the app bar to itself on a phone once the nav is gone, but the association's
   full name is still long. Smaller type keeps it to one line instead of pushing the bar taller. */
@media (max-width: 599px) {
    /* Even the badge up between the burger and the name.
       The gap a reader sees on the badge's left is this margin plus the burger's own 5px of
       padding, because that padding is empty space inside the button's box. The gap on its right
       is the 8px between badge and name. So 3px here, not 8: 3 + 5 makes the two match. */
    .iomra-brand-block {
        margin-left: 3px;
    }

    /* The badge gives up a little room too, so the name is not squeezed for it. */
    .iomra-logo {
        height: 32px;
        width: 32px;
    }

    .iomra-brand {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    .iomra-brand-sub {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }
}

/* On the narrowest phones the strapline is the first thing to go: it is decorative, and the
   name is not. */
@media (max-width: 419px) {
    .iomra-brand-sub {
        display: none;
    }
}

/* Pages belonging to a section in the mobile drawer, indented under it so the list reads as a
   tree rather than as one flat run of links. */
.drawer-child {
    padding-left: 3rem !important;
    font-size: 0.9rem;
}

.nav-link {
    text-transform: none;
    font-weight: 500;
    opacity: 0.9;
}

.nav-link:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-link-active {
    opacity: 1;
    box-shadow: inset 0 -2px 0 0 #C9A227;
    border-radius: 0;
}

/* ---- Hero ---- */

/* The banner behind the badge and the association's name.
   Two layers: a green wash over a backdrop. The backdrop defaults to the target rings below and
   is swapped for a photograph by the home page when an editor picks one, which it does by setting
   these two custom properties inline. Written as custom properties rather than letting the page
   set background-image directly, because that would replace both layers at once and take the
   wash - and the title's contrast - with it. */
.iomra-hero {
    --hero-backdrop:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="100" cy="100" r="90" fill="none" stroke="white" stroke-opacity="0.08" stroke-width="2"/><circle cx="100" cy="100" r="60" fill="none" stroke="white" stroke-opacity="0.08" stroke-width="2"/><circle cx="100" cy="100" r="30" fill="none" stroke="white" stroke-opacity="0.08" stroke-width="2"/></svg>');
    --hero-backdrop-size: 260px 260px;
    --hero-wash: linear-gradient(120deg, rgba(27,58,43,0.92), rgba(35,74,52,0.88));

    background: var(--hero-wash), var(--hero-backdrop);
    background-size: cover, var(--hero-backdrop-size);
    background-position: center, center;
    color: #F7F6F2;
    border-radius: 0 0 32px 32px;
}

/* A photograph needs a thinner wash than the rings do, or the picture is not worth having picked.
   Thinner, not absent: the title is white and set over whatever the editor chose, which could be
   a bright sky. These stops were taken down as far as they go while a white heading still holds
   its contrast over a light photograph, and the left-hand end stays heavier because the badge and
   the eyebrow sit over that side. */
.iomra-hero.has-photo {
    --hero-wash: linear-gradient(120deg, rgba(20,42,31,0.86), rgba(28,60,42,0.72));
}

/* The association's name reads as one thing, so it stays on one line and shrinks to fit rather
   than breaking across two. clamp gives it a floor small enough for a narrow phone and a ceiling
   that stops it dominating a wide desktop; the vw term does the fitting in between. */
.hero-title {
    font-weight: 700;
    white-space: nowrap;
    font-size: clamp(0.95rem, 4.8vw, 3.75rem);
    line-height: 1.15;
}

/* The hero's own gutters come off the width the title has to fit into, so they narrow on a small
   phone. Without this the floor of the clamp above is reached while there is still not room. */
@media (max-width: 480px) {
    .iomra-hero > .mud-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.hero-eyebrow {
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C9A227;
    font-weight: 600;
}

/* Badge, strapline and name stack up the middle of the hero. */
.hero-content {
    text-align: center;
}

/* The association medallion above the heading. A drop shadow rather than a panel behind it: the
   badge's face is a mid grey close in weight to the hero green, so it needs lifting off the
   background, and a shadow does that without putting a halo around a circle. */
.hero-logo {
    display: block;
    height: 124px;
    width: 124px;

    /* The badge is picked in the backoffice, so it will not always be the square the site
       ships with. Fitted inside the space rather than stretched to fill it: a squashed
       association badge looks worse than one with air around it. */
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.38));

    /* The image is a block, so it needs centring in its own right - text-align on the container
       does nothing for it. */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 599px) {
    .hero-logo {
        height: 88px;
        width: 88px;
    }
}

.section-eyebrow {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C9A227;
    font-weight: 700;
    font-size: 0.8rem;
}

/* ---- Media ---- */

/* The IOMRA banner is a wide, shallow strip (1342x171); crop rather than letterbox it. */
.iomra-banner {
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.iomra-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Cards ---- */

/* Grid tiles sit side by side in a row, so they stretch to a common height. */
.club-card, .news-card {
    border-radius: 16px;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}

/* Sidebar cards stack in a column and must size to their own content - stretching
   them to the height of the article beside them leaves a card full of empty space,
   and two stacked cards then overflow the page and collide with the footer. */
.info-card {
    border-radius: 16px;
}

.club-card:hover, .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(27,58,43,0.12);
}

/* ---- News images ---- */

/* Press photographs arrive at whatever size and shape the camera gave them, so index cards
   crop to a common window rather than letting each card size itself to its picture. */
/* Radius, height and hover come from the shared card rule above; this only clips the image
   to the rounded corner. */
.news-card {
    overflow: hidden;
}

/* 4:3, matching the crop the imaging pipeline is asked for in NewsViewModelFactory - keep the
   two in step or the browser crops a second time on top of the server's. A ratio rather than a
   fixed height so the window scales with the card and stays the same shape at every width. */
.news-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    line-height: 0;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* On the article itself the photograph is the point, so it is shown whole rather than cropped. */
.news-lead-image, .news-gallery-image {
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.news-lead-image img, .news-gallery-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- League rules ---- */

/* Number in a column of its own, wording beside it, so the numbers line up down the page the way
   they do in the printed book. */
.rule-list {
    margin: 0;
}

.rule {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0 1rem;
    padding: 0.55rem 0;
    border-top: 1px solid #EAE8E1;
}

.rule:first-child {
    border-top: none;
}

/* Indent by the depth of the number. Five levels covers the book as it stands - 2.2.12.1.1 is the
   deepest - and anything deeper simply stops indenting rather than marching off the page. */
.rule-depth-2 { padding-left: 1.25rem; }
.rule-depth-3 { padding-left: 2.5rem; }
.rule-depth-4 { padding-left: 3.75rem; }
.rule-depth-5 { padding-left: 5rem; }

.rule-number {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1B3A2B;
    font-size: 0.9rem;
    padding-top: 0.1rem;
}

.rule-number a {
    color: inherit;
    text-decoration: none;
}

.rule-number a:hover {
    color: #C9A227;
    text-decoration: underline;
}

.rule-text {
    /* Two rules carry a paragraph break from the rule book - 2.1 and 2.2.15 - so newlines in the
       wording are shown rather than collapsed. */
    white-space: pre-line;
    margin: 0;
    color: #1C1C1C;
    line-height: 1.6;
}

/* A rule arrived at from its own link is highlighted, so it is obvious which one was meant. */
.rule:target {
    background-color: #F6EFD8;
    border-radius: 8px;
}

/* On a phone the number sits above the wording: two columns leaves the text too narrow to read,
   and the indents give up most of their width as well. */
@media (max-width: 599px) {
    .rule {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .rule-depth-2 { padding-left: 0.6rem; }
    .rule-depth-3 { padding-left: 1.2rem; }
    .rule-depth-4 { padding-left: 1.8rem; }
    .rule-depth-5 { padding-left: 2.4rem; }
}

/* ---- Committee portraits ---- */

/* A fixed circle, so a row of cards lines up whatever shape the photographs arrive in. The
   picture is cropped square by the imaging pipeline before it gets here; this clips it round. */
.committee-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #E4EBE6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.committee-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Larger on the member's own page, where the portrait is the point rather than one of a row. */
.committee-photo-lg {
    width: 148px;
    height: 148px;
}

/* Stands in for a missing photograph. */
.committee-initials {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 2.25rem;
    color: #1B3A2B;
    line-height: 1;
    user-select: none;
}

.committee-photo-lg .committee-initials {
    font-size: 3rem;
}

/* ---- Club logos ---- */

/* Club badges vary wildly in shape, so give them a fixed box and letterbox inside it
   rather than letting each card size itself to its logo. */
.club-logo {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.club-logo img {
    max-height: 72px;
    max-width: 100%;
    object-fit: contain;
}

.club-logo-lg {
    border-radius: 16px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.club-logo-lg img {
    max-height: 96px;
    max-width: 160px;
    object-fit: contain;
    display: block;
}


/* ---- Results tables ---- */

/* A league table has more columns than a phone has room for, so it scrolls inside its own card
   rather than pushing the whole page sideways. */
.table-scroll {
    overflow-x: auto;
    border-radius: 16px;
}

/* Figures right-aligned so the columns read down as numbers, and tabular so the digits line up
   between rows regardless of which numerals they are. */
.table-scroll .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The divider before shooters who have not shot enough matches to be ranked. */
.table-scroll .table-subhead {
    background-color: #EFEEE9;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5B5B5B;
    font-weight: 700;
}

/* ---- Calendar ---- */

/* The month grid, its colour key and the heading over the listing are desktop only. Seven columns
   never became readable on a phone, and the listing beneath the grid carries the same information
   in a form that suits a narrow screen - so a phone gets the listing on its own, directly under
   the month name, where a second heading repeating that month would only be in the way.

   Marked important because these wrap MudBlazor components that emit their own display utility
   classes, and MudBlazor declares those with !important - an ordinary rule loses to them. */
.calendar-desktop {
    display: none !important;
}

@media (min-width: 960px) {
    .calendar-desktop {
        display: block !important;
    }

    /* The key is a row of swatches, so it goes back to a flex row rather than a block. Matched
       on the component's own d-flex as well, which is what makes this win over the rule above -
       both are important, so it has to be the more specific selector rather than the later one. */
    .d-flex.calendar-desktop {
        display: flex !important;
    }
}

/* The month and year read as one label and should not break across two lines. On a phone the
   arrows either side leave it little room, so it steps down until it fits. */
.calendar-month-label {
    white-space: nowrap;
    font-size: clamp(1.05rem, 4.6vw, 1.5rem) !important;
    line-height: 1.2 !important;
}

/* Seven columns do not fit a phone, so the grid keeps a usable minimum width and scrolls
   sideways inside its card. The listing underneath is what a phone reader actually uses. */
.calendar-scroll {
    overflow-x: auto;
    border-radius: 16px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(7.5rem, 1fr));
    gap: 1px;
    background-color: #E3E1DA;
    border-radius: 16px;
    overflow: hidden;
}

.calendar-head {
    background-color: #1B3A2B;
    color: #F7F6F2;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.5rem;
    text-align: center;
}

.calendar-day {
    background-color: #FFFFFF;
    min-height: 6.5rem;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* The days either side of the month stay visible for context but recede. */
.calendar-day-outside {
    background-color: #FAF9F6;
}

.calendar-day-outside .calendar-date {
    color: #B4B1A8;
}

.calendar-day-today {
    box-shadow: inset 0 0 0 2px #C9A227;
}

.calendar-date {
    font-size: 0.8rem;
    font-weight: 700;
    color: #5B5B5B;
}

.calendar-entry {
    display: block;
    font-size: 0.72rem;
    line-height: 1.25;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    text-decoration: none;
    border-left: 3px solid transparent;
    overflow: hidden;
}

.calendar-entry:hover {
    filter: brightness(0.95);
}

.calendar-entry-time {
    font-weight: 700;
    margin-right: 0.25rem;
}

.calendar-entry-title {
    /* Two lines at most: a fixture is two club names and should not push the cell out of shape. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.calendar-entry-league {
    background-color: #E4EBE6;
    border-left-color: #1B3A2B;
    color: #1B3A2B;
}

.calendar-entry-cup {
    background-color: #F6EFD8;
    border-left-color: #C9A227;
    color: #6B540F;
}

.calendar-entry-event {
    background-color: #ECEBE6;
    border-left-color: #5B5B5B;
    color: #3D3D3D;
}

/* The colour key under the grid. */
.calendar-key {
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    display: inline-block;
    border-left-width: 3px;
    border-left-style: solid;
}

/* The same swatch in the summary dialog, filled rather than outlined.

   The key under the grid sits on the warm page background, where a pale fill still reads as a
   colour. On the white of a dialog that same fill washes out into what looks like an empty
   checkbox, so here the square is filled with the colour it is already bordered in. */
.calendar-key-solid.calendar-entry-league {
    background-color: #1B3A2B;
    border-left-color: #1B3A2B;
}

.calendar-key-solid.calendar-entry-cup {
    background-color: #C9A227;
    border-left-color: #C9A227;
}

.calendar-key-solid.calendar-entry-event {
    background-color: #5B5B5B;
    border-left-color: #5B5B5B;
}

/* The date block down the side of each entry in the month listing. */
.calendar-listing-date {
    flex: 0 0 3.5rem;
    text-align: center;
    line-height: 1.1;
}


/* The entry title in the month listing.

   A link in markup, because it keeps an href so it can be focused, opened in a new tab and
   announced as a link - but a plain click opens the summary rather than following it. Coloured
   like the other links on the site so that it still reads as something to click. */
.calendar-summary-link {
    color: #1B3A2B;
    text-decoration: none;
    cursor: pointer;
}

.calendar-summary-link:hover {
    color: #C9A227;
}

.calendar-summary-link:focus-visible {
    outline: 2px solid #1B3A2B;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Rich text from the Umbraco editor ---- */

.iomra-rte {
    color: #1C1C1C;
    font-size: 1.05rem;
    line-height: 1.7;
}

.iomra-rte p {
    margin: 0 0 1.25rem;
}

.iomra-rte p:last-child {
    margin-bottom: 0;
}

.iomra-rte h2, .iomra-rte h3, .iomra-rte h4, .iomra-rte h5, .iomra-rte h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #1B3A2B;
    margin: 2rem 0 0.75rem;
    line-height: 1.25;
}

.iomra-rte h2 { font-size: 1.75rem; }
.iomra-rte h3 { font-size: 1.5rem; }
.iomra-rte h4 { font-size: 1.25rem; }

.iomra-rte a {
    color: #1B3A2B;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.iomra-rte a:hover {
    color: #C9A227;
}

.iomra-rte ul, .iomra-rte ol {
    margin: 0 0 1.25rem 1.25rem;
}

.iomra-rte li {
    margin-bottom: 0.4rem;
}

.iomra-rte img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---- Footer ---- */

.iomra-footer {
    background-color: #1B3A2B;
    color: #E7E5DE;
}

/* The quick links in two balanced columns. column-gap only - a row gap would fight the margin
   already on each link. */
.footer-links {
    column-count: 2;
    column-gap: 1.5rem;
}

/* A link must not be broken across the column boundary, which is what would otherwise happen to
   "League Competitions" at a narrow width. */
.footer-links .footer-link {
    break-inside: avoid;
}

.footer-text, .footer-link {
    color: #C9C7BE !important;
}

.footer-link:hover {
    color: #C9A227 !important;
}

/* ---- Blazor circuit error banner ---- */

#blazor-error-ui {
    background: #f8d7da;
    color: #58151c;
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.15);
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---- Contact form ---- */

/* The honeypot. Positioned away rather than hidden with display:none or a hidden input, both of
   which are easy for a robot to notice and skip. Nobody using the page can see it or tab to it,
   so anything that fills it in was not a person. */
.contact-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Sponsors ---- */

/* Every logo sits in a white tile of a fixed height and is scaled to fit inside it, whatever
   shape or file type it arrived as. Fixed height rather than width because logos are mostly
   wide, and a row of them only reads as a row when their heights agree. The white tile is what
   keeps a dark-on-transparent logo visible on the green footer. */
.sponsor-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(27,58,43,0.12);
    border-radius: 10px;
    padding: 8px 14px;
    max-width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: #1B3A2B;
    transition: box-shadow .15s ease, transform .15s ease;
}

a.sponsor-tile:hover {
    box-shadow: 0 6px 16px rgba(27,58,43,0.18);
    transform: translateY(-1px);
}

a.sponsor-tile:focus-visible {
    outline: 3px solid #C9A227;
    outline-offset: 2px;
}

.sponsor-tile--small  { height: 56px;  }
.sponsor-tile--medium { height: 88px;  }
.sponsor-tile--large  { height: 120px; }

.sponsor-logo {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* A tall logo would otherwise make a tile far narrower than its neighbours. */
.sponsor-tile--small  .sponsor-logo { max-width: 180px; }
.sponsor-tile--medium .sponsor-logo { max-width: 260px; }
.sponsor-tile--large  .sponsor-logo { max-width: 360px; }

.sponsor-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sponsor-credit {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.sponsor-principal-body {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.home-principal-sponsor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* On a phone the large tile would crowd the text beside it, so it steps down. */
@media (max-width: 599px) {
    .sponsor-tile--large { height: 88px; }
    .sponsor-tile--large .sponsor-logo { max-width: 260px; }
}