/***********************************************************************

Base styles for all display widths and design elements

For reference for viewport sizes:

  Convert pixels → rem (assuming 1rem = 16px):
    320px  / 16 = 20rem
    600px  / 16 = 37.5rem
    1024px / 16 = 64rem
    1200px / 16 = 75rem

 Applies as illustrated:
┌──────────────────────────────────────────────────────────────┐
│                                                              │
│ 0px                                                          │
│ │                                                            │
│ │  Base Styles (Mobile Default)                              │
│ │  Always Active                                             │
│ │                                                            │
│ ├────────────── 20rem (320px) ────────────────┐              │
│ │                                              │             │
│ │  + Small Phone Adjustments                   │             │
│ │                                              │             │
│ ├──────────────────── 37.5rem (600px) ────────┐              │
│ │                                              │             │
│ │  + Tablet Layout                             │             │
│ │                                              │             │
│ ├──────────────────────────── 64rem (1024px) ──┐             │
│ │                                              │             │
│ │  + Laptop/Desktop Layout                     │             │
│ │                                              │             │
│ ├────────────────────────────────── 75rem (1200px) ─────────┐│
│ │                                                           ││
│ │  + Large Desktop Enhancements                             ││
│ │                                                           ││
└──────────────────────────────────────────────────────────────┘
*/
:root {
    /* Use browser default font size - usually 16 px */
    font-size: 100%;

    /* Defines a set of variables to support the scale of the design
       These can be used across all design elements.
    */

    --scale--3: 0.5rem;     /* Used in content-container1 for item gap and page padding */
    --scale--2: 0.625rem;   /* Used in navigation-bar-base for padding under title (10px)  */
    --scale--1: 0.90rem;    /*  */
    --scale-0: 1rem;        /* Used as nav link font size and in as general text */
    --scale-1: 1.125rem;    /* Used in navigation-bar-nav-title */
    --scale-2: 1.25rem;     /* 20px  (1.25 × 16) */
    --scale-3: 1.5rem;      /* 24px  (1.5 × 16) */
    --scale-4: 1.75rem;     /* 28px  (1.75 × 16) */
    --scale-5: 2rem;        /* Used in bottom nav bar */
    --scale-6: 2.25rem;     /* 36px  (2.25 X 16 */
    --scale-7: 2.5rem;      /* used in navigation-bar-nav-title */
    --scale-8: 5rem;        /* Used in the top nav bar height */
    --scale-9: 5.0rem;      /* Used in the top % bottom nav as text link width */

    /* used in base template */
    --container-min: 20rem;
    --container-max: 75rem;
    --container-left-column: 54rem;
    --container-right-column: 20rem;
    --border-radius: 10px;
    --background-color: #000066;
    --background-color-workouts: #006699; /* #3477BA; */
    --background-color-teamgoal0: #005A9C;
    --background-color-links: #cdcaca;;
}
html {
    scrollbar-gutter: stable; /* Maintains constant width */
}
body {
    margin: 0.0rem;
    font-family: Arial, Helvetica, sans-serif;
}

.page-view-portal {
    /* width: clamp(var(--container-min), 90vw, var(--container-max));  Set viewport widths to control display */
}
/* Provide container for template which controls size and layout. */
.content-container1 {
    display: flex;
    flex-wrap: wrap; /* allow blocks to wrap vs hide as screen shrinks */
    gap: var(--scale--1);
    width: clamp(var(--container-min), 90vw, var(--container-max)); /* Set viewport widths to control display */
    margin: 0 auto; /* Center within container */
    padding: var(--scale-0); /* Overall page padding */
    /* border: 1px solid black; */
}

/* Provide container for template main content. Slight variation to support content area*/

.content-container2 {
    display: flex;
    /* justify-content: center; pushes columns apart within the container */
    flex-wrap: wrap; /* allow blocks to wrap vs hide as screen shrinks */
    gap: var(--scale--1);
    width: clamp(var(--container-min), 90vw, var(--container-max)); /* Set viewport widths to control display */
    margin: 0 auto; /* Center within container */
    padding: var(--scale-0); /* Overall page padding */
    /* border: 1px solid blue; */
}

/* The main styles control the size, layout, and responsiveness for the two
   main columns that form the template. The next two style layout the phone
    viewport which is essentially a single column at 20rem wide. */

.main-content-column-left {
    flex: 1 1 0;
    max-width: var(--container-left-column);
    min-width: 20rem;
}
.main-content-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--background-color);
    border-radius: 10px;
    padding-bottom: 15px;
}
/* Home Page */
.main-content-item {
    align-self: center;
}
.main-content-column-right {
    width: var(--container-right-column);
    min-width: 0;
}

/* Content Pages - main styles for general content pages including
   adjustments for news article based on Quill funchionality
*/

.page-content-item {
    margin-top: 10px;
    padding: 15px;
}
.page-content-item-title {
    font-size: var(--scale-3);
    font-weight: bold;
    color: var(--background-color-workouts);
    margin-bottom: 5px;
}
.page-content-item-subtitle {
    font-size: var(--scale-2);
    font-weight: bold;
    color: var(--background-color-workouts);
}
.page-content-item-detail {
    font-size: var(--scale-0);
    padding: 5px 10px 5px 10px;
    overflow: hidden; /* contain floated images */
}
/* Mirros page-content-item-detail but used for news article
   specifically zeroing out the margins and padding
 */
