/* Homepage styles — matches the existing Classic ASP site layout */
/* CSS custom properties set dynamically by DynamicStyles.razor */

:root {
    --sa-primary-color: #000000;
    --sa-secondary-color: #000000;
    --sa-heading-font: 'Open Sans', Tahoma, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --sa-body-font: 'Roboto', Tahoma, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --sa-nav-font: 'Roboto Condensed', Tahoma, Arial, sans-serif;
    --sa-header-title-font: var(--sa-heading-font);
    --sa-header-title-font-size: 60px;
    --sa-header-font-color: #ffffff;
    --sa-bg-color: #ffffff;
    --sa-bg-image: none;
    --sa-bg-opacity: 1;
    --sa-hover-bg: #F2F2F2;
}

html {
    overflow-y: scroll;
}

/* === Reset === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--sa-body-font);
    font-size: 13px;
    color: #000000;
    background-color: var(--sa-bg-color);
    background-image: var(--sa-bg-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sa-heading-font);
    line-height: 1.3;
}

/* Sidebar headings stay on the body font for visual cohesion with the
   compact lists below them. */
.sa-news-sidebar__title,
.sa-activities__title,
.sa-upcoming-games__title {
    font-family: var(--sa-body-font);
    color: #333;
}

h1 {
    font-size: 23px;
    font-weight: 700;
    margin: 0 0 16px;
}

h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
}

