/* ##########################################################################
   BASE - Document, root layout variables, reset, scrollbars, main-content
   ########################################################################## */
html {
    scroll-behavior: smooth;
}

:root {
    --body-font-size: 1.1rem;
    --h1-font-family: 'RealScore Script', serif;
    --h1-font-size: 2.15em;
    --h1-margin-top: 2.0rem;  /* Top spacing for h1 in header sections */
    --h1-margin-bottom: 1.8rem;
    --h1-underline-thickness: 0.07em;
    --h1-underline-offset: 0.1em;
    --border-radius-sm: 0.18rem;
    
    /* Image display sizing: 2x scale-down for high-DPI displays and zoom comfort */
    /* Profile images (512x512) display at 256px (16rem) */
    --image-display-scale: 0.5;  /* 2x scale-down factor */
    --image-logo-max-size: 16rem;  /* ~256px for profile pics */
    --image-preview-max-size: 50rem;  /* ~800px for large previews (allows Large variant 1600px -> 800px) */

    --h2-font-size: 1.6em;
    --h2-margin-top: 4.0rem;  /* Top spacing for h2 in header sections (same as h1) */
    --h2-margin-top-content: 2.0rem;  /* Top spacing for h2 in content (less than headers) */
    --h2-margin-bottom: 0.5rem;
    --h2-underline-thickness: 0.11em;
    --h2-underline-offset: 0.15em;
    
    --h3-font-size: 1.4em;
    --h3-margin-top: 1.5rem;  /* Top spacing for h3 in content */
    --h3-margin-bottom: 1.2rem;
    --h4-margin-top: 1.2rem;  /* Top spacing for h4 in content */
    --h4-margin-bottom: 1rem;
    --p-margin-bottom: 1.5em;

    /* Shared mono styling */
    --mono-font-size: 0.9em;
    --mono-letter-spacing: -0.04rem;

    /* Shared heading styling (used for table headers, info field labels, h4) */
    --semantic-heading-mono-size: 1.1rem; /* Matches current table header size */
    
    /* Section container widths */
    /* Reading width: replaces character-counting wrapping (p { max-width: 85ch }) */
    /* Tuned to match current text wrapping behavior, accounting for font size (1.1rem) */
    --page-max-width-reading: 72ch; /* Narrow container for paragraphs and reading text */
    --page-max-width-cta: 75ch; /* Compact container for call-to-action sections (more focused, centered) */
    --page-max-width-entry: 120ch; /* Wider container for entry fields in Show/Edit views (structured data) */
    --page-max-width-wide: 1440px; /* For wide sections (may not be needed with edge-to-edge tables) */
    
    /* Left edge padding: used for consistent alignment across navbar brand and page content */
    /* This ensures h1 and navbar brand align to the same left position */
    --page-edge-padding: 0.75rem; /* 12px on mobile */
    --page-edge-padding-desktop: 1.5rem; /* 24px on desktop (576px+) */
}

@media (max-width: 575.98px) {
    :root {
        --body-font-size: 1.05rem;
        --h1-font-size: 2.0em;
        --h2-font-size: 1.5em;
        --h3-font-size: 1.3em;
        --semantic-heading-mono-size: 1rem;
    }
}

.h1-spacing h1,
.h2-spacing h2 {
    margin: 0;
}

/* Chamois-colored scrollbar (Firefox) */
* {
    scrollbar-color: var(--chamois-light) var(--chamois-lightest);
}

/* Chamois-colored scrollbar (WebKit/Blink) */
*::-webkit-scrollbar-track {
    background: var(--chamois-lightest);
}

*::-webkit-scrollbar-thumb {
    background: var(--chamois-light);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--chamois-medium);
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1 1 auto; /* grow to fill available space, shrink to allow scrolling */
    min-height: 0;  /* required so flex-shrink works when content exceeds viewport */
    overflow-x: hidden; /* Prevent horizontal scrollbars from negative margins */
    overflow-y: auto; /* Vertical scrollbar stays inside content, below navbar */
    display: flex;
    flex-direction: column;
}

/* For pages with sticky navigation, use visible overflow to allow sticky positioning */
.main-content:has(.reference-nav-sidebar) {
    overflow-x: visible;
}

