/* === Variables & Icons === */
:root {
    --colorTextBlack: #333333;
    --colorTextBlackSecondary: #505050;
    --colorTextBlackDescription: #888888;
    --colorMainGrey: #E9E9E9;
    --colorMainGreySecondary: #F4F4F4;
    --colorWhite: #FFFFFF;
    --colorBlack: #232323;
    --colorHighlights: #DA0A22;
    --colorSuperHighlight: #277CD9;
    --colorLink: #277CD9;
    --iconDetailsHeader: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23FFFFFF" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /%3E%3C/svg%3E');
    --iconCopyAction: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23277CD9" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /%3E%3C/svg%3E');
    --iconShoppingAction: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23FFFFFF" d="M9,20A2,2 0 0,1 7,22A2,2 0 0,1 5,20A2,2 0 0,1 7,18A2,2 0 0,1 9,20M17,18A2,2 0 0,0 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20A2,2 0 0,0 17,18M7.2,14.63C7.19,14.67 7.19,14.71 7.2,14.75A0.25,0.25 0 0,0 7.45,15H19V17H7A2,2 0 0,1 5,15C5,14.65 5.07,14.31 5.24,14L6.6,11.59L3,4H1V2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,12C16.94,12.62 16.27,13 15.55,13H8.1L7.2,14.63M9,9.5H13V11.5L16,8.5L13,5.5V7.5H9V9.5Z" /%3E%3C/svg%3E');
    --iconEmail: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23FFFFFF" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /%3E%3C/svg%3E');
    --iconTooltipHelp: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23888888" d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /%3E%3C/svg%3E');
    --cardBoxShadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25);
}

/* === Fonts === */
body {
    font-family: Ubuntu, sans-serif;
    line-height: 1.5;
}

/* === Layout === */
html {
    height: 100%;
}

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

.layout-wrap {
    --layout-mobile: 1;
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas:
        'header'
        'message'
        'rules'
        'details'
        'explore'
        'footer';
    --layout-desktop: 0;
    --desktop-grid-template-columns: minmax(2.5rem, auto) 1fr 2.5rem 1fr minmax(2.5rem, auto);
    --desktop-grid-template-rows: max-content 2.5rem 1fr 2.5rem max-content max-content;
    --desktop-grid-template-areas: 'header  header  header  header  header' '. . . . .' '. rules . details .' '. . . . .' 'explore explore explore explore explore' 'footer  footer  footer  footer  footer';
}

@media all and (min-width: 64em) {
    .layout-wrap {
        --layout-mobile: 0;
        --layout-desktop: 1;
        grid-template-columns: var(--desktop-grid-template-columns);
        grid-template-rows:    var(--desktop-grid-template-rows);
        grid-template-areas:   var(--desktop-grid-template-areas);
    }
}

.layout-wrap > .layout-header  { grid-area: header;  }
.layout-wrap > .layout-message { grid-area: message; }
.layout-wrap > .layout-rules   { grid-area: rules;   }
.layout-wrap > .layout-details { grid-area: details; }
.layout-wrap > .layout-explore { grid-area: explore; }
.layout-wrap > .layout-footer  { grid-area: footer;  }

/* === Base === */
body {
    background-color: var(--colorWhite);
    color: var(--colorTextBlack);
}

a {
    color: var(--colorLink);
    text-decoration: underline;
}

figure, h1, h2, h3, h4, p {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: normal;
}

/* === Common blocks === */
.logo,
.layout-header,
.layout-explore,
.layout-footer {
    width: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    grid-gap: 0.625rem;
}

.logo img {
    height: 5rem;
    width: auto;
    display: block;
    margin: 0.75rem;
}

/* === Header === */
.layout-header {
    background-color: var(--colorBlack);
    color: var(--colorWhite);
    border-bottom: 0.375rem solid var(--colorSuperHighlight);
    padding: 1.625rem 1rem 2.5rem;
}

.layout-header .logo {
    background-color: var(--colorWhite);
    color: var(--colorBlack);
}

.layout-header h1 {
    text-transform: uppercase;
    font-size: 1.625rem;
    font-weight: bolder;
}

.layout-header h2 {
    font-size: 1rem;
    font-weight: normal;
}

/* === Rules card === */
.layout-rules {
    align-self: start;
    padding: 2rem 1rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--cardBoxShadow);
}

.layout-rules header {
    display: grid;
    place-items: center;
    margin-bottom: 1.5rem;
}

.layout-rules h3 {
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: bolder;
}

.layout-rules h4 {
    color: var(--colorHighlights);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: bolder;
}

