/*
 * LeagueRoots base styles.
 *
 * Everything visual is expressed against custom properties whose values come from
 * /theme.css, which is generated per organization from TenantTheme. The fallbacks below
 * keep the site legible if that stylesheet is missing or a tenant has not been branded,
 * which is the normal state while onboarding is still in progress.
 *
 * Load order matters: bootstrap.min.css, then this file, then /theme.css.
 */

:root {
    --lr-color-primary: #0b2545;
    --lr-color-accent: #c8102e;
    --lr-color-surface: #ffffff;
    --lr-color-text: #1c1c1c;
    --lr-color-on-primary: #ffffff;

    --lr-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lr-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --lr-radius: 0.5rem;

    /* Not themeable: neutral scale and spacing stay consistent across organizations so
       layouts cannot be broken by a branding change. */
    --lr-muted: #6b7280;
    --lr-border: #e5e7eb;
    --lr-surface-sunken: #f8f9fa;
    --lr-shadow: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
}

body {
    background-color: var(--lr-color-surface);
    color: var(--lr-color-text);
    font-family: var(--lr-font-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .lr-display {
    font-family: var(--lr-font-heading);
}

main {
    flex: 1 0 auto;
}

/* Focus must remain clearly visible whatever an organization does to its palette;
   keyboard and screen-reader users are not an optional audience. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--lr-color-accent);
    outline-offset: 2px;
}

.lr-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: 0.75rem 1rem;
    background: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
}

.lr-skip-link:focus {
    left: 0;
}

/* ---- Header ---- */

.lr-header {
    background-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
    box-shadow: var(--lr-shadow);
}

.lr-header .navbar-brand,
.lr-header .nav-link {
    color: var(--lr-color-on-primary);
}

.lr-header .nav-link:hover,
.lr-header .nav-link:focus {
    color: var(--lr-color-on-primary);
    text-decoration: underline;
}

/* Public menu: a heading that is also a page - its words link, the caret beside them opens. */
.lr-nav-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.lr-nav-split > .dropdown-toggle-split {
    border: 0;
    background: transparent;
}

/* In the collapsed phone menu the drop-down is in the flow, so it takes its own line. */
.lr-nav-split > .dropdown-menu {
    flex-basis: 100%;
}

/* A desktop with a mouse opens drop-downs on hover as well. No gap between heading and menu,
   or the pointer leaves the item on its way down and the menu closes under it. */
/* Below the heading, however the menu was opened. Bootstrap places a navbar drop-down only
   when its own toggle opens it (via a data-bs-popper attribute); one opened by the hover rule
   below has no such attribute, so without this it sat at its static position - on top of the
   heading row. */
@media (min-width: 768px) {
    .lr-header .navbar-expand-md .dropdown > .dropdown-menu {
        top: 100%;
        left: 0;
        margin-top: 0;
    }

    .lr-header .navbar-expand-md .dropdown > .dropdown-menu-md-end {
        right: 0;
        left: auto;
    }
}

@media (min-width: 768px) and (hover: hover) {
    .lr-header .navbar-expand-md .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Admin menu: the group holding the current page reads as current, and so does the page. */
.lr-admin-nav .nav-link.active {
    color: var(--lr-color-on-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

.lr-admin-nav .dropdown-item.active,
.lr-admin-nav .dropdown-item:active {
    background-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
}

.lr-brand-logo {
    display: block;
    max-height: 3rem;
    max-width: min(60vw, 18rem);
    width: auto;
    height: auto;
}

/* A logo drawn for a white page, on a white panel so it survives a coloured header. */
.lr-brand-logo-light {
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--lr-radius) * 0.75);
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

/* ---- Components ---- */

.btn-primary {
    background-color: var(--lr-color-primary);
    border-color: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
}

.btn-accent {
    background-color: var(--lr-color-accent);
    border-color: var(--lr-color-accent);
    color: #fff;
}

.lr-card {
    background: var(--lr-color-surface);
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius);
    box-shadow: var(--lr-shadow);
    padding: 1.25rem;
}

.lr-muted {
    color: var(--lr-muted);
}

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

.lr-footer {
    flex-shrink: 0;
    background: var(--lr-surface-sunken);
    border-top: 1px solid var(--lr-border);
    padding: 1.5rem 0;
    color: var(--lr-muted);
    font-size: 0.9rem;
}

/* The page editor's palette (admin, Content/Edit): stays in view while the page scrolls, so
   anything can be dragged to any part of a long page. DECISIONS #76. */
.lr-palette {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.lr-palette-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lr-muted);
    margin: 1rem 0 0.15rem;
}

.lr-palette-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--lr-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    cursor: grab;
    color: inherit;
}

.lr-palette-item:hover,
.lr-palette-item:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 1px 4px rgb(37 99 235 / 15%);
}