a {
    color: var(--sa-link-color, var(--sa-primary-color, #000000));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Keep images inline like the legacy site (Bootstrap 2: border 0,
   vertical-align middle). Admin-supplied HTML relies on this: rows of <img>
   tags must flow side by side (display:block force-breaks them onto separate
   lines) and legacy markup carries border="5"-style presentational attributes
   that author-level border:0 neutralizes. Components that want block images
   set it on their own class (.sa-paragraph__image, .sa-carousel__image, …). */
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

/* === Page Container === */
.sa-page {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* === Top Banner === */
.sa-top-banner {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 13px;
    opacity: 0.9;
}

.sa-top-banner__icon {
    margin-right: 8px;
}

.sa-top-banner a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

/* === Header === */
.sa-header {
    position: relative;
    height: var(--sa-header-height, 200px);
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3%;
    gap: 8%;
}

.sa-header__logo {
    height: var(--sa-logo-height, 160px);
    width: auto;
    z-index: 2;
}

/* Logo links to the start page (header + elite variants). display:contents keeps
   the <a> out of layout so the logo sizing/positioning is unchanged. */
.sa-logo-link {
    display: contents;
}

/* display:contents removes the <a>'s own box, so a focus ring on the link itself
   has nothing to paint — put the keyboard focus indicator on the child logo image
   so the link stays visibly focusable. */
.sa-logo-link:focus-visible img {
    outline: 2px solid var(--sa-primary-color, #0066cc);
    outline-offset: 2px;
}

.sa-header__title {
    flex: 1;
    z-index: 2;
}

.sa-header__title h1 {
    font-family: var(--sa-header-title-font);
    font-size: var(--sa-header-title-font-size);
    color: var(--sa-header-font-color);
    margin: 0;
    text-shadow: 0 0 5px #000000;
    line-height: 1;
    font-weight: 400;
}

.sa-header__subtitle {
    z-index: 2;
    color: var(--sa-sub-header-font-color, var(--sa-header-font-color));
    font-family: var(--sa-sub-header-title-font, var(--sa-header-title-font));
    text-shadow: 0 0 5px #000000;
    font-weight: 400;
    line-height: 1;
}

.sa-header__subtitle--line2 {
    font-size: var(--sa-sub-header-title-font-size, 28px);
}

.sa-header__subtitle--line3 {
    font-size: var(--sa-third-header-title-font-size, 32px);
    font-family: var(--sa-third-header-title-font, var(--sa-sub-header-title-font, var(--sa-header-title-font)));
    color: var(--sa-third-header-font-color, var(--sa-sub-header-font-color, var(--sa-header-font-color)));
}

/* Linear gradient overlay (legacy .linearBg) */
.sa-header--gradient {
    background: linear-gradient(to top, #000000, #445566);
}

/* === Section Tabs (main nav) === */
.sa-section-tabs {
    position: relative;
    background-color: var(--sa-primary-color, #003380);
    padding: 0;
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 5px;
    box-shadow: 0 0 10px #333;
}

/* Desktop: list is a flex row */
.sa-section-tabs__list {
    display: flex;
    flex-wrap: wrap;
}

.sa-section-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* 12px horizontal keeps parity with the old site's menu width — clubs with
       many sections otherwise wrap onto a second line. */
    padding: 9px 12px;
    background-color: transparent;
    border: none;
    color: var(--sa-on-primary, #ffffff);
    font-family: var(--sa-nav-font);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sa-section-tabs__tab:hover {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    text-decoration: none;
}

.sa-section-tabs__tab--active {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    font-weight: 700;
}

/* Dropdown menu for section tabs */
.sa-section-tabs__dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.sa-section-tabs__dropdown-icon {
    font-size: 10px;
    margin-left: 4px;
}

.sa-section-tabs__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.sa-section-tabs__dropdown--open .sa-section-tabs__dropdown-menu {
    display: block;
}

.sa-section-tabs__dropdown-item {
    display: block;
    padding: 8px 15px;
    color: #333;
    font-family: var(--sa-nav-font);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}

.sa-section-tabs__dropdown-item--active {
    font-weight: 700;
}

/* Login dropdown (right-aligned) */
.sa-section-tabs__login {
    position: relative;
    margin-left: auto;
}

.sa-section-tabs__login-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 270px;
    white-space: normal;
    flex-direction: column;
    padding: 12px;
    background-color: #ffffff;
    color: #333;
    font-family: var(--sa-body-font);
    font-size: 14px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.sa-section-tabs__login-dropdown p {
    margin: 0 0 6px;
}

.sa-section-tabs__login-dropdown p + p {
    margin-bottom: 12px;
}

.sa-section-tabs__login-dropdown p:last-child {
    margin-bottom: 0;
}

.sa-section-tabs__login:hover .sa-section-tabs__login-dropdown {
    display: flex;
}

.sa-section-tabs__dropdown-item:hover {
    background-color: var(--sa-hover-bg);
    color: #000000;
    text-decoration: none;
}
.sa-section-tabs .fa-house {
    margin-right: 6px;
    font-size:11px;
}

/* === Sub-menu bar (below section tabs) === */
.sa-submenu-bar {
    background-color: var(--sa-primary-color);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--sa-secondary-color);
}

.sa-submenu-bar__item {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--sa-on-primary, #ffffff);
    font-family: var(--sa-nav-font);
    font-size: 14px;
    text-transform: uppercase;
    transition: background-color 0.15s ease;
}

.sa-submenu-bar__item:hover {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    text-decoration: none;
}

.sa-submenu-bar--sub .sa-submenu-bar__item {
    color: var(--sa-on-secondary, #ffffff);
}

.sa-submenu-bar__item--active {
    background-color: var(--sa-secondary-color);
    color: var(--sa-on-secondary, #ffffff);
    font-weight: 700;
}

.sa-submenu-bar__caret {
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.7;
    line-height: 1;
}

.sa-submenu-bar--sub {
    background-color: var(--sa-secondary-color);
    border-bottom: 0;
    font-size: 13px;
}

.sa-submenu-bar--sub .sa-submenu-bar__item {
    text-transform: uppercase;
    font-size: 13px;
    padding: 6px 12px;
}

.sa-submenu-bar--sub .sa-submenu-bar__item--active {
    background-color: rgba(0, 0, 0, 0.18);
}

/* === Layout wrapper (submenu + content) === */
.sa-layout-wrapper {
    max-width: 1200px;
    margin: 0 auto 5px;
    box-shadow: 0 0 10px #333;
}

/* === Main Layout === */
.sa-layout {
    min-height: 1000px;
    background: #ffffff;
}

.sa-layout__content {
    padding: 25px 20px;
}

/* === Start Page Columns (main content + news sidebar) === */
.sa-start-columns {
    display: flex;
    gap: 14px;
}

.sa-start-columns__main {
    flex: 1;
    min-width: 0;
    padding-bottom: 20px;
    border-right: 1px dotted #ddd;
    padding-right: 14px;
}

/* Thin static page: cap main content at the same width as the news page (650px),
   matching legacy's tbl1 narrow article layout. */
.sa-start-columns__main--thin {
    max-width: 650px;
}

.sa-start-columns__sidebar {
    flex-shrink: 0;
    width: 260px;
    border-right: 1px dotted #ddd;
    padding-right: 14px;
}

/* === Section Layout (left sub-menu + content) === */
.sa-section {
    display: flex;
    gap: 20px;
}

.sa-section__menu {
    width: 180px;
    flex-shrink: 0;
}

.sa-section__content {
    flex: 1;
    min-width: 0;
}

/* === Left Sub Menu === */
.sa-sub-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sa-sub-menu__item {
    display: block;
    padding: 8px 12px;
    color: #000000;
    font-size: 14px;
    font-family: var(--sa-nav-font);
    transition: background-color 0.15s ease;
}

.sa-sub-menu__item:hover {
    background-color: var(--sa-hover-bg);
    text-decoration: none;
}

.sa-sub-menu__item--active {
    background-color: var(--sa-hover-bg);
    font-weight: 700;
}

.sa-sub-menu__subitem {
    padding-left: 24px;
    font-size: 13px;
}

/* === Ad Sidebar === */
.sa-ad-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: auto;
}

.sa-ad-sidebar__item {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: opacity 0.15s ease;
}

.sa-ad-sidebar__item:hover {
    opacity: 0.85;
}

.sa-ad-sidebar__item--framed {
    border: 1px solid #ddd;
    padding: 8px;
    background: #ffffff;
}

.sa-ad-sidebar__item img {
    width: auto;
    max-width: 100%;
    max-height: 150px;
    display: block;
    margin: 0 auto;
}

/* Grouped ads rotate as a slideshow. Pages are stacked in the same grid cell
   so the group keeps the height of its tallest page; the active page
   cross-fades in over the outgoing one (legacy: 1s jQuery fade every 3s). */
.sa-ad-sidebar__group {
    display: grid;
    /* A page shorter than the group's tallest one centres vertically in the
       slot instead of hugging its top (gh#201). */
    align-items: center;
}

.sa-ad-sidebar__group-page {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 0s linear 1s;
}

.sa-ad-sidebar__group-page--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
}

/* Separator rows: admin-entered headlines in the ad flow (e.g. "Gold
   sponsors"). Styled like the other sidebar box titles. */
.sa-ad-sidebar__separator {
    font-family: var(--sa-body-font);
    font-size: 13px;
    font-weight: 700;
    color: #333;
    padding-bottom: 8px;
    margin: 0 0 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-ad-sidebar__separator-spacer {
    height: 16px;
}

/* Mobile-only ad rotator (legacy annonsPelareMobil): one mobile-flagged ad at
   a time in a fixed strip above the content. Hidden on desktop, where the full
   ad pillar renders instead; the mobile rules live in the 980px block. */
.sa-ad-rotator {
    display: none;
}

/* === Carousel / News Slider === */
.sa-carousel-wrapper {
    margin: -25px -20px 25px;
    border-bottom: 3px solid var(--sa-secondary-color);
}

/* === News Carousel (hero) === */
.sa-carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    background-color: #1a1a1a;
}

.sa-carousel__track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 450px;
    overflow: hidden;
}

.sa-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sa-carousel__slide:hover .sa-carousel__image {
    transform: scale(1.03);
}

.sa-carousel__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--sa-primary-color, #333) 0%, var(--sa-secondary-color, #666) 100%);
}

.sa-carousel__overlay {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    min-width: 300px;
}

.sa-carousel__title {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 4px;
}

.sa-carousel__date {
    font-size: 12px;
    opacity: 0.9;
}

/* Nav arrows */
.sa-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    font-weight: 300;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    backdrop-filter: blur(4px);
}

.sa-carousel__nav:hover {
    background: rgba(0, 0, 0, 0.6);
}

.sa-carousel__nav--prev {
    left: 12px;
}

.sa-carousel__nav--next {
    right: 12px;
}

/* Indicators */
.sa-carousel__indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.sa-carousel__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, transform 0.2s;
}

.sa-carousel__indicator:hover {
    background: rgba(255, 255, 255, 0.7);
}

.sa-carousel__indicator--active {
    background: #fff;
    transform: scale(1.25);
}

/* === Paragraph/Content Block === */
.sa-paragraph {
    margin-bottom: 0;
}

.sa-paragraph__divider {
    border: 0;
    border-top: 1px solid #CCCCCC;
    margin-top: 18px;
    margin-bottom: 18px;
    clear: both;
}

.sa-paragraph__title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 5px;
}

.sa-paragraph__date {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}

.sa-paragraph__preamble {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.sa-paragraph__body {
    font-size: 13px;
    line-height: 1.5;
}

/* Bullet/numbered lists authored in admin rich-text content. The global reset
   (*, *::before, *::after { padding: 0 }) strips the browser's default ~40px
   list padding, so restore indentation here; scope to the rich-text containers
   so the site's flush nav/menu/sidebar lists (list-style: none) stay
   unaffected. Per-level padding gives nested lists progressive indentation,
   and the bottom margins separate the list block and its items from
   surrounding content. */
.sa-paragraph__body ul,
.sa-paragraph__body ol,
.sa-paragraph__preamble ul,
.sa-paragraph__preamble ol,
.sa-news-feed__text ul,
.sa-news-feed__text ol,
.sa-news-feed__preamble ul,
.sa-news-feed__preamble ol,
.sa-html-area__body ul,
.sa-html-area__body ol {
    padding-left: 40px;
    margin: 0 0 10px;
}

.sa-paragraph__body ul,
.sa-paragraph__preamble ul,
.sa-news-feed__text ul,
.sa-news-feed__preamble ul,
.sa-html-area__body ul {
    list-style: disc outside;
}

.sa-paragraph__body ol,
.sa-paragraph__preamble ol,
.sa-news-feed__text ol,
.sa-news-feed__preamble ol,
.sa-html-area__body ol {
    list-style: decimal outside;
}

.sa-paragraph__body li,
.sa-paragraph__preamble li,
.sa-news-feed__text li,
.sa-news-feed__preamble li,
.sa-html-area__body li {
    margin-bottom: 10px;
}

/* Paragraphs authored in admin rich-text content. The global reset
   (*, *::before, *::after { margin: 0 }) strips the browser's default <p>
   margins, so a single Enter (a new <p>) rendered with no visible gap and
   clubs compensated with double line breaks (GH issue 161). Restore a 14px
   gap matching the member app (Sa.App.MemberClient Messages.scss), scoped to
   the rich-text containers. The :last-child override keeps the containers'
   own bottom spacing intact (no double gap before e.g. "Läs mer" links). */
.sa-paragraph__body p,
.sa-paragraph__preamble p,
.sa-news-feed__text p,
.sa-news-feed__preamble p,
.sa-html-area__body p {
    margin: 0 0 14px;
}

.sa-paragraph__body p:last-child,
.sa-paragraph__preamble p:last-child,
.sa-news-feed__text p:last-child,
.sa-news-feed__preamble p:last-child,
.sa-html-area__body p:last-child {
    margin-bottom: 0;
}

/* Hide borders on tables embedded in admin-authored paragraph HTML.
   Legacy hemsida rendered these borderless in practice (the legacy editor
   didn't emit border attributes); modern editors / sanitized legacy content
   leave <table border="1"> in place, which the browser honors as visible
   1px borders. Scoping to .sa-paragraph so structural tables elsewhere
   in the site are unaffected. */
.sa-paragraph__body table,
.sa-paragraph__body th,
.sa-paragraph__body td,
.sa-paragraph__preamble table,
.sa-paragraph__preamble th,
.sa-paragraph__preamble td {
    border: 0;
}

/* === Legacy Bootstrap 2 grid (.row, .row-fluid, .span1-12, .offset1-12) ===

   Restored for admin-authored paragraph HTML only. The legacy hemsida
   shipped Bootstrap 2.3.2's grid in its global stylesheet, and customers
   pasted layouts like <div class="row-fluid"><div class="span6">...</div>
   <div class="span6">...</div></div> directly into the rich-text editor.
   Without these classes the columns collapse to inline divs in the new
   homepage and the side-by-side layout falls apart.

   We standardize on the percentage-based math from Bootstrap 2's .row-fluid
   (legacy bootstrap.css line ~406) regardless of whether the customer used
   .row or .row-fluid. The percentage variant scales to whatever container
   width the new homepage gives the paragraph body, so we don't have to
   carry the 940px outer container the legacy site assumed.

   12-column grid, 2.127659574468085% gutter between siblings. Scoped to
   .sa-paragraph__body and .sa-paragraph__preamble so the classes can't
   collide with anything in our own component CSS. */
.sa-paragraph__body .row,
.sa-paragraph__body .row-fluid,
.sa-paragraph__preamble .row,
.sa-paragraph__preamble .row-fluid {
    width: 100%;
}
.sa-paragraph__body .row::after,
.sa-paragraph__body .row-fluid::after,
.sa-paragraph__preamble .row::after,
.sa-paragraph__preamble .row-fluid::after {
    content: "";
    display: table;
    clear: both;
}
/* Enumerate explicit class names rather than [class*="span"] so we don't
   accidentally match author-written classes that happen to contain "span". */
.sa-paragraph__body .span1,
.sa-paragraph__body .span2,
.sa-paragraph__body .span3,
.sa-paragraph__body .span4,
.sa-paragraph__body .span5,
.sa-paragraph__body .span6,
.sa-paragraph__body .span7,
.sa-paragraph__body .span8,
.sa-paragraph__body .span9,
.sa-paragraph__body .span10,
.sa-paragraph__body .span11,
.sa-paragraph__body .span12,
.sa-paragraph__preamble .span1,
.sa-paragraph__preamble .span2,
.sa-paragraph__preamble .span3,
.sa-paragraph__preamble .span4,
.sa-paragraph__preamble .span5,
.sa-paragraph__preamble .span6,
.sa-paragraph__preamble .span7,
.sa-paragraph__preamble .span8,
.sa-paragraph__preamble .span9,
.sa-paragraph__preamble .span10,
.sa-paragraph__preamble .span11,
.sa-paragraph__preamble .span12 {
    float: left;
    box-sizing: border-box;
    min-height: 1px;
    margin-left: 2.127659574468085%;
}
.sa-paragraph__body .row > .span1:first-child,
.sa-paragraph__body .row > .span2:first-child,
.sa-paragraph__body .row > .span3:first-child,
.sa-paragraph__body .row > .span4:first-child,
.sa-paragraph__body .row > .span5:first-child,
.sa-paragraph__body .row > .span6:first-child,
.sa-paragraph__body .row > .span7:first-child,
.sa-paragraph__body .row > .span8:first-child,
.sa-paragraph__body .row > .span9:first-child,
.sa-paragraph__body .row > .span10:first-child,
.sa-paragraph__body .row > .span11:first-child,
.sa-paragraph__body .row > .span12:first-child,
.sa-paragraph__body .row-fluid > .span1:first-child,
.sa-paragraph__body .row-fluid > .span2:first-child,
.sa-paragraph__body .row-fluid > .span3:first-child,
.sa-paragraph__body .row-fluid > .span4:first-child,
.sa-paragraph__body .row-fluid > .span5:first-child,
.sa-paragraph__body .row-fluid > .span6:first-child,
.sa-paragraph__body .row-fluid > .span7:first-child,
.sa-paragraph__body .row-fluid > .span8:first-child,
.sa-paragraph__body .row-fluid > .span9:first-child,
.sa-paragraph__body .row-fluid > .span10:first-child,
.sa-paragraph__body .row-fluid > .span11:first-child,
.sa-paragraph__body .row-fluid > .span12:first-child,
.sa-paragraph__preamble .row > .span1:first-child,
.sa-paragraph__preamble .row > .span2:first-child,
.sa-paragraph__preamble .row > .span3:first-child,
.sa-paragraph__preamble .row > .span4:first-child,
.sa-paragraph__preamble .row > .span5:first-child,
.sa-paragraph__preamble .row > .span6:first-child,
.sa-paragraph__preamble .row > .span7:first-child,
.sa-paragraph__preamble .row > .span8:first-child,
.sa-paragraph__preamble .row > .span9:first-child,
.sa-paragraph__preamble .row > .span10:first-child,
.sa-paragraph__preamble .row > .span11:first-child,
.sa-paragraph__preamble .row > .span12:first-child,
.sa-paragraph__preamble .row-fluid > .span1:first-child,
.sa-paragraph__preamble .row-fluid > .span2:first-child,
.sa-paragraph__preamble .row-fluid > .span3:first-child,
.sa-paragraph__preamble .row-fluid > .span4:first-child,
.sa-paragraph__preamble .row-fluid > .span5:first-child,
.sa-paragraph__preamble .row-fluid > .span6:first-child,
.sa-paragraph__preamble .row-fluid > .span7:first-child,
.sa-paragraph__preamble .row-fluid > .span8:first-child,
.sa-paragraph__preamble .row-fluid > .span9:first-child,
.sa-paragraph__preamble .row-fluid > .span10:first-child,
.sa-paragraph__preamble .row-fluid > .span11:first-child,
.sa-paragraph__preamble .row-fluid > .span12:first-child {
    margin-left: 0;
}
.sa-paragraph__body .span12, .sa-paragraph__preamble .span12 { width: 100%; }
.sa-paragraph__body .span11, .sa-paragraph__preamble .span11 { width: 91.48936170212765%; }
.sa-paragraph__body .span10, .sa-paragraph__preamble .span10 { width: 82.97872340425532%; }
.sa-paragraph__body .span9,  .sa-paragraph__preamble .span9  { width: 74.46808510638297%; }
.sa-paragraph__body .span8,  .sa-paragraph__preamble .span8  { width: 65.95744680851064%; }
.sa-paragraph__body .span7,  .sa-paragraph__preamble .span7  { width: 57.44680851063829%; }
.sa-paragraph__body .span6,  .sa-paragraph__preamble .span6  { width: 48.93617021276595%; }
.sa-paragraph__body .span5,  .sa-paragraph__preamble .span5  { width: 40.42553191489362%; }
.sa-paragraph__body .span4,  .sa-paragraph__preamble .span4  { width: 31.914893617021278%; }
.sa-paragraph__body .span3,  .sa-paragraph__preamble .span3  { width: 23.404255319148934%; }
.sa-paragraph__body .span2,  .sa-paragraph__preamble .span2  { width: 14.893617021276595%; }
.sa-paragraph__body .span1,  .sa-paragraph__preamble .span1  { width: 6.382978723404255%; }

.sa-paragraph__body .offset12, .sa-paragraph__preamble .offset12 { margin-left: 104.25531914893617%; }
.sa-paragraph__body .offset11, .sa-paragraph__preamble .offset11 { margin-left: 95.74468085106382%; }
.sa-paragraph__body .offset10, .sa-paragraph__preamble .offset10 { margin-left: 87.23404255319149%; }
.sa-paragraph__body .offset9,  .sa-paragraph__preamble .offset9  { margin-left: 78.72340425531914%; }
.sa-paragraph__body .offset8,  .sa-paragraph__preamble .offset8  { margin-left: 70.2127659574468%; }
.sa-paragraph__body .offset7,  .sa-paragraph__preamble .offset7  { margin-left: 61.70212765957446%; }
.sa-paragraph__body .offset6,  .sa-paragraph__preamble .offset6  { margin-left: 53.191489361702125%; }
.sa-paragraph__body .offset5,  .sa-paragraph__preamble .offset5  { margin-left: 44.680851063829785%; }
.sa-paragraph__body .offset4,  .sa-paragraph__preamble .offset4  { margin-left: 36.170212765957444%; }
.sa-paragraph__body .offset3,  .sa-paragraph__preamble .offset3  { margin-left: 27.659574468085104%; }
.sa-paragraph__body .offset2,  .sa-paragraph__preamble .offset2  { margin-left: 19.148936170212764%; }
.sa-paragraph__body .offset1,  .sa-paragraph__preamble .offset1  { margin-left: 10.638297872340425%; }

/* Mobile: legacy Bootstrap 2 responsive collapsed spans below 768px to
   full-width stacked blocks. Keep that behavior — narrow paragraph
   containers can't hold a 12-column grid sensibly. */
@media (max-width: 767px) {
    .sa-paragraph__body .row > [class*="span"],
    .sa-paragraph__body .row-fluid > [class*="span"],
    .sa-paragraph__preamble .row > [class*="span"],
    .sa-paragraph__preamble .row-fluid > [class*="span"] {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

.sa-paragraph__figure {
    margin: 0;
}

.sa-paragraph__image {
    display: block;
    max-width: 100%;
    height: auto;
}

.sa-paragraph__caption {
    font-style: italic;
    font-size: 13px;
    margin-top: 5px;
    text-align: left;
}

.sa-paragraph--image-right,
.sa-paragraph--image-left {
    overflow: hidden;
}

.sa-paragraph--image-right .sa-paragraph__figure-wrap {
    float: right;
    max-width: 40%;
    margin: 0 0 10px 15px;
}

.sa-paragraph--image-left .sa-paragraph__figure-wrap {
    float: left;
    max-width: 40%;
    margin: 0 15px 10px 0;
}

.sa-paragraph--image-center .sa-paragraph__figure-wrap {
    text-align: center;
    margin: 10px 0;
}

.sa-paragraph--image-center .sa-paragraph__figure {
    display: inline-block;
    max-width: 100%;
}

.sa-paragraph__image-collage {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0;
}

.sa-paragraph__image-collage img {
    width: calc(33.333% - 4px);
    aspect-ratio: 1;
    object-fit: cover;
}

.sa-paragraph__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    margin: 5px 0 10px;
}

.sa-paragraph__gallery-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.sa-paragraph__gallery--lazy {
    display: none;
}

.sa-paragraph__gallery-link--extra {
    display: none;
}

.sa-paragraph__gallery-link--extra.sa-paragraph__gallery-link--revealed {
    display: block;
}

.sa-paragraph__gallery-toggle-wrap {
    margin-top: 10px;
}

.sa-paragraph__gallery-load {
    margin: 5px 0 10px;
    font-size: 14px;
}

.sa-paragraph__video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 10px 0;
}

.sa-paragraph__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.sa-paragraph__buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 24px;
}

/* When the next paragraph also renders buttons, drop the trailing margin so
   consecutive button blocks don't accumulate spacing. The second selector
   keeps the margin collapsed when an admin-toggled HasLine divider sits
   between the two button paragraphs (the divider itself is hidden below). */
.sa-paragraph:has(.sa-paragraph__buttons):has(+ .sa-paragraph .sa-paragraph__buttons) .sa-paragraph__buttons,
.sa-paragraph:has(.sa-paragraph__buttons):has(+ .sa-paragraph__divider + .sa-paragraph .sa-paragraph__buttons) .sa-paragraph__buttons {
    margin-bottom: 0;
}

/* Hide the admin-toggled divider when it falls between two button-only
   paragraph blocks. Visually the buttons should stack as one group; the
   horizontal rule between them is noise that admins enable inconsistently
   across paragraphs. */
.sa-paragraph:has(.sa-paragraph__buttons) + .sa-paragraph__divider:has(+ .sa-paragraph .sa-paragraph__buttons) {
    display: none;
}

/* Start-page buttons sit at the top of the welcome section, so tighten the
   top margin to keep them close to the carousel above. */
.sa-welcome .sa-paragraph__buttons {
    margin-top: 6px;
}

/* The first button paragraph in the welcome section flush-mounts against the
   carousel — no top margin. */
.sa-welcome .sa-paragraph:first-child .sa-paragraph__buttons {
    margin-top: 0;
}

.sa-paragraph__button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 80px;
    padding: 14px 20px;
    color: #ffffff;
    background-color: #000000;
    border-radius: 8px;
    /* Soft halo so a white background still reads as a button against the
       page. Cheap to render and disappears against dark colors. */
    box-shadow: 0 0 5px #ddd;
    /* filter-based hover keeps the admin-chosen background intact. */
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.sa-paragraph__button:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.sa-paragraph__button-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.sa-paragraph__button-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sa-paragraph__button-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.sa-paragraph__button-subtitle {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1.25;
}

.sa-paragraph__button-arrow {
    font-size: 16px;
    flex: 0 0 auto;
}

/* === Lightbox === */
.sa-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.sa-lightbox--open {
    display: flex;
}

.sa-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.sa-lightbox__image {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    z-index: 1;
}

.sa-lightbox__close {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 2;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
}

.sa-lightbox__close:hover {
    opacity: 0.7;
}

.sa-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #fff;
    font-size: 40px;
    padding: 10px 16px;
    cursor: pointer;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.sa-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.sa-lightbox__nav--prev {
    left: 10px;
}

.sa-lightbox__nav--next {
    right: 10px;
}

.sa-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-family: var(--sa-body-font);
}