@media (max-width: 575.98px) {
    .main-content {
        scrollbar-width: none; /* Firefox */
    }

    .main-content::-webkit-scrollbar {
        display: none; /* WebKit/Blink */
    }
}

/* Page content container: uses consistent left padding to align with navbar brand */
/* Override Bootstrap's default container-fluid padding to use only our custom padding */
.main-content > .container-fluid {
    flex: 1 0 auto; /* push footer to bottom when content is short */
    padding-left: var(--page-edge-padding) !important;
    padding-right: var(--page-edge-padding) !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

@media (min-width: 576px) {
    .main-content > .container-fluid {
        padding-left: var(--page-edge-padding-desktop) !important;
        padding-right: var(--page-edge-padding-desktop) !important;
    }
}

body {
    font-family: 'Carlito', sans-serif;
    font-size: var(--body-font-size);
    color: var(--black);
    background-color:var(--chamois-pale);
    padding-top: 3.5rem; /* Account for fixed navbar height */
    box-sizing: border-box; /* Keep the padded body within the viewport so .main-content can scroll fully */
    overflow: hidden; /* Scrollbar lives in .main-content, not over the navbar */
}

.skip-link {
    position: fixed;
    left: var(--page-edge-padding);
    top: 0.75rem;
    z-index: 1100;
    padding: 0.35rem 0.75rem;
    color: var(--black);
    background: var(--chamois-lightest);
    border: 1px solid var(--chamois-medium);
    border-radius: var(--border-radius-sm);
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

#main-content:focus {
    position: relative;
    outline: none !important;
}

#main-content:focus::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid var(--strawberry);
    pointer-events: none;
    z-index: 1000;
}

.center-wrapper {
    min-height: calc(100vh - 8.5rem); /* Adjust based on navbar + footer height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

.mt-4 {
    margin-top: 0.5rem !important;
}


/* ##########################################################################
   GLOBAL LINKS
   ########################################################################## */
a {
    color:var(--black);
    background-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 0.12em !important;
    text-underline-offset: 0.2em !important;
}

a:hover,
.navbar a:hover,
.footer a:hover,
.user-login a:hover,
.table a:not(.btn):hover,
.table a:not(.btn):focus {
    color: var(--strawberry) !important;
}

.help-index-link {
    font-size: 1em;
    color: var(--black);
    font-weight: 400;
}

.help-index-link img {
    transition: filter 0.2s ease;
}

.help-index-link:hover img {

    filter: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(4300%) hue-rotate(5deg) brightness(80%) contrast(101%);
}



/* ##########################################################################
   FOCUS STATES & CUSTOM RADIO
   ########################################################################## */
a:focus,
button:focus,
textarea:focus,
select:focus {
    outline: none !important;
}

/* Apply background color change ONLY for keyboard focus (tab navigation) */
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
select:focus-visible {
    background-color: var(--chamois-medium) !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4) !important;
}


/* Page header: no additional padding needed - inherits from container-fluid */
/* Padding is inherited from parent container-fluid which uses --page-edge-padding */


/* ##########################################################################
   TYPOGRAPHY & HEADINGS
   ########################################################################## */
h1, h2, h3 {
    font-weight: bold;
}

/* All h1 have double underline, text-width (via span wrapper) */
h1, .welcome-page h2 {
    font-size: var(--h1-font-size);
    font-family: var(--h1-font-family);
    text-decoration: none;
    margin-top: 0;
    margin-bottom: var(--h1-margin-bottom);
    display: inline-block;
}

h1 span, .welcome-page h2 span {
    position: relative;
    display: inline-block;
}

h1 span::after, .welcome-page h2 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: var(--h1-underline-offset);
    width: 100%;
    height: var(--h1-underline-thickness);
    background: var(--black);
    box-shadow: 0px 0.13em var(--black);
}

/* Linkable title segments (parent seshn/venue) inside the h1: keep the h1's own
   decorative underline, reveal the link only on hover. */
h1 a {
    color: inherit;
    text-decoration: none;
}

h1 a:hover {
    color: var(--strawberry);
    text-decoration: underline;
}