.layout-rules ul {
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.layout-rules li {
    margin-bottom: 1rem;
}

/* === Details card === */
.layout-details {
    align-self: start;
    padding: 0 1rem;
    margin-bottom: 2.5rem;
}

.layout-details header {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 2.5rem;
    min-height: 3rem;
}

.layout-details header:before {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--colorHighlights);
    background-image: var(--iconDetailsHeader);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.layout-details h3 {
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: bolder;
}

.layout-details h4 {
    font-size: 0.75rem;
    font-weight: normal;
    transition: opacity 800ms ease-in;
}

.layout-details:not(.feature-datacopy-activated) h4 { opacity: 0; }
.layout-details:is(.feature-datacopy-activated) h4  { opacity: 1; }

/* === Details table === */
.details-table {
    margin: 0;
    padding: 0;
}

.details-table + .details-table {
    margin-top: 0.5rem;
}

.details-table li {
    background-color: var(--colorMainGreySecondary);
    border-bottom: solid 1px var(--colorMainGrey);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.625rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.details-table strong {
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    color: var(--colorTextBlackSecondary);
    font-size: 0.875rem;
}

.details-table small {
    font-size: 1em;
    font-weight: normal;
    color: var(--colorTextBlackDescription);
    max-width: 18em;
}

.details-table data {
    align-self: start;
    position: relative;
    max-width: 69%;
    display: inline-block;
    padding-right: 2rem;
    text-align: right;
    cursor: pointer;
}

.details-table data:before {
    content: '';
    position: absolute;
    top: calc(50% - 1rem);
    right: -0.25rem;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    background-image: var(--iconCopyAction);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.details-table data:after {
    content: attr(title);
    pointer-events: none;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    right: -0.25rem;
    font-size: 0.875rem;
    transition: opacity 400ms ease-out;
    background-color: var(--colorBlack);
    color: var(--colorWhite);
}

.details-table data.copied:after {
    opacity: 1;
    padding: 0.25rem;
}

/* === Explore / Footer === */
.layout-explore h2,
.layout-footer h2 {
    text-transform: uppercase;
    font-size: 1.125rem;
    margin: 0;
}

/* === Tooltips / Blockquotes === */
.layout-wrap blockquote {
    position: absolute;
    bottom: 100%;
    left: 1.5em;
    place-items: center;
    width: max-content;
    max-width: 17em;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--colorBlack);
    color: var(--colorWhite);
    pointer-events: none;
    display: none;
}

.layout-rules li:has(blockquote),
.layout-details small:has(blockquote) {
    position: relative;
}

.layout-rules li:has(blockquote):hover blockquote,
.layout-rules li:has(blockquote):active blockquote,
.layout-rules li:has(blockquote):focus-within blockquote,
.layout-rules li:has(blockquote):focus blockquote,
.layout-details small:has(blockquote):hover blockquote,
.layout-details small:has(blockquote):active blockquote,
.layout-details small:has(blockquote):focus-within blockquote,
.layout-details small:has(blockquote):focus blockquote {
    display: inline-block;
}

.layout-rules li:has(blockquote):after,
.layout-details small:has(blockquote):after {
    content: '';
    cursor: help;
    display: inline-block;
    width: 1.0rem;
    height: 1.0rem;
    background-image: var(--iconTooltipHelp);
    background-size: 1.0rem 1.0rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* === Loading overlay === */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--colorMainGrey);
    border-top: 4px solid var(--colorLink);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-text {
    color: var(--colorTextBlackSecondary);
    font-size: 1rem;
    text-align: center;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.layout-wrap.loading .layout-rules,
.layout-wrap.loading .layout-details {
    opacity: 0.3;
    pointer-events: none;
}

/* === Error state === */

.layout-message {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.layout-message.visible {
    display: flex;
}

.layout-message h2 {
    font-size: 1.375rem;
    font-weight: bold;
    color: var(--colorHighlights);
    margin-bottom: 1rem;
}

.layout-message p {
    color: var(--colorTextBlackSecondary);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 32em;
}

.layout-wrap.state-error {
    grid-template-areas: 'header' 'message';
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
}

.layout-wrap.state-error .layout-rules,
.layout-wrap.state-error .layout-details {
    display: none;
}

/* === Reference warning === */
.reference-warning {
    background-color: #fee;
    border: 2px solid var(--colorHighlights);
    border-radius: 0.25rem;
    padding: 1rem;
    margin: 1rem 0;
    color: var(--colorHighlights);
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
}

.reference-warning-icon {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1em;
}