/* === News === */
.sa-news-detail {
    position: relative;
    min-height: 300px;
    max-width: 650px;
}



.sa-news-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 4px;
}

.sa-news-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--sa-link-color, var(--sa-primary-color));
    font-size: 16px;
}

.sa-news-nav__link:hover {
    background: var(--sa-hover-bg);
}

.sa-news-nav__link--disabled {
    color: #cccccc;
    pointer-events: none;
}

.sa-news-nav__link--rss {
    margin-left: 8px;
    color: #ee802f;
}

/* The nav is absolutely positioned over the article's top-right corner, so the
   title must reserve space for it or long headlines flow under the arrows.
   120px = prev + next (32px each, 4px gap) + RSS (8px margin + 32px) + breathing room. */
.sa-news-detail .sa-paragraph__title {
    padding-right: 120px;
}

.sa-news-share {
    margin-top: 20px;
}

.sa-news-share__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #000000;
    color: #ffffff;
    font-size: 12px;
    border-radius: 9999px;
}

.sa-news-share__link:hover {
    background: #333333;
    color: #ffffff;
}

.sa-news-archive__title {
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0 10px;
}

.sa-news-archive {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e5e5;
}

.sa-news-archive__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sa-news-archive__link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-news-archive__date {
    flex-shrink: 0;
    font-size: 12px;
    color: #888;
}