.lr-palette-item.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.lr-palette-grip {
    color: #9ca3af;
    letter-spacing: -0.3em;
    line-height: 1.2;
    padding-top: 0.1rem;
}

.lr-palette-name {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
}

.lr-palette-desc {
    display: block;
    font-size: 0.775rem;
    color: var(--lr-muted);
}

/* Where a dragged item will land. Drawn over the editor's iframe, never inside the content. */
.lr-drop-line {
    position: fixed;
    z-index: 2000;
    height: 4px;
    border-radius: 2px;
    background: #2563eb;
    box-shadow: 0 0 0 2px rgb(37 99 235 / 25%);
    pointer-events: none;
}

.lr-drop-line::before,
.lr-drop-line::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
}

.lr-drop-line::before { left: -6px; }
.lr-drop-line::after { right: -6px; }

/* A section spans the page, so its line is a little heavier than a widget's. */
.lr-drop-line.is-section { height: 6px; }

/* Admin's footer: the public one's look, a little quieter, since it sits under work screens. */
.lr-admin-footer {
    padding: 1rem 0;
    font-size: 0.8rem;
}

/* Registration forms are long and are frequently completed on a phone at a ball field,
   so touch targets stay comfortable rather than compact. */
@media (max-width: 576px) {
    .form-control,
    .form-select,
    .btn {
        min-height: 2.75rem;
    }
}

/* ---- Editing a block on the page it appears on ---- */

/* Only rendered for an administrator of this organization: the class is added by the
   content-block tag helper, and never for a visitor. */
.lr-editable {
    position: relative;
    outline: 1px dashed transparent;
    outline-offset: 0.25rem;
    transition: outline-color 120ms ease-in-out;
    cursor: text;
}

.lr-editable:hover {
    outline-color: var(--lr-accent, #888);
}

.lr-editing {
    outline: 2px solid var(--lr-accent, #888);
    background-color: rgba(255, 255, 255, 0.04);
}

/* The placeholder for a slot nobody has written. Invisible to everyone else, because for them
   the slot renders nothing at all. */
.lr-editable-empty {
    margin: 0;
    opacity: 0.65;
    font-style: italic;
}

.lr-editable-toolbar {
    margin: 0.5rem 0;
}

/* ---- Page layouts ----
   The structures PageLayouts writes into a page body. Colours come from the theme tokens, so a
   layout looks like the organization that uses it; nothing here is set inline, because the
   sanitizer strips style attributes. */

.lr-section {
    margin-bottom: 2.5rem;
}

.lr-section:last-child {
    margin-bottom: 0;
}

/* A picture with the title over it. The picture is an <img> rather than a CSS background
   because it is the organization's content and must be swappable in the editor. */
.lr-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 18rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    border-radius: var(--lr-radius);
    background-color: var(--lr-color-primary);
    color: #ffffff;
    box-shadow: var(--lr-shadow);
}

.lr-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lr-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 65%), rgb(0 0 0 / 5%) 70%);
}

.lr-hero-body {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    padding: 2rem;
}

.lr-hero-body h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #ffffff;
}

.lr-hero-body .lead {
    margin-bottom: 0.75rem;
}

