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

Base styles for all display widths and design elements

For reference:

  Convert pixels → rem (assuming 1rem = 16px):
    320px  ÷ 16 = 20rem  *** Used with @media queries ***
    600px  / 16 = 37.5rem
    1024px ÷ 16 = 64rem  *** Used with @media queries ***
    1200px ÷ 16 = 75rem
*/

:root {
    font-size: 100%;

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

    --scale--2: 0.625rem;   /* 10px  (0.625 * 16)  */
    --scale--1: 0.875rem;   /* 14px  (0.875 × 16) */
    --scale-0:  1rem;       /* 16px  (1 × 16) */
    --scale-1:  1.125rem;   /* 18px  (1.125 × 16) */
    --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;       /* 32px  (2 × 16) */
    --scale-6:  2.25rem;    /* 36px  (2.25 X 16 */
    --scale-7:  2.5rem;     /* 40px  (2.5 × 16) */

    /* Specific variables for the design elements as indicated in the
    following areas. These will be set for the small screen and then
    overridden for the larger screen settings.

       Page content orientation - row vs column
       System menu display to control dropdown vs horizontal menu
       Branding - small vs large
       Header - small vs large
       Header menu - small vs large
       Container width - small vs large
       Container padding - small vs large
       Section styling - small vs large
       Image styling - small vs large
    */

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

    Small screen setting.  These are the baseline small screen setting which can
    be overridden by the larger screen settings.

    */

    --page-content-orientation: row;
    --container-padding: 0;

    --heading-orientation: row;
    --heading-padding: 0.5rem;
    --heading-margin: 0;
    --header-height: 42px;
    --header-nav-font-size: var(--scale--1);
    --header-nav-font-color: #dddddd;
    --header-background-color: #25799f;
    --header-border:  1px solid #ffffff;

    --brand-padding: 0;
    --brand-font-size: var(--scale-0);

    --main-title-header-font-size: var(--scale-3);
    --main-title-margin: 1rem 1rem 1rem 0;

    --nav-padding: 0 0 0 0;
    --section-padding: 1rem;

    --image-width: 250px;
    --image-vision-width: 250px;
    --image-height: auto;

    --bottom-bar-height: 1.5rem;
    /* General heading text size */

    --main-heading-font-size: var(--scale-3);
    --vision-font-size: var(--scale-1);
    --vision-bg-color: #000000;

    /* Background colors */
    --color-bg-body-1:  #25799f;
    --color-bg-header:  #25799f;
    --color-bg-footer:  #ccfe06;
    --color-bg-section-meets: #000000;
    --circle-bg-color: #ccfe06;

    /* Practice Table */
    --color-table-header-1:  #cccccc;
    --color-table-body-1:    #25799f;

    /* Meets Table */
    --color-table-header-2:  #cccccc;
    --color-table-body-2:    #000000;

    /* Pool times Table*/
    --color-table-header-3:  #25799f;
    --color-table-body-3:    #25799f;

    /* Text colors ***************************************************/

    --color-header-1: #f0f0f0;
    --color-section-header: #f0f0f0;
    --color-section-text: #f0f0f0;

    --color-header-1-meets: #25799f;
    --color-subsection-header-meets: #25799f;

    --main-heading-text-color: #ffffff;
    --vision-text-color: #33789c;
    --circle-text-color: #33789c;

    --color-header-1-practice: #ccfe06;
    --color-header-1-coaches: #ccfe06;

    /* Small versus larger screen is controlled by toggling the
       dip[lay of the following two styles based on the screen size as
       determined by the @media query.

       The screen size switch point is TBD. The default is set to small screen

   */

    .display-system-small {
        display: block;
    }
    .display-system-large {
        display: none;
    }

}

/* body tag styles - Set body text characteristics to include: font family,
   - font size based on --var
   - Set body font color
   - Set line height - use unitless line-height which is the recommended approach

   Verification
   6/27/2025 - Verify with border and multiple text lines.
             - Verify in both small and large views
 */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: var(--scale-0);
    margin: 0;
    padding: 0;
    line-height: 1.3;
    color: black;
}

/* container class styles - Set the common content characteristics at the page level.
   this includes:
    - display as centered with specified width. Larger should center content area.
      Small will occupy the full view area
    - Set box-sizing to include margin+padding+border with the width setting

    Verification
     - Create two content areas with varying styles to demonstrate the desire style.
     .container-test {
        width: var(--container-width);
        margin: 0 auto;
        padding: var(--container-padding);
        border: 1px solid red;
        box-sizing: content-box;
      }
     - 6/27/2025 - Verify relative to container-test style
 */