/* === News Feed (Start page) === */
.sa-news-feed {
    display: flex;
    flex-direction: column;
}

.sa-news-feed__item {
    margin-bottom: 0;
}

.sa-news-feed__title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 0;
}

.sa-news-feed__section-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f2f2f2;
    padding: 1px 6px;
    border-radius: 2px;
    margin-bottom: 4px;
}

.sa-news-feed__title a {
    color: #000;
    text-decoration: none;
}

.sa-news-feed__title a:hover {
    text-decoration: underline;
}

.sa-news-feed__date {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.sa-news-feed__image {
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.sa-news-feed__image img {
    max-width: 100%;
    height: auto;
}

.sa-news-feed__image--right {
    float: right;
    margin-left: 10px;
    margin-bottom: 5px;
    text-align: right;
}

.sa-news-feed__image--right img {
    width: 180px;
    height: auto;
}

.sa-news-feed__image--left {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    text-align: left;
}

.sa-news-feed__image--left img {
    width: 180px;
    height: auto;
}

.sa-news-feed__image-text {
    margin-top: 5px;
    font-size: 11px;
    font-style: italic;
    color: #666;
    text-align: left;
}

.sa-news-feed__preamble {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
}

.sa-news-feed__readmore {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
}

.sa-news-feed__text {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
}

.sa-news-feed__more {
    clear: both;
}

.sa-news-feed__separator {
    border: 0;
    border-top: 1px solid #CCCCCC;
    margin-top: 18px;
    margin-bottom: 18px;
    clear: both;
}

.sa-news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
}

/* Admin-supplied HTML boxes (up to 2) shown above the rest of the sidebar. */
.sa-html-area {
    margin-bottom: 24px;
}

.sa-html-area__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin: 0 0 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    text-transform: uppercase;
    color: #333;
}

.sa-html-area__body {
    font-size: 14px;
    line-height: 1.4;
}

.sa-html-area__body img {
    max-width: 100%;
    height: auto;
}

.sa-news-sidebar__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    text-transform: uppercase;
    color: #333;
}

.sa-news-sidebar__item-image {
    float: right;
    height: 50px;
    width: 89px;
    object-fit: cover;
    object-position: center;
}

.sa-news-sidebar__item {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    text-decoration: none;
    transition: background-color 0.15s;
    overflow: hidden;
}

.sa-news-sidebar__item-title,
.sa-news-sidebar__item-meta {
    display: block;
    font-size: 12px;
}

.sa-news-sidebar__item:hover {
    background-color: #f9fafb;
}

.sa-news-sidebar__item-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    line-height: 1.3;
}

.sa-news-sidebar__item:hover .sa-news-sidebar__item-title {
    color: var(--sa-link-color, var(--sa-primary-color, #333));
}

.sa-news-sidebar__item-section {
    color: #000;
}

.sa-news-sidebar__item-date {
    font-size: 12px;
    color: #9ca3af;
}

.sa-news-sidebar__empty {
    font-size: 11px;
    color: #888;
    padding: 5px 0 15px;
}

.sa-activities {
    margin-bottom: 24px;
}

.sa-activities__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-activities__list {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
}

.sa-activities__item {
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    line-height: 1.3;
}

.sa-activities__date {
    color: #9ca3af;
}

.sa-activities__empty {
    font-size: 11px;
    color: #888;
    padding: 5px 0 15px;
}

/* === External RSS feeds sidebar === */
.sa-rss-feed {
    margin-bottom: 24px;
}

.sa-rss-feed__title {
    font-family: var(--sa-body-font);
    color: #333;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-rss-feed__list {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
}

.sa-rss-feed__item {
    border-bottom: 1px solid #e5e7eb;
}

.sa-rss-feed__link {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.3;
    color: #374151;
    text-decoration: none;
}

.sa-rss-feed__link:hover {
    background-color: #f9fafb;
    text-decoration: none;
}

.sa-rss-feed__item-title {
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    font-weight: 500;
}

.sa-rss-feed__item-date {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: #8b92a0;
}

/* === Representation team upcoming matches (main section sidebar) === */
.sa-rep-games {
    margin-bottom: 24px;
}

.sa-rep-games__title {
    font-family: var(--sa-body-font);
    color: #333;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-rep-games__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.sa-rep-games__card {
    display: block;
    padding: 12px;
    color: #374151;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    transition: background-color 0.15s, border-color 0.15s;
}

.sa-rep-games__card:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    text-decoration: none;
}

.sa-rep-games__section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 8px;
    text-align: center;
}