.lr-hero-body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .lr-hero {
        min-height: 24rem;
    }

    .lr-hero-body {
        padding: 3rem;
    }
}

/* A column with a picture on top: three of these make the three-column layouts. */
.lr-tile {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius);
    background: var(--lr-color-surface);
    box-shadow: var(--lr-shadow);
}

.lr-tile-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.lr-tile-body {
    padding: 1.25rem;
}

.lr-tile-body h3 {
    font-size: 1.15rem;
}

.lr-tile-body > :last-child {
    margin-bottom: 0;
}

/* 80/20: Bootstrap's twelve columns can only do 83/17 or 75/25. */
.lr-split {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .lr-split {
        grid-template-columns: 4fr 1fr;
    }
}

.lr-split-side {
    padding: 1.25rem;
    border-radius: var(--lr-radius);
    background: var(--lr-surface-sunken);
    font-size: 0.95rem;
}

.lr-split-side > :last-child {
    margin-bottom: 0;
}

.lr-rounded-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--lr-radius);
    box-shadow: var(--lr-shadow);
}

.lr-feature + .lr-feature {
    margin-top: 2.5rem;
}

/* Call to action: a band in the organization's primary colour. */
.lr-cta {
    margin-top: 2.5rem;
    padding: 2.5rem 2rem;
    border-radius: var(--lr-radius);
    background: var(--lr-color-primary);
    color: var(--lr-color-on-primary);
    text-align: center;
}

.lr-cta h2 {
    color: var(--lr-color-on-primary);
}

.lr-cta p:last-child {
    margin-bottom: 0;
}

/* Admin: the banner over a draft shown on the public site. */
.lr-preview-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.5rem 1rem;
    background: #ffc107;
    color: #1c1c1c;
    font-size: 0.9rem;
    text-align: center;
}

/* Admin: the layout picker's miniature diagrams. */
.lr-layout-option {
    display: block;
    height: 100%;
    padding: 0.75rem;
    border: 2px solid var(--lr-border);
    border-radius: var(--lr-radius);
    cursor: pointer;
}

.btn-check:checked + .lr-layout-option {
    border-color: var(--lr-color-primary);
    background: var(--lr-surface-sunken);
}

.lr-layout-diagram {
    display: grid;
    gap: 3px;
    height: 3.5rem;
    margin-bottom: 0.5rem;
}

.lr-layout-diagram span {
    border-radius: 2px;
    background: var(--lr-border);
}

.lr-layout-diagram .is-hero {
    background: var(--lr-color-primary);
    opacity: 0.6;
}

/* The contact form's honeypot: off-screen rather than display:none, which some bots notice. */
.lr-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Sections and widgets added from the page editor ----
   See PageSections. Grids rather than Bootstrap's twelve columns, which cannot do 20/80. Every
   one is a single column on a phone. */

.lr-cols {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.lr-cols > div > :last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .lr-cols-50-50 { grid-template-columns: 1fr 1fr; }
    .lr-cols-20-80 { grid-template-columns: 1fr 4fr; }
    .lr-cols-80-20 { grid-template-columns: 4fr 1fr; }
    .lr-cols-30-70 { grid-template-columns: 3fr 7fr; }
    .lr-cols-70-30 { grid-template-columns: 7fr 3fr; }
    .lr-cols-three { grid-template-columns: repeat(3, 1fr); }
    .lr-cols-four { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .lr-cols-four { grid-template-columns: repeat(4, 1fr); }
}

.lr-quote {
    margin: 0;
    padding: 1.5rem 1.75rem;
    border-left: 6px solid var(--lr-color-accent);
    border-radius: var(--lr-radius);
    background: var(--lr-surface-sunken);
    font-size: 1.25rem;
    font-style: italic;
}

.lr-quote > :last-child {
    margin-bottom: 0;
}

.lr-quote-by {
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
}

.lr-quote-by::before {
    content: "\2014\00a0";
}

/* A grid of pictures, as many as are put in it. */
.lr-gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    margin-bottom: 1.5rem;
}

