/* =============================================================================
   style.css - DCM Works Boilerplate Styles
   =============================================================================
   Responsive layout, forms, tables, dark mode, and utility classes.
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS / CUSTOM PROPERTIES
   =============================================================================
   Centralized color palette, font stacks, and RGB variants.
   The -rgb variants enable rgba() usage, e.g. rgba(var(--blue-rgb), .5).
   ============================================================================= */

:root {
    --headings-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* Neutrals */
    --black:   #1A1A1A;   --black-rgb:   26, 26, 26;
    --white:   #FAFAFA;   --white-rgb:   250, 250, 250;
    --gray:    #6B7280;   --gray-rgb:    107, 114, 128;
    --silver:  #E5E7EB;   --silver-rgb:  229, 231, 235;
    --dark:    #374151;   --dark-rgb:    55, 65, 81;
    --light:   #F3F4F6;   --light-rgb:   243, 244, 246;

    /* Reds & Pinks */
    --rose:    #F43F5E;   --rose-rgb:    244, 63, 94;
    --red:     #DC2626;   --red-rgb:     220, 38, 38;
    --maroon:  #9D174D;   --maroon-rgb:  157, 23, 77;
    --pink:    #EC4899;   --pink-rgb:    236, 72, 153;

    /* Oranges */
    --orange:  #F97316;   --orange-rgb:  249, 115, 22;
    --amber:   #D97706;   --amber-rgb:   217, 119, 6;

    /* Yellows & Limes */
    --yellow:  #EAB308;   --yellow-rgb:  234, 179, 8;
    --lime:    #65A30D;   --lime-rgb:    101, 163, 13;

    /* Greens */
    --green:   #16A34A;   --green-rgb:   22, 163, 74;
    --emerald: #059669;   --emerald-rgb: 5, 150, 105;
    --olive:   #4D7C0F;   --olive-rgb:   77, 124, 15;

    /* Teals & Cyans */
    --teal:    #0D9488;   --teal-rgb:    13, 148, 136;
    --cyan:    #06B6D4;   --cyan-rgb:    6, 182, 212;
    --aqua:    #22D3EE;   --aqua-rgb:    34, 211, 238;

    /* Blues */
    --sky:     #0EA5E9;   --sky-rgb:     14, 165, 233;
    --blue:    #2563EB;   --blue-rgb:    37, 99, 235;
    --indigo:  #4F46E5;   --indigo-rgb:  79, 70, 229;
    --navy:    #1E3A5F;   --navy-rgb:    30, 58, 95;

    /* Purples & Fuchsias */
    --violet:  #7C3AED;   --violet-rgb:  124, 58, 237;
    --purple:  #9333EA;   --purple-rgb:  147, 51, 234;
    --fuchsia: #D946EF;   --fuchsia-rgb: 217, 70, 239;
}

/* =============================================================================
   2. DARK MODE
   =============================================================================
   body.dark flips black and white for a dark UI, the @media query follows
   the operating system's preference, and body.light (the in-app toggle)
   brings the light values back over a dark preference.
   ============================================================================= */

body.dark {
    --black:  #F1F5F9;   --black-rgb:   241, 245, 249;
    --white:  #0B1121;   --white-rgb:   11, 17, 33;
    --dark:   #E2E8F0;   --dark-rgb:    226, 232, 240;
    --light:  #1A2332;   --light-rgb:   26, 35, 50;
    --silver: #334155;   --silver-rgb:  51, 65, 85;
}

@media (prefers-color-scheme: dark) {
    :root {
        --black:  #F1F5F9;   --black-rgb:   241, 245, 249;
        --white:  #0B1121;   --white-rgb:   11, 17, 33;
        --dark:   #E2E8F0;   --dark-rgb:    226, 232, 240;
        --light:  #1A2332;   --light-rgb:   26, 35, 50;
        --silver: #334155;   --silver-rgb:  51, 65, 85;
    }
}

body.light {
    --black:  #1A1A1A;   --black-rgb:   26, 26, 26;
    --white:  #FAFAFA;   --white-rgb:   250, 250, 250;
    --dark:   #374151;   --dark-rgb:    55, 65, 81;
    --light:  #F3F4F6;   --light-rgb:   243, 244, 246;
    --silver: #E5E7EB;   --silver-rgb:  229, 231, 235;
}