.sa-rep-games__matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.sa-rep-games__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.sa-rep-games__logo {
    height: 36px;
    max-width: 60px;
    object-fit: contain;
}

.sa-rep-games__team-name {
    font-size: 12px;
    line-height: 1.2;
    color: #374151;
    overflow-wrap: anywhere;
}

.sa-rep-games__team-name--ours {
    font-weight: 700;
}

.sa-rep-games__vs {
    font-size: 13px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}

.sa-rep-games__meta {
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
}

/* === Upcoming Games sidebar === */
.sa-upcoming-games {
    margin-bottom: 24px;
}

.sa-upcoming-games__title {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-upcoming-games__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-upcoming-games__item {
    border-bottom: 1px solid #e5e7eb;
}

.sa-upcoming-games__link {
    display: block;
    padding: 6px 0;
    color: #374151;
    text-decoration: none;
}

.sa-upcoming-games__link:hover {
    background-color: #f9fafb;
    text-decoration: none;
}

.sa-upcoming-games__meta {
    font-size: 10px;
    line-height: 1.2;
    color: #8b92A0;
    margin-top: 0px;
    margin-left: 28px;
}

.sa-upcoming-games__team {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 12px;
    line-height: 1.2;
}

.sa-upcoming-games__team-logo {
    flex: 0 0 22px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-upcoming-games__team-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sa-upcoming-games__team-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-upcoming-games__team-score {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

/* === Pagination === */
.sa-pagination {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 20px;
}

.sa-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    color: #000000;
    transition: background-color 0.15s ease;
}

.sa-pagination__link:hover {
    background-color: var(--sa-hover-bg);
    text-decoration: none;
}

.sa-pagination__link--active {
    background-color: #000000;
    color: #ffffff;
}

.sa-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: #888888;
}

/* === Calendar (list view) === */
.sa-calendar {
    width: 100%;
}

.sa-calendar__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.sa-calendar__subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sa-calendar__subscribe-btn:hover {
    background-color: #f3f4f6;
}

.sa-subscribe-panel {
    display: none;
    margin-bottom: 16px;
    padding: 14px 16px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}

.sa-subscribe-panel--open {
    display: block;
}

.sa-subscribe-panel h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.sa-subscribe-panel h4 {
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
}

.sa-subscribe-panel ol {
    margin: 0 0 8px 18px;
    padding: 0;
}

.sa-subscribe-panel li {
    margin: 6px 0;
}

.sa-subscribe-panel__copy {
    margin-top: 6px;
    padding: 4px 12px;
    background-color: var(--sa-primary-color, #333);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.sa-subscribe-panel__copy:hover {
    opacity: 0.9;
}

.sa-subscribe-panel__error {
    margin: 0;
    color: #b91c1c;
}

.sa-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
}

.sa-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s;
}