.lr-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--lr-radius);
}

/* Rotating pictures. Without JavaScript they simply stack; lr-carousel.js turns them into a
   Bootstrap carousel and adds lr-carousel-ready. */
.lr-carousel {
    margin-bottom: 1.5rem;
}

.lr-carousel:not(.lr-carousel-ready) img {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: var(--lr-radius);
}

.lr-carousel-ready {
    overflow: hidden;
    border-radius: var(--lr-radius);
    box-shadow: var(--lr-shadow);
}

.lr-carousel-ready .carousel-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.lr-widget-live {
    margin-bottom: 1.5rem;
}

/* ---- Store (DECISIONS #64) ---- */

.lr-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
}

.lr-store-card {
    display: flex;
    flex-direction: column;
    background: var(--lr-color-surface);
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius);
    box-shadow: var(--lr-shadow);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lr-store-card:hover,
.lr-store-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .lr-store-card { transition: none; }
    .lr-store-card:hover, .lr-store-card:focus-visible { transform: none; }
}

.lr-store-card-image {
    display: block;
    aspect-ratio: 1 / 1;
    background: #f1f3f5;
}

.lr-store-card-image img,
.lr-store-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.lr-store-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem 1rem;
}

.lr-store-card-name {
    font-weight: 600;
}

.lr-store-card-price {
    color: var(--lr-color-primary, inherit);
    font-weight: 600;
}

.lr-store-photo {
    aspect-ratio: 1 / 1;
    background: #f1f3f5;
    border-radius: var(--lr-radius);
    overflow: hidden;
}

.lr-store-thumb {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    border-radius: calc(var(--lr-radius) * 0.5);
    background: #f1f3f5;
}

.lr-store-preview {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    border-radius: var(--lr-radius);
    background: #f1f3f5;
}

/* Category pills in the organization's own colour, not Bootstrap's blue. */
.lr-store-nav .nav-link {
    color: var(--lr-color-primary);
}

.lr-store-nav .nav-link.active {
    background-color: var(--lr-color-primary);
    color: #fff;
}

/* ---- site alerts (admin: Website > Site alerts) ----
   Full-width bars under the header. Fixed, readable colours rather than the theme's: an
   organization's accent colour is not guaranteed to say "warning", and an urgent closure
   must look urgent on every community organization's site. */
.lr-site-alert {
    padding: .6rem 0;
    font-weight: 500;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
}
/* Centred across the page. The close button sits at the right edge, outside the flow, with
   matching room on both sides so it never pushes the text off centre or overlaps it. */
.lr-site-alert .container { position: relative; }
.lr-site-alert p { line-height: 1.4; text-align: center; }
.lr-site-alert-dismissible p { padding: 0 2.25rem; }
.lr-site-alert .btn-close {
    position: absolute;
    right: var(--bs-gutter-x, .75rem);
    top: 50%;
    transform: translateY(-50%);
}
.lr-site-alert-link {
    margin-left: .35rem;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}
.lr-site-alert-link:hover { color: inherit; text-decoration-thickness: 2px; }
.lr-site-alert-info { background: #e7f1fb; color: #0b3a66; }
.lr-site-alert-success { background: #e5f4e8; color: #19512a; }
.lr-site-alert-warning { background: #fff3cd; color: #5c4400; }
.lr-site-alert-urgent { background: #b42318; color: #ffffff; }
.lr-site-alert-urgent .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---- store product pictures ----
   Thumbnails under the main picture; choosing a style or size linked to one shows it. */
.lr-store-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}
.lr-store-thumb {
    width: 4.5rem;
    height: 4.5rem;
    padding: .2rem;
    border: 2px solid var(--lr-border);
    border-radius: var(--lr-radius);
    background: var(--lr-color-surface);
}
.lr-store-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lr-store-thumb:hover { border-color: var(--lr-muted); }
.lr-store-thumb.is-current { border-color: var(--lr-color-primary); }