/**
 * Aruka Teams - Base Styles
 *
 **/

:root {
    /* CUSTOM SITE COLORS */
    --aruka-blue: #0b2d60;
    --aruka-ltblue: #20377d;
    --aruka-orange: #ff5725;
    --aruka-teal: #4abcec;
    --aruka-green: #009900;
    
    --dark-aruka-ltblue: #98d1ff;

    /* STANDARD COLORS */
    --beige: #FF9900;
    --red: #F00;
    --dkred: #990000;
    --black: #000000;
    --ltgray: #e1e1e1;
    --midgray: #CCCCCC;
    --gray: #999999;
    --dkgray: #666666;
    --white: #FFFFFF;
    --yellow: #FFFF00;
    
    interpolate-size: allow-keywords;
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * {margin: 0; }
    @media (prefers-reduced-motion: no-preference) {
        html { interpolate-size: allow-keywords; }
    }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
    img, picture, video, canvas, svg { display: block; max-width: 100%;  }
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    p { text-wrap: pretty; margin: 20px 0 0 0;}
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    #root, #__next { isolation: isolate; }
    table { width: 100%; th { text-align: left; } }
}


html {scroll-behavior:smooth;}
@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root) { animation-duration: 0.5s; }

body {
    background-color: #fff;
    margin: 0px 0px; 
    padding: 0px;
    font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;
    color: #333;
    font-size: 16px;
    .dark & {
        background: #333; color: #eee; 
    }
}

* { box-sizing: border-box; }
p { margin: 0; margin-bottom: 1rem; }
ul { margin-bottom: 1rem; }
h1, h2, h3, h4 { margin-top: 0; color: var(--aruka-ltblue); .dark & { color: var(--dark-aruka-ltblue); } } 

a { color: var(--aruka-orange); text-decoration: none; &:hover { text-decoration: underline; } }

hr { border: 0; border-top: 2px dotted var(--gray); margin-block: 1.5rem; }

/* FLEX AND CUSTOM 12-COLUMN GRID */
.flex-center { display:flex; gap:2em; align-items:center; }
.flex-end { display:flex; gap:2em; align-items:center; justify-content:end; }
.flex-space { display:flex; gap:2em; justify-content:space-between;align-items:center; flex-wrap: wrap; }
.two-column { display:grid;grid-template-columns:1fr 1fr;column-gap:1em; @media(width<640px) { grid-template-columns: 1fr; row-gap: 0.5em; } }
.grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1em; }
.grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1em; }
.grid-key-value { display: grid; grid-template-columns: auto 1fr; column-gap:2em; }
.grid-12 { display: grid; grid-template-columns: repeat(12,1fr); column-gap: 2em; row-gap: 1.5em; }
.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-1 { grid-column: span 1; }
/* CUSTOM 12-COLUMN GRID RESPONSIVE */
@media screen and (max-width:1023px) {
    /* collapse grid columns */
    .grid-12 { grid-template-columns: 1fr; }
    .grid-12 > * { grid-column: 1; order: 1 !important;}
    /* collapse flex to a one-column grid */
    .flex-center { display: grid; grid-template-columns: 1fr; gap:1.5em;}
}
@media screen and (max-width:900px) {
    /* remove any manual ordering */
    .grid-12 > * { order: 1 !important; }
    /* narrow columns become half-wide */
    .col-11, .col-10, .col-9, .col-8,
    .col-1,  .col-2,  .col-3, .col-4 { grid-column: span 6; }
}
@media screen and (max-width:768px) {
    /* squeeze gaps and let the flex wrap */
    .grid-12 { column-gap: 1em; }
    .flex-center { gap: 1em; flex-wrap: wrap; }
}
@media screen and (max-width:640px) {
    .grid-12  { display: block; }
    .grid-12 > * { display: block; margin-bottom: 1em; }
}

details::details-content { height: 0; opacity: 0; overflow: hidden; transition: height 0.5s ease, opacity 0.5s ease, content-visibility 0.5s ease allow-discrete; }
details[open]::details-content { height: auto; opacity: 1; }