/* All h2 have single underline, text-width */
h2 {
    font-size: var(--h2-font-size);
    font-family: var(--h1-font-family);
    text-decoration: none;
    margin-top: var(--h2-margin-top-content);
    margin-bottom: var(--h2-margin-bottom);
    display: inline-block;
    position: relative;
    scroll-margin-top: 3.8rem; /* Account for fixed navbar (3.5rem) + some spacing */
}

/* Underline for all h2 (works for both direct content and span-wrapped content) */
h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: var(--h2-underline-offset);
    width: 100%;
    height: var(--h2-underline-thickness);
    background: var(--black);
}

/* Span wrapper for h2 (used by helper) - just for structure, underline is on h2::after */
h2 span {
    display: inline-block;
}

/* Spacing for h2 headings: consistent spacing regardless of context */
/* Targets divs that contain an h2 as direct child (works in forms and other contexts) */
/* h2 always needs space above (to separate from previous content) and less space below (to show following content belongs to it) */
div:has(> h2) {
    margin-bottom: var(--h2-margin-bottom); /* Space after entire section with h2 heading (0.5rem) */
}

div:has(> h2) > h2 {
    margin-top: var(--h2-margin-top); /* Space above h2 to separate from previous content (4.0rem, matches .h2-spacing) */
    margin-bottom: var(--h2-margin-bottom); /* Less space below h2 to show following content belongs to it (0.5rem) */
}

.h1-spacing {
    margin-top: var(--h1-margin-top);
    margin-bottom: var(--h1-margin-bottom);
}


.h2-spacing {
    margin-top: var(--h2-margin-top);
    margin-bottom: var(--h2-margin-bottom);
}

.welcome-page h2 {
    font-size: 2.1em; /* Close to h1 size but still h2 */
}

h3 {
    font-size: var(--h3-font-size);
    font-family: var(--h1-font-family);
    margin-top: var(--h3-margin-top);
    margin-bottom: var(--h3-margin-bottom);
    scroll-margin-top: 3.8rem; /* Account for fixed navbar (3.5rem) + some spacing */
}

h3.mb-0 {
    display: flex;
    align-items: flex-end;
}

h4 {
    font-size: var(--semantic-heading-mono-size);
    font-weight: bold;
    margin-top: var(--h4-margin-top);
    margin-bottom: var(--h4-margin-bottom);
    scroll-margin-top: 3.8rem; /* Account for fixed navbar (3.5rem) + some spacing */
}

/* CTA prompt: looks like an h4 but is NOT a document heading, so it doesn't
   create heading-order skips when placed under a section h2 next to a button. */
.cta-question {
    font-size: var(--semantic-heading-mono-size);
    font-weight: bold;
    line-height: 1.2; /* match Bootstrap heading line-height for identical rendering */
}

/* Remove bottom margin from last child elements to prevent extra spacing at end of containers */
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child {
    margin-bottom: 0;
}



/* ##########################################################################
   INFO & ENTRY FIELDS
   ########################################################################## */
.info {
    margin-top: 0.5em;
    margin-bottom: 2.5em;
}

/* Entry fields container: extend edge-to-edge (break out of container padding) */
.entry-fields {
    display: flex;
    flex-direction: column;
    width: calc(100% + 2 * var(--page-edge-padding));
    margin-left: calc(-1 * var(--page-edge-padding));
    margin-right: calc(-1 * var(--page-edge-padding));
    margin-bottom: 1.5rem;
}

.section-entry + #subscription-component .entry-fields {
    margin-top: -1.5rem;
}

/* On desktop, use larger values */
@media (min-width: 576px) {
    .entry-fields {
        width: calc(100% + 2 * var(--page-edge-padding-desktop));
        margin-left: calc(-1 * var(--page-edge-padding-desktop));
        margin-right: calc(-1 * var(--page-edge-padding-desktop));
    }
}