/* =============================================================================
   3. GLOBAL RESET & BASE LAYOUT
   =============================================================================
   Use border-box so padding doesn't add to element width.
   Full-height page with zero default margin and consistent font rendering.
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--body-font);
    background: var(--white);
    color: var(--black);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   4. MEDIA ELEMENTS
   =============================================================================
   Images, video, and SVG scale with their container by default.
   ============================================================================= */

img,
picture,
video,
canvas,
svg {
    display: block;
    height: auto;
    max-width: 100%;
}

/* =============================================================================
   5. FORM CONTROLS
   =============================================================================
   Reset browser defaults so inputs match the app's font and color scheme.
   Dropdown options use variables to prevent invisible text in dark mode.
   ============================================================================= */

input,
button,
textarea,
select {
    border-width: 1px;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: inherit;
    background: transparent;
}

select option,
select optgroup {
    background: var(--white);
    color: var(--black);
}

button,
input[type="submit"] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* =============================================================================
   6. TYPOGRAPHY
   =============================================================================
   Responsive heading scale, consistent margins, and body text sizing.
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headings-font);
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: inherit;
    margin-top: 8px;
    margin-bottom: 8px;
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}

h4 {
    font-size: 1rem;
    line-height: 1.25;
}

h5 {
    font-size: .875rem;
    line-height: 1.25;
}

h6 {
    font-size: .8125rem;
    line-height: 1.25;
}

p {
    font-size: .95rem;
}

span {
    font-size: inherit;
}

p,
span {
    line-height: 1.5;
}

@media (min-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: .875rem; }
    p  { font-size: 1rem; }
}

/* =============================================================================
   7. LINKS & UTILITY CLASSES
   ============================================================================= */

a {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

.hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .hidden-for-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hidden-for-desktop { display: none !important; }
}

.text-center {
    text-align: center;
}

ul.styled-list {
    margin: 0;
    padding-left: 0;
}

ul.styled-list li {
    list-style-type: none;
}

/* =============================================================================
   8. SPACING UTILITIES
   ============================================================================= */

.vertical-spacer-1 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.vertical-spacer-2 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.vertical-spacer-3 {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* =============================================================================
   9. LAYOUT CONTAINERS
   =============================================================================
   Centered container with max-width and mobile-first padding.
   Flex row/column grid for layout composition.
   ============================================================================= */

.custom-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;
    padding: 16px;
}

@media (min-width: 1440px) {
    .custom-container {
        max-width: 1440px;
    }
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
}

.custom-column {
    flex-basis: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .custom-column {
        flex-basis: auto;
        width: auto;
    }
}

.wrapper {
    padding: 16px;
}

/* =============================================================================
   10. MEDIA WRAPPER
   =============================================================================
   Maintains a 16:9 aspect ratio with object-fit cover.
   ============================================================================= */

.media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.media-wrapper img,
.media-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   11. FORM STYLES
   =============================================================================
   Basic accessible form layout, full-width inputs, code blocks, and hr.
   ============================================================================= */

label {
    display: block;
    margin-bottom: 8px;
}

input[type="checkbox"] {
    margin: 0;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    display: inline-block;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    padding: 8px 16px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    margin-bottom: 16px;
}

textarea {
    resize: none;
}

fieldset {
    margin: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--silver);
    margin: 16px 0;
}

pre {
    margin: 0;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(var(--silver-rgb), .25);
}

/* =============================================================================
   12. BUTTONS
   =============================================================================
   Primary button, inverted (alt) variant, hover dim effect, disabled state.
   ============================================================================= */

button,
.button {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    border: solid 2px var(--black);
    padding: 8px 16px;
    font-size: .85rem;
    font-weight: 500;
    transition: opacity .25s ease;
}

button[disabled] {
    opacity: .25;
    cursor: not-allowed;
}

button:not([disabled]):hover,
.button:not([disabled]):hover {
    opacity: .5;
}

button.button-alt,
.button.button-alt {
    background: var(--white);
    color: var(--black);
}

/* =============================================================================
   13. TABLES
   =============================================================================
   Responsive table wrapper, bordered cells, zebra striping, mobile sizing.
   ============================================================================= */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