.sa-calendar__nav:hover {
    background-color: var(--sa-hover-bg, #f0f0f0);
    text-decoration: none;
}

.sa-calendar__month {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
}

.sa-calendar__loading,
.sa-calendar__empty {
    padding: 24px 0;
    color: #6b7280;
    font-style: italic;
}

.sa-calendar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.sa-calendar__filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-calendar__filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-calendar__filter-select {
    padding: 4px 26px 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.sa-calendar__type-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sa-calendar__pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.sa-calendar__pill:hover {
    background-color: #f3f4f6;
    text-decoration: none;
}

.sa-calendar__pill--active {
    background-color: var(--sa-primary-color, #333);
    border-color: var(--sa-primary-color, #333);
    color: var(--sa-on-primary, #fff);
}

.sa-calendar__pill--active:hover {
    background-color: var(--sa-primary-color, #333);
    color: var(--sa-on-primary, #fff);
}

.sa-calendar__event-label {
    font-weight: 400;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    text-decoration: none;
}

.sa-calendar__event-label:hover {
    text-decoration: underline;
}

.sa-calendar__week-header {
    padding: 6px 10px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f3f4f6;
    border-radius: 4px;
}

.sa-calendar__week-header:first-child {
    margin-top: 0;
}

.sa-calendar__date-group {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #e5e7eb;
}

.sa-calendar__date-label {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    padding-top: 1px;
}

.sa-calendar__date-number {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: #6b7280;
}

.sa-calendar__date-day {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-transform: capitalize;
}

.sa-calendar__events {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sa-calendar__event {
    display: flex;
    gap: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.35;
}

.sa-calendar__event:hover {
    background-color: #f9fafb;
}

.sa-calendar__event-time {
    flex-shrink: 0;
    width: 90px;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
}

.sa-calendar__time-separator {
    margin: 0 2px;
    color: #9ca3af;
}

.sa-calendar__time-multiday {
    font-style: italic;
    color: #6b7280;
    margin-right: 4px;
}

.sa-calendar__event-details {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #374151;
}

.sa-calendar__event-sep {
    margin: 0 4px;
    color: #9ca3af;
}

.sa-calendar__event-heading {
    color: #374151;
}

.sa-calendar__event-location {
    color: #6b7280;
}

.sa-calendar__event-link {
    color: inherit;
    text-decoration: none;
}

.sa-calendar__event-link:hover .sa-calendar__event-heading {
    text-decoration: underline;
}

.sa-calendar__event--game .sa-calendar__event-heading,
.sa-calendar__event--game .sa-calendar__event-time {
    font-weight: 700;
}

/* === Documents (folder/file tree) === */
.sa-doc-tree {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
}

.sa-doc-tree__folder + .sa-doc-tree__folder {
    margin-top: 2px;
}

.sa-doc-tree__details {
    border: 0;
}

.sa-doc-tree__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
}

.sa-doc-tree .sa-doc-tree__row--alt {
    background-color: #f8f8f8;
}

.sa-doc-tree__summary::-webkit-details-marker {
    display: none;
}

.sa-doc-tree__summary:hover,
.sa-doc-tree__file:hover {
    background-color: #e8e8e8;
}

.sa-doc-tree__chevron {
    width: 12px;
    color: #888;
    transition: transform 0.15s ease;
    font-size: 11px;
}

.sa-doc-tree__details[open] > .sa-doc-tree__summary > .sa-doc-tree__chevron {
    transform: rotate(90deg);
}

.sa-doc-tree__folder-icon {
    width: 16px;
    color: #e8b745;
}

.sa-doc-tree__folder-icon--open { display: none; }

.sa-doc-tree__details[open] > .sa-doc-tree__summary > .sa-doc-tree__folder-icon--closed {
    display: none;
}

.sa-doc-tree__details[open] > .sa-doc-tree__summary > .sa-doc-tree__folder-icon--open {
    display: inline-block;
}

.sa-doc-tree__folder-name {
    font-weight: 600;
}

.sa-doc-tree__count {
    color: #999;
    font-size: 12px;
    font-weight: 400;
}

.sa-doc-tree__files {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-doc-tree__file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 36px;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
}

.sa-doc-tree__file--root {
    padding-left: 28px;
}

.sa-doc-tree__file-icon {
    width: 14px;
    color: #888;
    font-size: 13px;
}

.sa-doc-tree__file-name {
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.sa-doc-tree__file-name:hover {
    text-decoration: underline;
}

.sa-doc-tree__file-desc {
    color: #666;
    font-size: 12px;
    font-style: italic;
}

.sa-doc-tree__file-meta {
    display: flex;
    font-size: 12px;
    color: #999;
}

.sa-doc-tree__file-meta-cell {
    padding: 0 10px;
    text-align: right;
    white-space: nowrap;
    border-left: 1px solid #e0e0e0;
}

.sa-doc-tree__file-meta-cell--size {
    width: 70px;
}

.sa-doc-tree__file-meta-cell--date {
    width: 120px;
    padding-right: 4px;
}

.sa-doc-tree__empty {
    padding: 6px 28px;
    margin: 0;
    color: #999;
    font-style: italic;
    font-size: 13px;
}

/* === Gallery === */
.sa-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.sa-gallery__album {
    width: calc(33.333% - 10px);
    border: 1px solid #ddd;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.sa-gallery__album:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sa-gallery__album-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.sa-gallery__album-info {
    padding: 8px 10px;
}

.sa-gallery__album-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.sa-gallery__album-count {
    font-size: 12px;
    color: #999;
}

/* === Groups/Teams === */
.sa-team__hero {
    margin-bottom: 20px;
}

.sa-team__hero a {
    display: inline-block;
    border: 1px solid #dddddd;
    padding: 5px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(102, 102, 102, 0.5);
    max-width: 100%;
    cursor: pointer;
}

.sa-team__hero-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.sa-team__group-filter {
    margin-bottom: 12px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    max-width: 320px;
}

.sa-team__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    align-items: start;
}

.sa-team__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-team__list > li {
    border-top: 1px solid #e5e7eb;
}

.sa-team__list > li:last-child {
    border-bottom: 1px solid #e5e7eb;
}

.sa-team__list-header {
    font-weight: 700;
    font-size: 14px;
    padding: 16px 8px 6px;
    border-top: none !important;
    border-bottom: 1px solid #cccccc;
}

.sa-team__list-header + li {
    border-top: none;
}

.sa-team__member {
    border: none;
}

.sa-team__member-summary {
    list-style: none;
    cursor: pointer;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
    transition: background-color 0.15s;
}

.sa-team__member-summary::-webkit-details-marker,
.sa-team__member-summary::marker {
    display: none;
    content: '';
}

.sa-team__member-summary::after {
    content: '\203A';
    font-size: 18px;
    color: #9ca3af;
    margin-left: auto;
    transition: transform 0.15s;
}

.sa-team__member[open] > .sa-team__member-summary::after {
    transform: rotate(90deg);
}

.sa-team__member-summary:hover {
    background-color: #f8f8f8;
}

.sa-team__member-photo {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}

.sa-team__member-detail-photo {
    flex: 0 0 auto;
    width: 90px;
    height: auto;
    border: 1px solid #dddddd;
    padding: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.5);
    display: block;
}

.sa-team__member-name {
    font-weight: 400;
    font-size: 14px;
    flex: 1;
}

.sa-team__member-role {
    font-size: 12px;
    color: #6b7280;
}

.sa-team__member-age {
    font-size: 12px;
    color: #9ca3af;
}

.sa-team__member-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--sa-primary-color, #333);
    color: var(--sa-on-primary, #ffffff);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    opacity: 0.75;
}

.sa-team__member-detail-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 16px 10px;
    background-color: #fafafa;
}

.sa-team__member-details {
    margin: 0;
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    font-size: 13px;
}

.sa-team__member-details dt {
    font-weight: 600;
    color: #374151;
}

.sa-team__member-details dd {
    margin: 0;
    color: #4b5563;
}

.sa-team__member-description {
    grid-column: 1 / -1;
    margin-top: 8px !important;
    color: #4b5563;
    white-space: pre-wrap;
}

.sa-team__member-empty {
    grid-column: 1 / -1;
    color: #9ca3af;
}

.sa-group-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.sa-group-list__section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--sa-primary-color, #333);
}

.sa-group-list__section-title:first-of-type {
    margin-top: 12px;
}

.sa-group-list__row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.sa-group-list__row:hover {
    background-color: #fafafa;
}

.sa-group-list__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eee;
}

.sa-group-list__name {
    flex: 1 1 40%;
    font-weight: 500;
}

.sa-group-list__role {
    flex: 1 1 35%;
    color: #6b7280;
}

.sa-group-list__contact {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    min-width: 50px;
    justify-content: flex-end;
}

.sa-group-list__contact-link {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}

.sa-group-list__contact-link:hover {
    color: var(--sa-link-color, var(--sa-primary-color, #333));
}

.sa-loading {
    color: #6b7280;
    font-style: italic;
    padding: 16px 0;
}

.sa-empty {
    color: #9ca3af;
    font-style: italic;
    padding: 16px 0;
}

/* === Klaro Cookie Consent === */
/* Wider notice (Klaro caps it at 400px on desktop) so the learn-more link sits
   comfortably on the same row as the buttons. max-width also caps it on
   tablets; on phones the notice is full-width below this, so it just fills the
   screen up to 520px. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: 520px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 20px !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Keep "Anpassa dina val" on the buttons row, anchored bottom-left, with the
   buttons pushed to the right. Klaro's default flex-wrap bumps the grown
   learn-more link onto its own line above the buttons on a narrow notice. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
}

/* Keep the action buttons side by side in a row at every width. Klaro's
   small-screen rules otherwise set .cn-buttons to width:100% with 50%-wide
   inline-block buttons, whose inline whitespace pushes the second button onto
   its own line (a stacked column). A nowrap flex row prevents that. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-flow: row nowrap;
    flex: 0 0 auto;
    gap: 8px;
    width: auto;
    margin: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
    font-size: 16px;
}

.klaro .cookie-modal p,
.klaro .cookie-notice p,
.klaro .cookie-modal h1,
.klaro .cookie-modal li {
    color: #000000;
    line-height: 20px;
}

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
    padding: 8px 15px;
    background-color: #eeeeee;
    color: #000;
}

.klaro .cookie-modal .cm-btn.cm-btn-info.cm-btn.cm-btn-success {
    background-color: var(--sa-secondary-color);
    color: #ffffff;
}

.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success {
    background-color: var(--sa-primary-color);
    color: #ffffff;
}

.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: #ffffff;
}

.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: var(--sa-link-color, var(--sa-primary-color));
}

.klaro .cookie-notice a:focus,
.klaro .cookie-modal a:focus {
    border: none;
    outline: none;
}

.klaro .cookie-modal .slider,
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: none;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--sa-primary-color);
}

/* === Footer === */
.sa-footer {
    display: flex;
    align-items: center;
    padding: 15px;
    border-top: 1px solid #cccccc;
    background: #ffffff;
    color: #666;
    font-size: 12px;
}

.sa-footer a {
    color: #666;
}

.sa-footer a:hover {
    text-decoration: underline;
}

.sa-footer__powered {
    margin-left: auto;
}

.sa-footer__powered img {
    width: 180px;
    display: block;
}

.sa-footer__social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.sa-footer__social img {
    width: 24px;
    height: 24px;
}

/* === Mobile Navigation === */
/* === Mobile menu drawer === */
/* The hamburger (.sa-drawer-toggle) shows top-left on mobile only — its
   display:inline-flex + positioning live in the mobile media query below. The
   drawer and backdrop stay off-screen/hidden until body.sa-drawer-open is set
   (toggled by wwwroot/js/mobile-menu.js). Submenu panels overlay the root panel
   and slide in from the right when given .sa-drawer__panel--active. */
.sa-drawer-toggle {
    display: none;
}

.sa-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.sa-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1300;
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

body.sa-drawer-open {
    overflow: hidden;
}

body.sa-drawer-open .sa-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
}

body.sa-drawer-open .sa-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

.sa-drawer__viewport {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.sa-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow-y: auto;
}

.sa-drawer__panel--sub {
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.sa-drawer__panel--sub.sa-drawer__panel--active {
    transform: translateX(0);
}

.sa-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
}

.sa-drawer__title {
    font-family: var(--sa-nav-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    color: #000000;
}

.sa-drawer__icon-btn,
.sa-drawer__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: none;
    border: none;
    color: #333333;
    font-family: var(--sa-nav-font);
    font-size: 15px;
    cursor: pointer;
}

.sa-drawer__list {
    display: flex;
    flex-direction: column;
}

.sa-drawer__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #eeeeee;
    color: #000000;
    font-family: var(--sa-nav-font);
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sa-drawer__item-label {
    flex: 1 1 auto;
}

.sa-drawer__item--parent {
    justify-content: space-between;
}

/* Active page / section (and the group leading to it): left accent bar in the
   club's primary colour, subtle tint, bold. */
.sa-drawer__item--active {
    background-color: var(--sa-hover-bg, #f2f2f2);
    box-shadow: inset 3px 0 0 var(--sa-primary-color, #003380);
    font-weight: 700;
}

.sa-drawer__arrow {
    color: #999999;
    font-size: 13px;
}

.sa-drawer__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #eeeeee;
}

.sa-drawer__row .sa-drawer__item {
    flex: 1 1 auto;
    border-bottom: none;
}

.sa-drawer__arrow-btn {
    flex: 0 0 auto;
    padding: 0 18px;
    background: none;
    border: none;
    border-left: 1px solid #eeeeee;
    color: #999999;
    cursor: pointer;
}

.sa-drawer__divider {
    height: 8px;
    background-color: #f2f2f2;
}

.sa-drawer__section-label {
    padding: 14px 16px 8px;
    font-family: var(--sa-body-font);
    font-size: 16px;
    font-weight: 600;
    color: #555555;
}

/* In a submenu panel this label is the submenu's title (under the back link),
   so render it as a prominent heading rather than a small caption. */
.sa-drawer__panel--sub .sa-drawer__section-label {
    padding: 4px 16px 12px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #000000;
}

/* Login lives at the bottom of the root panel; margin-top:auto pins it to the
   foot when the menu is short, and it falls after the list when it overflows. */
.sa-drawer__login-footer {
    margin-top: auto;
    border-top: 1px solid #e0e0e0;
}

.sa-drawer__login-icon {
    color: #555555;
}

.sa-drawer__login-info {
    padding: 4px 16px 16px;
}

.sa-drawer__login-info p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #000000;
}

.sa-drawer__login-info strong {
    display: block;
    margin-top: 12px;
}

.sa-drawer__login-info a {
    color: var(--sa-link-color, var(--sa-primary-color));
    text-decoration: underline;
}

/* === Activity detail card === */
.sa-activity-detail {
    width: 100%;
}

.sa-activity-detail__header {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.sa-activity-detail__sep {
    margin: 0 6px;
    color: #9ca3af;
}

.sa-activity-detail__title {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.sa-activity-detail__cancelled-tag {
    margin-left: 10px;
    font-size: 14px;
    color: #b91c1c;
    text-decoration: none;
}

.sa-activity-detail__cancelled-banner {
    margin: 0 0 12px;
    padding: 8px 12px;
    background-color: #fef2f2;
    border-left: 3px solid #b91c1c;
    color: #b91c1c;
    font-weight: 600;
    font-size: 14px;
}

.sa-activity-detail--cancelled .sa-activity-detail__title strong,
.sa-activity-detail--cancelled .sa-activity-detail__team-name {
    text-decoration: line-through;
    color: #9ca3af;
}

.sa-activity-detail__matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 18px 0 24px;
}

.sa-activity-detail__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.sa-activity-detail__team-logo {
    max-height: 64px;
    max-width: 96px;
    object-fit: contain;
}

.sa-activity-detail__team-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.sa-activity-detail__score {
    text-align: center;
    min-width: 80px;
}

.sa-activity-detail__score-value {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.sa-activity-detail__score-empty {
    font-size: 22px;
    color: #9ca3af;
    white-space: nowrap;
}

.sa-activity-detail__score-vs {
    font-size: 18px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}

.sa-activity-detail__section-title {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 16px;
    font-weight: 600;
}

.sa-activity-detail__meta {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px 16px;
    margin: 0 0 18px;
    padding: 0;
    font-size: 14px;
    color: #374151;
}

.sa-activity-detail__meta dt {
    font-weight: 600;
    color: #6b7280;
}

.sa-activity-detail__meta dd {
    margin: 0;
}

.sa-activity-detail__description {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}

.sa-activity-detail__description p {
    margin: 0 0 8px;
}

/* === Elite design overrides ===
   Activated when hArea.HasEliteDesign = 1. Wraps the layout so:
   - Topmenu (section tabs) and submenu span the full viewport width.
   - Submenu is the row directly under the topmenu.
   - Logo is absolutely positioned at the top-left of the page.
   - The news carousel spans the full page width.
*/
.sa--elite {
    position: relative;
}

/* Centered at 1250px, but a ::before pseudo-element paints the bg color
   across the full viewport horizontally without clipping the children
   (so dropdowns that extend below the bar still render). */
.sa--elite .sa-section-tabs,
.sa--elite .sa-submenu-bar {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    position: relative;
    background-color: transparent;
}

.sa--elite .sa-section-tabs::before,
.sa--elite .sa-submenu-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
}

.sa--elite .sa-section-tabs::before {
    background-color: var(--sa-primary-color, #003380);
}

.sa--elite .sa-submenu-bar::before {
    background-color: var(--sa-secondary-color);
}

/* Push the first item past the absolute logo. */
.sa--elite .sa-section-tabs__list > :first-child,
.sa--elite .sa-submenu-bar > :first-child {
    margin-left: 60px;
}

.sa--elite .sa-layout-wrapper {
    max-width: 1250px;
    padding-left: 25px;
    padding-right: 25px;
    background: #ffffff;
    box-shadow: none;
}

.sa--elite .sa-section-tabs {
    margin-top: 0;
    box-shadow: none;
}

.sa--elite .sa-submenu-bar {
    background-color: var(--sa-secondary-color);
    border-bottom: 0;
}

.sa--elite .sa-submenu-bar__item {
    text-transform: none;
    color: var(--sa-on-secondary, #ffffff);
}

.sa--elite .sa-submenu-bar__item:hover {
    background-color: transparent;
    box-shadow: inset 0 -3px 0 var(--sa-on-secondary, #ffffff);
    color: var(--sa-on-secondary, #ffffff);
}

.sa--elite .sa-submenu-bar__item--active {
    box-shadow: inset 0 -3px 0 var(--sa-on-secondary, #ffffff);
    color: var(--sa-on-secondary, #ffffff);
}

/* Third-level (sub-)submenu: light gray bar with black text. */
.sa--elite .sa-submenu-bar--sub {
    background-color: #f8f8f8;
}

.sa--elite .sa-submenu-bar--sub::before {
    background-color: #f8f8f8;
}

.sa--elite .sa-submenu-bar--sub .sa-submenu-bar__item {
    color: #000000;
}

.sa--elite .sa-submenu-bar--sub .sa-submenu-bar__item:hover,
.sa--elite .sa-submenu-bar--sub .sa-submenu-bar__item--active {
    background-color: transparent;
    box-shadow: inset 0 -3px 0 #000000;
    color: #000000;
}

.sa-elite-logo {
    position: absolute;
    top: 5px;
    left: 15px;
    height: auto;
    width: auto;
    max-width: 90px;
    z-index: 1100;
}

.sa--elite-section .sa-elite-logo {
    max-width: 90px;
    height: auto;
}

/* When the viewport can't fit the page plus a logo column on each side,
   shrink the floating logo and tuck it into the left of the menu bar so it
   doesn't overlap the tabs. Logos aren't always square, so cap both
   dimensions independently. */
@media (max-width: 1350px) {
    .sa-elite-logo {
        top: 8px;
        left: 8px;
        height: auto;
        max-height: 60px;
        max-width: 60px;
    }

    .sa--elite .sa-section-tabs__list > :first-child,
    .sa--elite .sa-submenu-bar > :first-child {
        margin-left: 80px;
    }
}

.sa--elite .sa-carousel-wrapper {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

.sa--elite .sa-carousel__slide {
    height: 650px;
}

/* Bottom-up shadow over the image so light photos don't wash out the title. */
.sa--elite .sa-carousel__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
    z-index: 1;
}

.sa--elite .sa-carousel__overlay {
    z-index: 2;
    bottom: 40px;
    left: 0;
    right: 0;
    /* Mirror the elite content's effective inner padding: 25px on
       .sa-layout-wrapper plus 20px on .sa-layout__content = 45px, so the
       title and "Läs mer" pill align with the page content edges. */
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 45px;
    background: none;
    border-radius: 0;
    min-width: 0;
    text-align: left;
    transform: none;
}

.sa--elite .sa-carousel__title {
    font-size: 42px;
    margin: 0;
}

.sa--elite .sa-carousel__date {
    display: none;
}

.sa--elite .sa-carousel__overlay::after {
    content: "Läs mer";
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 30px;
    padding: 10px 16px;
    border: 1px solid white;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    line-height: 1;
}

@media (max-width: 1200px) {
    .sa--elite .sa-carousel__slide {
        height: 450px;
    }
}

/* === External link indicator === */
.sa-external-link-icon {
    margin-left: 6px;
    font-size: 0.75em;
    opacity: 0.7;
}

/* === Matches === */
.sa-matches {
    width: 100%;
}

.sa-matches__filters {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.sa-matches__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sa-matches__filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-matches__filter-select {
    padding: 4px 26px 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.sa-matches__heading {
    margin: 18px 0 6px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--sa-primary-color, #333);
    font-size: 18px;
    font-weight: 600;
}

.sa-matches__loading,
.sa-matches__empty {
    padding: 16px 0;
    color: #6b7280;
    font-style: italic;
}

.sa-matches__month {
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-matches__row {
    display: grid;
    grid-template-columns: 26px 38px 48px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

.sa-matches__row--cancelled .sa-matches__team-name {
    color: #9ca3af;
    text-decoration: line-through;
}

.sa-matches__day {
    font-weight: 700;
    color: #374151;
    text-align: right;
    white-space: nowrap;
}

.sa-matches__weekday {
    color: #6b7280;
    text-transform: lowercase;
    white-space: nowrap;
}

.sa-matches__time {
    color: #374151;
    white-space: nowrap;
}

.sa-matches__group {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7280;
}

.sa-matches__group-link {
    color: inherit;
    text-decoration: none;
}

.sa-matches__group-link:hover {
    text-decoration: underline;
}

.sa-matches__team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* Fixed box (not max-*) so every logo occupies the same width and the team
   names line up vertically regardless of each logo's aspect ratio. */
.sa-matches__team-logo {
    flex-shrink: 0;
    width: 24px;
    height: 20px;
    object-fit: contain;
}

.sa-matches__team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The club's own team is bolded so it stands out in the home/away pair. */
.sa-matches__team-name--own {
    font-weight: 700;
}

.sa-matches__team:hover .sa-matches__team-name {
    text-decoration: underline;
}

.sa-matches__team--single {
    grid-column: span 2;
}

.sa-matches__score {
    text-align: right;
    min-width: 52px;
    color: #374151;
    white-space: nowrap;
}

.sa-matches__score-empty {
    color: #9ca3af;
}

.sa-matches__more {
    display: inline-block;
    margin-top: 8px;
    color: var(--sa-link-color, var(--sa-primary-color, #333));
    font-size: 13px;
    text-decoration: none;
}

.sa-matches__more:hover {
    text-decoration: underline;
}

/* === Responsive === */

/* Tablet */
/* Mobile */
@media (max-width: 980px) {
    .sa-team__columns {
        grid-template-columns: 1fr;
    }

    .sa-carousel__slide {
        height: 250px;
    }

    .sa-carousel__overlay {
        padding: 32px 16px 16px;
    }

    .sa--elite .sa-carousel__overlay {
        bottom: 24px;
        padding: 0 45px;
    }

    .sa-carousel__title {
        font-size: 18px;
    }

    .sa-carousel__nav {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .sa-carousel__nav--prev {
        left: 8px;
    }

    .sa-carousel__nav--next {
        right: 8px;
    }

    /* Old-design banner: logo + headlines flow normally here. The left/top
       offsets that used to sit on these rules were vestigial from the legacy
       absolute layout — the elements are flex/static, so they did nothing.
       Drop the fixed height so a long headline wraps onto new rows and the
       banner grows to fit instead of clipping the wrapped text. */
    .sa-header {
        height: auto;
        min-height: 100px;
    }

    .sa-header__logo {
        height: 90px;
    }

    /* line-height:1 (base) leaves no leading, so a wrapped headline's rows
       collide — Swedish å/ä/ö diacritics touch the row above and read as one
       mushed row. Normal leading makes wrapped headlines look like normal text. */
    .sa-header__title h1 {
        font-size: 20px;
        line-height: 1.2;
    }

    .sa-header__subtitle {
        line-height: 1.2;
    }

    .sa-header__subtitle--line2 {
        font-size: 15px;
    }

    .sa-header__subtitle--line3 {
        font-size: 13px;
    }

    /* Mobile: the desktop section bar is replaced by the slide-in drawer. */
    .sa-section-tabs {
        display: none;
    }

    .sa-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 1200;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
    }

    /* Elite logo stays top-left; just shrink it to fit on mobile. */
    .sa-elite-logo {
        max-height: 40px;
        max-width: 40px;
    }

    .sa-submenu-bar {
        display: none;
    }

    .sa-layout__content {
        width: 100%;
        padding: 0;
    }

    .sa-carousel-wrapper {
        margin: 0;
    }

    .sa-start-columns {
        flex-direction: column;
    }

    .sa-start-columns__sidebar {
        width: 100%;
    }

    /* On mobile the full pillar is replaced by the rotator strip below — one
       mobile-flagged ad at a time above the content (gh#201, legacy parity).
       Stacking every ad below the content hid them in practice, and stacking
       them above it (the older order: -1 layout) forced users to scroll past
       every ad to reach the news. */
    .sa-ad-sidebar {
        display: none;
    }

    /* order: -1 hoists the rotator above the main content: every page renders
       <AdSidebar /> as the last direct child of the .sa-start-columns flex
       container, which is a column at this width. */
    .sa-ad-rotator {
        display: grid;
        order: -1;
        height: 120px;
        margin-bottom: 10px;
    }

    /* Slides stack in one grid cell (same cross-fade mechanics as the pillar's
       slideshow groups); each slide centres its ad both ways so a smaller ad
       floats in the middle of the strip instead of hugging the top-left. */
    .sa-ad-rotator .sa-ad-sidebar__group-page {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sa-ad-rotator img {
        display: block;
        max-width: 100%;
        max-height: 120px;
        width: auto;
        border-radius: 5px;
    }

    .sa-section {
        flex-direction: column;
        gap: 10px;
    }

    .sa-section__menu {
        width: 100%;
    }

    .sa-sub-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-paragraph--image-right,
    .sa-paragraph--image-left {
        flex-direction: column;
    }

    .sa-paragraph--image-right .sa-paragraph__figure-wrap,
    .sa-paragraph--image-left .sa-paragraph__figure-wrap {
        float: none;
        max-width: 100%;
        margin: 10px 0;
        order: 0;
    }

    .sa-calendar__date-group {
        flex-direction: column;
        gap: 8px;
    }

    .sa-calendar__date-label {
        display: flex;
        gap: 6px;
        align-items: baseline;
        width: auto;
        text-align: left;
        padding-left: 4px;
    }

    .sa-calendar__date-number {
        font-size: 16px;
    }

    .sa-calendar__event {
        flex-direction: column;
        gap: 2px;
    }

    .sa-calendar__event-time {
        width: auto;
        font-size: 13px;
    }

    .sa-gallery__album {
        width: 100%;
    }

    .sa-group-list__row {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .sa-group-list__name {
        flex: 1 1 100%;
    }

    .sa-group-list__role {
        flex: 1 1 auto;
    }

    .sa-matches__row {
        grid-template-columns: 22px 30px 42px minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .sa-matches__team-logo {
        display: none;
    }

}

/* === Print ===
   Printing has no viewport: the page box stands in for it in width media
   queries, so A4 portrait (~794px) matches the breakpoints above and prints
   the mobile layout, while landscape (~1123px) misses the 980px one and prints
   the desktop layout. Neither was built for paper.

   Keep this block last in the file: it matches the screen rules' specificity
   and wins on source order, not !important. */
@media print {
    .sa-drawer-toggle,
    .sa-drawer,
    .sa-drawer-backdrop {
        display: none;
    }

    /* --sa-logo-height has no ceiling; 90px is what the mobile layout already
       uses. Cap rather than set, so a smaller logo keeps its own size. */
    .sa-header__logo {
        height: min(var(--sa-logo-height, 160px), 90px);
    }

    .sa-header {
        height: auto;
    }

    /* On screen this floats in the gutter beside the centered page; a sheet has
       no gutter, so it lands on the content. */
    .sa-elite-logo {
        position: static;
    }

    /* The gap the menus reserved for the floating logo is now dead space. */
    .sa--elite .sa-section-tabs__list > :first-child,
    .sa--elite .sa-submenu-bar > :first-child {
        margin-left: 0;
    }

    img {
        max-width: 100%;
    }
}

/* === In-app mode (?showinapp=true) ===
   All chrome (banner, tabs, menus, header, footer) and side columns are
   omitted server-side in MainLayout / the pages; these rules clean up what
   remains so the main content stands alone. Last in the file so they win
   over the base and .sa--elite rules at equal specificity. */
/* Fill the full viewport (= the app's iframe/webview height): the wrapper
   stretches to the viewport as a flex column and the white .sa-layout takes
   whatever the content doesn't. dvh tracks mobile browser UI collapsing;
   vh is the fallback for engines without dvh support. */
.sa--inapp .sa-layout-wrapper {
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.sa--inapp .sa-layout {
    min-height: 0;
    flex: 1;
}

.sa--inapp .sa-layout__content {
    padding: 5px;
}

/* Without the sidebar/ad columns, the main column is the last one — drop its
   column divider so it doesn't render a stray dotted edge. */
.sa--inapp .sa-start-columns__main {
    border-right: none;
    padding-right: 0;
}