/* Each entry field (label + value pair) */
.entry-field {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 0.5px solid var(--chamois-light);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* Entry fields inside section-entry: extend edge-to-edge (break out of container padding) */
.section-entry > .entry-field,
.section-entry .entry-fields > .entry-field {
    width: calc(100% + 2 * var(--page-edge-padding));
    margin-left: calc(-1 * var(--page-edge-padding));
    margin-right: calc(-1 * var(--page-edge-padding));
}

@media (min-width: 576px) {
    .section-entry > .entry-field,
    .section-entry .entry-fields > .entry-field {
        width: calc(100% + 2 * var(--page-edge-padding-desktop));
        margin-left: calc(-1 * var(--page-edge-padding-desktop));
        margin-right: calc(-1 * var(--page-edge-padding-desktop));
    }
}

/* First column (label): align with page edge padding */
.entry-field [role="rowheader"] {
    padding-left: var(--page-edge-padding) !important;
}

/* Last column (value): horizontal padding so it doesn't stick to edges on mobile wrap */
.entry-field [role="cell"] {
    padding-right: var(--page-edge-padding) !important;
    padding-left: var(--page-edge-padding) !important;
}

@media (min-width: 576px) {
    .entry-field [role="rowheader"] {
        padding-left: var(--page-edge-padding-desktop) !important;
    }
    
    .entry-field [role="cell"] {
        padding-right: var(--page-edge-padding-desktop) !important;
        padding-left: 0 !important; /* desktop: value sits next to label, Bootstrap gutter handles gap */
    }
}

/* Remove bottom border and margin from last entry field */
.entry-field:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Reset address tag styling inside entry fields to prevent extra spacing */
.entry-field address {
    margin-bottom: 0;
    font-style: normal;
}

/* Field labels in entry fields: align with column headers / h4 styling */
.info [role="rowheader"] {
    font-size: var(--semantic-heading-mono-size);
    font-weight: bold;
}

/* Entity cards: match app background, remove white background */

/* ##########################################################################
   ENTITY CARD
   ########################################################################## */
.entity-card {
    background-color: var(--chamois-pale) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    margin-bottom: 2rem !important; /* Double spacing to separate action buttons from next card */
}

/* Field labels in mobile card layout (table collapsed to cards) */
.entity-card .card-body .row > .col-4 {
    font-size: var(--semantic-heading-mono-size);
    font-weight: bold;
}

/* Ensure card label text uses normal body color (no grey text-muted) */
.entity-card .card-body .row > .col-4.text-muted {
    color: inherit !important;
}

/* Card title row at top: match header button spacing */
.entity-card .card-body > .title-row {
    padding: 0.6rem 1rem 0.6rem 1rem;
    margin-bottom: 0 !important;
    border-bottom: 0.15em solid var(--black);
    display: flex;
    flex-wrap: nowrap; /* Prevent container wrapping - let text wrap instead */
    align-items: flex-end; /* Align items to bottom */
    gap: 1rem; /* Space between title and buttons */
}

/* Title in title row: allow to expand, prevent truncation */
.entity-card .card-body > .title-row .title-row-title {
    flex: 1 1 0;        /* Take available space, can shrink */
    min-width: 0;       /* Allow text to wrap inside */
    overflow-wrap: break-word; /* Allow long words to break if needed */
    word-wrap: break-word;
    display: flex;
    align-items: flex-end;
}

@media (max-width: 575.98px) {
    .entity-card .card-body > .title-row .title-row-title {
        flex: 0 1 auto; /* only as wide as the text */
        width: auto;    /* override Bootstrap .row>* { width: 100% } */
    }
}

/* Action buttons container: minimal width, don't shrink */
.entity-card .card-body > .title-row .title-row-actions {
    padding: 0; /* Remove all padding - buttons have their own padding */
    flex-shrink: 0; /* Don't shrink buttons */
    flex-grow: 0; /* Don't grow buttons */
    white-space: nowrap; /* Prevent buttons from wrapping */
    width: auto; /* Override Bootstrap .row>* { width: 100% } */
    margin-left: auto; /* Push actions to the right even when title doesn't fill space */
}

/* Action buttons: keep square, don't stretch */
.entity-card .card-body > .title-row .title-row-actions .btn {
    align-self: flex-end; /* Keep buttons square */
}

/* Card title: match field label alignment, prevent truncation, bottom-aligned */
.entity-card .card-body > .title-row .entity-card-title {
    margin: 0;
    width: 100%; /* Fill the flex parent container */
    display: block !important;
    font-size: var(--h3-font-size);
    font-family: var(--h1-font-family);
    font-weight: bold;
    line-height: 1.2;
    word-wrap: normal; /* Wrap at word boundaries only */
    overflow-wrap: normal; /* Wrap at word boundaries only */
    word-break: normal; /* Don't break words */
    hyphens: none; /* Disable automatic hyphenation */
}

.entity-card-title-link {
    color: inherit;
    text-decoration: none;
}

.entity-card-title-link:hover {
    color: var(--strawberry);
    text-decoration: underline;
}

/* Card layout fields: alternating backgrounds and borders like table rows */
.entity-card .card-body > .row:not(.title-row) {
    border-bottom: 0.5px solid var(--chamois-light);
    padding: 0.6rem 1rem;
    margin-bottom: 0 !important;
}

/* Alternating backgrounds: first field row (nth-child(2)) transparent, second (nth-child(3)) darker, etc. */
/* Since title row is first, field rows start at nth-child(2) */
.entity-card .card-body > .row:not(.title-row):nth-child(2),
.entity-card .card-body > .row:not(.title-row):nth-child(even):not(:nth-child(2)) {
    background-color: transparent;
}

.entity-card .card-body > .row:not(.title-row):nth-child(odd):not(:nth-child(1)) {
    background-color: var(--chamois-whisper);
}


/* ##########################################################################
   TABLE OF CONTENTS & REFERENCE NAV
   ########################################################################## */
.table-of-contents {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background-color: var(--chamois-whisper);
    border-left: 3px solid var(--chamois-medium);
    border-radius: var(--border-radius-sm);
}

.table-of-contents h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.table-of-contents ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.table-of-contents li {
    margin-bottom: 0.5rem;
}

.table-of-contents li:last-child {
    margin-bottom: 0;
}

.table-of-contents-horizontal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-of-contents-horizontal li {
    margin-bottom: 0;
}

.table-of-contents a {
    text-decoration: none;
    color: var(--black);
}

.table-of-contents a:hover {
    color: var(--strawberry);
    text-decoration: underline;
}

/* Scrollspy navigation: sticky positioning and scrolling */
.main-content > .container-fluid > .row {
    position: relative;
    min-height: 0;
}

.reference-nav-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important; /* .main-content now scrolls; sidebar sits inside it, below the fixed navbar */
    align-self: flex-start !important;
    height: fit-content;
    max-height: calc(100vh - 3.5rem);
    z-index: 10;
}