table caption {
    margin-bottom: 16px;
}

th,
td {
    border: 1px solid var(--silver);
    padding: 8px;
}

th {
    background: rgba(var(--silver-rgb), .5);
    font-weight: 700;
}

td {
    font-weight: 400;
}

td.actions-col {
    white-space: nowrap;
}

tr:nth-child(even) td {
    background: rgba(var(--silver-rgb), .15);
}

@media (max-width: 767px) {
    table { font-size: .85rem; }
}

/* =============================================================================
   14. HEADER
   =============================================================================
   Site-wide header - mobile nav collapse/expand, desktop dropdown menus.
   Language switcher, logo alignment, and responsive ordering.
   ============================================================================= */

.header {
    box-shadow: 0 1px 2px rgba(var(--black-rgb), .05);
}

.header a > p {
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0;
}

.header .custom-container {
    padding: 12px 16px;
}

.header .custom-container > .custom-row {
    align-items: center;
    justify-content: space-between;
}

.header img {
    max-width: 160px;
}

.header li {
    flex: 0 0 100%;
    list-style-type: none;
}

.header li a {
    display: inline-block;
    position: relative;
}

.header li:not(:last-child) {
    margin-bottom: 16px;
}

.header nav > ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0;
    margin: 0;
}

.header li.active > a,
.header li a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(var(--black-rgb), .5);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.header.expanded .hidden-for-mobile {
    display: block !important;
}

.header .custom-column {
    width: auto;
}

.header select {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Header - Mobile (< 768px)
   ------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .header .custom-column:first-child {
        flex: 0 0 70%;
        width: 70%;
        order: 0;
        overflow: hidden;
    }

    .header .hidden-for-desktop {
        flex: 0 0 30%;
        width: 30%;
        order: 1;
        text-align: end;
        overflow: hidden;
    }

    .header .hidden-for-mobile {
        order: 2;
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }

    .header.expanded .custom-column.hidden-for-mobile {
        max-height: 512px;
    }

    .header .custom-column.hidden-for-mobile nav {
        padding: 16px 0;
    }

    .header li > ul {
        background: transparent;
        box-shadow: none;
        display: block !important;
        margin-top: 16px;
        min-width: auto;
        position: static;
    }
}

/* -------------------------------------------------------------------------
   Header - Desktop (>= 768px)
   ------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
    .header a > p {
        font-size: 2.5rem;
    }

    .header img {
        max-width: 200px;
    }

    .header li {
        position: relative;
        flex: 0 0 auto;
    }

    .header li:not(:last-child) {
        margin: 0;
        margin-inline-end: 16px;
    }

    .header li > ul {
        display: none;
        padding: 8px 16px;
        position: absolute;
        inset-inline-end: 0;
        min-width: 192px;
        z-index: 10;
        text-align: end;
        box-shadow:
            0 4px 0 0 rgba(var(--shadow-rgb, 0, 0, 0), .05),
            0 8px 16px 0 rgba(var(--shadow-rgb, 0, 0, 0), .1);
    }

    .header li > ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--white);
    }

    .header li:hover > ul {
        display: block;
    }

    .header li:focus-within > ul {
        display: block;
    }

    .header li > ul > li {
        flex: 0 0 100%;
        padding: 8px 0;
        margin: 0 !important;
    }
}

/* =============================================================================
   15. FOOTER
   =============================================================================
   Responsive footer with column reordering on mobile.
   ============================================================================= */

.footer p {
    margin: 0;
}

.footer .styled-list {
    display: flex;
    flex-flow: row wrap;
}

.footer li {
    flex: 0 0 100%;
    list-style-type: none;
}

.footer li a {
    display: inline-block;
    position: relative;
}

.footer li:not(:last-child) {
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .footer .custom-column:first-child { order: 2; }
    .footer .custom-column:last-child  { order: 1; margin-bottom: 32px; }
}

@media screen and (min-width: 768px) {
    .footer .custom-row { justify-content: space-between; align-items: center; }
    .footer li          { flex: 0 0 auto; }
    .footer li:not(:last-child) { margin: 0; margin-inline-end: 16px; }
}