.container {
    width: 100%;
    margin: 0 auto;
    padding: var(--container-padding);
    box-sizing: border-box;
    background-color: var(--color-bg-body-1);
}

/* The following menu styles are used in the small screen view. They control the display
   of the menu system and provide the anchoring fixed position. In particular,
   the small-menu-icon-anchor provide the anchoring for the vertical menu based on where is id displayed
   in the document rendering flow. The vertical menu is hidden by default.

   Verification
   - 7/1/2025 - Verify in both small and large views
 */
.small-menu-icon-anchor {
    position: relative;
    padding: 0;
}

.small-menu-icon-anchor-image {
    padding: 0;
    cursor: pointer;
}

.menu-position {
    position: absolute;
    right: 0rem;
    top: 2.15rem;
    z-index: 1;
}

.vertical-menu {
    margin: 0;
    padding: 0;
    width: 70px;                /* Set fixed width for menu */
    font-size: var(--scale--2);
    border: 1px solid white;
    background-color: var(--color-bg-body-1);
    display: none;
}

.vertical-menu.active {
    display: block;
}

.vertical-menu div {
    width: 100%;                 /* Make all items equal width */
    background-color: #25799f;   /* Optional: background for visibility */
    color: white;
    padding: 0.15rem 0.25rem 0.2rem 0;
    text-align: right;           /* Align text to the right */
    box-sizing: border-box;
    border-bottom: 1px solid #fff; /* Optional: separator */
}

.vertical-menu  {
    border-top: none;
}
.vertical-menu div:first-child {
    border-top: none;
}
.vertical-menu div:last-child {
    border-bottom: none;
}

/* Dynamic Large Screen Styles Adjustments.

   The following variables are used to adjust small screen styles for the large screen
   view using the @media query.

   Verification
    - 7/1/2025 - Verify in both small and large views
*/

@media (min-width: 480px) {
    :root {

       /* Core styles for the container and header section. These are the baseline small screen setting which can
        be overridden by the larger screen settings. Currently the design uses the same root values for both
        small and large screens.

        --page-content-orientation: row;
        --container-padding: 0;

        --heading-orientation: row;
        --heading-padding: 0.5rem;
        --heading-margin: 0;
        --header-height: 42px;
        --header-nav-font-size: var(--scale--1);
        --header-nav-font-color: #dddddd;
        --header-background-color: #25799f;
        --header-border:  1px solid #ffffff;

        --brand-padding: 0;
        --brand-font-size: var(--scale-0);

        */

        --page-content-orientation: row;
        --container-padding: 0;

        --heading-orientation: row;
        --heading-padding: 0.5rem;
        --heading-margin: 0;
        --header-height: 42px;
        --header-nav-font-size: var(--scale--1);
        --header-nav-font-color: #dddddd;
        --header-background-color: #25799f;
        --header-border:  1px solid #ffffff;

        --brand-padding: 0;
        --brand-font-size: var(--scale-0);

        --section-padding: 1.25rem;

        --image-width: auto;
        --image-vision-width: auto;
        --image-height: auto;

        --vision-font-size: var(--scale-3);

        .container {
            max-width: 66rem;
        }

        .display-system-small {
            display: none;
        }
        .display-system-large {
            display: block;
        }

        --main-title-header-font-size: var(--scale-5);
        --main-title-margin: 3rem 2rem 3rem 0;

        .vertical-menu {
            display: none;
        }
    }
}

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

Common styles pulled in from base-core.

These may be either expanded and simplified or moved to individual page
dependent styles
*/

.page-heading {
    display: flex;
    justify-content: flex-end; /* Align text (and inline content) to the right */
    align-items: flex-end; /* Align text to the bottom */
    padding: 0 1rem; /* Optional horizontal padding so text isn’t flush against edge */
    margin: 0;
    box-sizing: border-box;
}

.page-heading-content {
    margin: 0;         /* Remove default paragraph margins */
    padding: 0.8rem;
    text-align: right; /* Extra guarantee that multi-line text is right-aligned */
    font-size: var(--scale-5);
    color: var(--color-section-header);
}

/* Content area - common container for any content */


/* Controls size of DAS text used in multiple places. Color is control by using container
   Used in index and common_snippets
*/
.das-text {
    font-size: var(--scale-4);
    letter-spacing: 0.1em;
}

/* DAS Swimmer image - used in multiple sections
   Used in index and common_snippets
*/

.das-swimmer {
    width: 75px;    /* Set to common width. Height may vary a little with 6/4/2025 version of images */
    height: auto; /* Maintain aspect ratio */
}