#reference-nav {
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    border-right-color: var(--chamois-medium) !important;
    border-right-width: 0.067rem !important;
}

#reference-nav .nav-link {
    color: var(--black) !important;
    text-decoration: none;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#reference-nav .nav-link:hover,
#reference-nav .nav-link:focus {
    color: var(--strawberry) !important;
}

/* Active state for scrollspy - make it bold */
#reference-nav .nav-link.active {
    font-weight: bold !important;
    color: var(--black) !important;
    background-color: transparent !important;
}

.table-of-contents-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 50%;
    background-color: var(--chamois-medium);
    color: var(--white) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.table-of-contents-top i {
    color: var(--white) !important;
}

.table-of-contents-top:hover {
    background-color: var(--chamois-full);
    color: var(--white) !important;
    text-decoration: none !important;
}

.table-of-contents-top:hover i {
    color: var(--white) !important;
}

/* Section containers for page layout */

/* Narrow container: for reading text/paragraphs (replaces p { max-width: 85ch }) */

/* ##########################################################################
   PAGE SECTIONS & LAYOUT OBJECTS (section-*, content-padded, full-bleed, CTA)
   ########################################################################## */
.section-narrow {
    max-width: var(--page-max-width-reading);
    margin-inline: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Entry container: wider container for entry fields in Show/Edit views (structured label+value pairs) */
/* Uses same width as section-wide (full width with edge padding) */
.section-entry {
    padding-left: var(--page-edge-padding);
    padding-right: var(--page-edge-padding);
}

/* On desktop, use larger padding to match navbar */
@media (min-width: 576px) {
    .section-entry {
        padding-left: var(--page-edge-padding-desktop);
        padding-right: var(--page-edge-padding-desktop);
    }
}

/* Headers in section containers: apply h1 spacing to first header element */
/* Note: .h1-spacing and .h2-spacing already have margin-top, so don't override them */
.section-entry > .d-flex:first-child:not(.h1-spacing):not(.h2-spacing),
.section-entry > h1:first-child {
    margin-top: 0;
    margin-bottom: var(--h1-margin-bottom);
}

/* Remove redundant h1 margin when inside .d-flex wrapper in sections */
.section-entry > .d-flex:first-child h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.content-padded {
    padding-left: var(--page-edge-padding);
    padding-right: var(--page-edge-padding);
}

@media (min-width: 576px) {
    .content-padded {
        padding-left: var(--page-edge-padding-desktop);
        padding-right: var(--page-edge-padding-desktop);
    }
}

/* When content-padded is inside container-fluid, it should NOT add its own padding
   because container-fluid already provides the correct page-edge-padding.
   This prevents double-padding. Applies to all descendants, not just direct children,
   because HTMX swaps may wrap content in intermediate containers. */
.main-content > .container-fluid .content-padded {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 576px) {
    .main-content > .container-fluid .content-padded {
        padding-left: 0;
        padding-right: 0;
    }
}

.full-bleed {
    padding-left: 0;
    padding-right: 0;
}

/* Break out of page padding only within the supported layout context.
   This prevents .full-bleed from overreaching in nested containers
   with their own padding or outside the main page layout. */
.main-content > .container-fluid .full-bleed {
    width: calc(100% + 2 * var(--page-edge-padding));
    margin-left: calc(-1 * var(--page-edge-padding));
    margin-right: calc(-1 * var(--page-edge-padding));
}

/* Non-table notices inside full-bleed align with first/last table cells. */
.full-bleed .full-bleed-message {
    padding-left: var(--page-edge-padding);
    padding-right: var(--page-edge-padding);
}

/* Cards in full-bleed: the card itself has no side padding so background/
   alternating row colors extend edge-to-edge. The card-body has no side padding;
   instead each .row provides its own horizontal padding so content aligns. */
.full-bleed .entity-card {
    padding-left: 0;
    padding-right: 0;
}

.full-bleed .entity-card .card-body {
    padding-left: 0;
    padding-right: 0;
}

/* In full-bleed, card rows use page-edge-padding for horizontal alignment */
.full-bleed .entity-card .card-body > .title-row {
    padding-left: var(--page-edge-padding);
    padding-right: var(--page-edge-padding);
}

.full-bleed .entity-card .card-body > .row:not(.title-row) {
    padding-left: var(--page-edge-padding);
    padding-right: var(--page-edge-padding);
}

@media (min-width: 576px) {
    .main-content > .container-fluid .full-bleed {
        width: calc(100% + 2 * var(--page-edge-padding-desktop));
        margin-left: calc(-1 * var(--page-edge-padding-desktop));
        margin-right: calc(-1 * var(--page-edge-padding-desktop));
    }

    .full-bleed .full-bleed-message {
        padding-left: var(--page-edge-padding-desktop);
        padding-right: var(--page-edge-padding-desktop);
    }

    .full-bleed .entity-card .card-body > .title-row {
        padding-left: var(--page-edge-padding-desktop);
        padding-right: var(--page-edge-padding-desktop);
    }

    .full-bleed .entity-card .card-body > .row:not(.title-row) {
        padding-left: var(--page-edge-padding-desktop);
        padding-right: var(--page-edge-padding-desktop);
    }
}

/* CTA container: centered, prominent block for primary actions */
/* Uses compact width for focused, centered presentation */
.section-cta {
    max-width: var(--page-max-width-cta);
    margin-inline: auto;
    margin-top: 5rem; /* Space above CTA section */
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

/* Larger prompt text in CTA sections */
.section-cta .cta-question {
    font-size: 1.2em;
}

/* Override btn-lg font-size in CTA sections: keep large button size (padding) but use normal font size */
/* Increase padding to make button even bigger */
.section-cta .btn-lg {
    font-size: 1rem; /* Normal body font size (1rem = base font size) */
    padding: 0.75rem 1.5rem; /* Increased padding for larger button */
}

/* Responsive behavior: full-width on small screens */
@media (max-width: 767.98px) {
    .section-narrow,
    .section-entry,
    .section-cta {
        max-width: 100%;
    }

}

/* Paragraph text wrapping */
/* Global rule kept for backward compatibility with existing code */
/* Prefer wrapping paragraphs in .section-narrow for container-based width control */

/* ##########################################################################
   PARAGRAPHS, INPUT-WIDTH UTILITIES & MISC (hr, address, images)
   ########################################################################## */
p {
    max-width: 85ch;
    margin-top: 0;
    margin-bottom: var(--p-margin-bottom);
}

/* Paragraphs in section-narrow inherit container width instead of character-counting */
.section-narrow p {
    max-width: none;
}

/* CTA paragraphs: marketing text, not reading flow — no character limit */
.section-cta p {
    max-width: none;
}

/* Remove line length limit for paragraphs where visual appearance is prioritized over readability */
.no-line-length-limit {
    max-width: none;
}

hr {
    border: none !important;
    border-top: 0.067rem solid var(--chamois-medium) !important;
    color: var(--chamois-medium) !important;
    background-color: transparent !important;
    opacity: 1 !important;
    margin: 0;
    height: 0;
}

address p {
    margin-bottom: 0.0em;
}

/* Logo image styling */
/* Images use Profile variant (512x512) scaled down with CSS for crisp display
   on high-DPI screens and when zoomed. Display size is ~256px, so 512px provides
   2x pixel density for retina displays and zoom comfort. */
.image-logo {
    max-height: var(--image-logo-max-size);
    max-width: var(--image-logo-max-size);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--chamois-light);
}

/* Generic media preview styling */
/* Uses largest available variant (Large 1600px, Standard 1024px, Profile 512px, or Thumbnail 150px)
   scaled down by 2x factor for crisp display on high-DPI screens and when zoomed. */
.image-preview {
    max-height: var(--image-preview-max-size);
    max-width: var(--image-preview-max-size);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--chamois-light);
}