.page-content-item-detail-news {
    font-size: var(--scale-0);
    padding: 5px 10px 5px 10px;
    overflow: hidden; /* contain floated images */
}
.page-content-item-detail-news p {
    margin: 0 0 0.5em 0;
}
.page-content-item-page-link {
    font-size: var(--scale-0);
    padding-left: 10px;
}
.page-content-item-detail-img {
    float: right;
    margin: 0 0 0.5rem 0.5rem;
    width: clamp(140px, 90%, 250px);
    height: auto;
}
.page-content-item-news-subtitle {
    font-size: var(--scale-2);
    font-weight: bold;
    color: var(--background-color-workouts);
    margin: 0 0 0.75rem 0;
}
.page-content-item-detail-news-img {
    float: right;
    margin: 0 0 0.5rem 0.5rem;
    width: clamp(115px, 90%, 190px);
    height: auto;
    border: 2px solid black;
}
.news-signature {
    padding: 16px 0px 0px 0px;
}
.news-date {
    font-size: var(--scale-0);
    font-weight: normal;
    color: var(--background-color-workouts);
}


.radio-group {
}
.radio-group label {
    color: #000000;        /* ✅ black text */
    font-weight: normal;   /* ✅ normal weight */
    font-size: var(--scale-1);
    cursor: pointer;
}

.radio-group input[type="radio"] + label {
    color: #000000;
    font-weight: normal;
}

/* Styles for Workout blocks */

.workout-container {
    display: flex;
    flex-direction: column;
}
.workout-container-title {
    align-self: center;
    font-size: var(--scale-3);
    font-weight: bold;
    padding: 5px 10px 10px 10px;
}
.workout-container-detail {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-workouts);
    border-radius: 10px;
    color: white;
    padding: 15px;
    margin-top: 10px;
}
.workout-detail-item-title1 {
    align-self: center;
    font-size: var(--scale-2);
    font-weight: bold;
    padding: 1px;
}
.workout-detail-item-title2 {
    align-self: center;
    font-size: var(--scale-2);
    padding: 1px;
}
.workout-detail-item-day {
    font-size: var(--scale-1);
    padding: 10px 2px 2px 2px;
}
.workout-detail-item-day-width {
    /* width:55px */
}

/* Styles for Announcements */

.ann-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.ann-container-title {
    align-self: center;
    font-size: var(--scale-3);
    font-weight: bold;

    padding: 5px 10px 10px 10px;
}
.ann-container-detail {
    display: flex;
    flex-direction: column;
    background-color: #fddcbe;
    border-color: firebrick;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    color: white;
    padding: 15px;
    margin-top: 0px;
}
.ann-detail-item-title {
    align-self: center;
    font-size: var(--scale-2);
    font-weight: bold;
    color: firebrick;
    padding: 0px;
}
.ann-detail-item {
    font-size: var(--scale-0);
    align-self: flex-start;
    color: black;
    margin-top: 10px;
}

.ann-detail-item-expiration {
    font-size: var(--scale--1);
    color: gray;
    font-style: italic;
}

/* Styles for top and bottom nav links */

.navigation-bar-base {
    background-color: var(--background-color);
    padding: var(--scale--2);
    color: white;
    border-radius: var(--border-radius);
    height: var(--scale-8);
}
.navigation-bar-nav-title {
    display: flex;
    font-size: var(--scale-1);
    font-weight: bold;
    justify-content: space-between;
    padding-bottom: var(--scale-7);
}
.navigation-bar-nav-links {
    display: flex;
}
.navigation-bar-links-display {
    width: var(--scale-9);
    text-align: center;
}
.navigation-bar-logo {
    display: flex;
    justify-content: center;
}
.navigation-bar-nav-links-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    border-radius: var(--border-radius);;
    height: 2rem;
}
a.nav1:link {
    font-size: var(--scale-0);
    font-weight:normal;
    color: var(--background-color-links);
    text-decoration:none;
}
a.nav1:visited {
    font-size: var(--scale-0);
    font-weight: normal;
    color:var(--background-color-links);
    text-decoration:none;
}
a.nav1:hover {
    font-size: var(--scale-0);
    font-weight:bold;
    color:white;
    text-decoration:none;
}
.nav1-selected {
    font-size: var(--scale-0);
    font-weight: bold;
    color:white;
    text-decoration:none;
}

/* Main content styles for Home page */

.main-content-index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.TeamGoal0 {
    font-weight: bold;
    font-size: var(--scale-4);
    padding: 10px;
}
.TeamGoal1 {
    color: var(--background-color-teamgoal0);
    font-weight: bold;
    font-size: var(--scale-3);
    padding: 10px 10px 0px 10px;
}
.TeamGoal2 {
    padding: 10px 35px 10px 35px;
    font-size: var(--scale-1);
}
.TeamGoal3 {
    font-size: var(--scale-1);
    padding-top: 15px;
}


/* Tables in news article content — size to content, not the full column */
.page-content-item-detail-news table { width: auto !important; }

/* -----------------------------------------------------------------------
   Quill rich-text content rendering
   Quill stores formatting as CSS classes on plain HTML elements.
   These rules make that formatting visible on public display pages
   without loading the full Quill editor stylesheet.
   ----------------------------------------------------------------------- */

/* Alignment */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

/* Indentation (3em per level, matching Quill's editor behaviour) */
.ql-indent-1 { padding-left:  3em; }
.ql-indent-2 { padding-left:  6em; }
.ql-indent-3 { padding-left:  9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }

/* Fonts (Quill default font set) */
.ql-font-serif     { font-family: Georgia, "Times New Roman", serif; }
.ql-font-monospace { font-family: Monaco, "Courier New", monospace; }

/* Sizes (Quill default size set) */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em; }