/* Global button fix: keep text vertically centred even when wrapping */

/* Single-select dropdown: width fits widest button (max-content); padding; button font-weight (overrides .btn-sm bold) */

/* ##########################################################################
   SELECT MENU & FORM-SELECTION FIELD
   (the .select-dropdown-btn trigger rules live in buttons.css, where they must
    stay after .btn-sm so their font-weight override wins)
   ########################################################################## */
.select-dropdown-menu {
    min-width: unset;
    width: max-content;
    padding: 0.25rem;
}

/* Ensure icon-only buttons are square by maintaining consistent icon font-size
   Bootstrap icons are square by design, so we just need consistent sizing
   and let Bootstrap's natural padding handle the square proportions */

/* Make checkbox icons black (override Bootstrap's grey) */

/* ##########################################################################
   CHECKBOX ICONS
   ########################################################################## */
input[type="checkbox"]:checked + label .bi-check,
input[type="checkbox"]:checked + label .bi-check-square,
input[type="checkbox"]:checked + label .bi-check-square-fill,
input[type="checkbox"]:checked + label .bi-check-circle,
input[type="checkbox"]:checked + label .bi-check-circle-fill,
.form-check-input:checked ~ .form-check-label .bi-check,
.form-check-input:checked ~ .form-check-label .bi-check-square,
.form-check-input:checked ~ .form-check-label .bi-check-square-fill,
.form-check-input:checked ~ .form-check-label .bi-check-circle,
.form-check-input:checked ~ .form-check-label .bi-check-circle-fill,
.bi-check,
.bi-check-square,
.bi-check-square-fill,
.bi-check-circle,
.bi-check-circle-fill {
    color: var(--black) !important;
}


/* ##########################################################################
   DECORATIVE - dots, staff ruler
   ########################################################################## */
.dots {
    font-size:28px;
    margin: 8px 12px;
}

.staff-ruler {
    display: block;
    width: 100%;
    height: 2rem;
    margin-top: 5rem;
    margin-bottom: 0;
    background: linear-gradient(
        to bottom,
        black 0%,
        black 0.067rem,
        transparent 0.067rem,
        transparent 20%,
        black 20%,
        black calc(20% + 0.067rem),
        transparent calc(20% + 0.067rem),
        transparent 40%,
        black 40%,
        black calc(40% + 0.067rem),
        transparent calc(40% + 0.067rem),
        transparent 60%,
        black 60%,
        black calc(60% + 0.067rem),
        transparent calc(60% + 0.067rem),
        transparent 80%,
        black 80%,
        black calc(80% + 0.067rem),
        transparent calc(80% + 0.067rem)
    );
}