/* Global variables */

:root {
    --bg-color: #f9f9f9;
    --text-color: #262626;
    --green-color: #009245;
    --red-color: #ed1c24;
    --blue-color: #0000ff;
    --grey-color: #dcdcdc;
}

/* Fonts */

@font-face {
    font-family: "ABC Diatype";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/regular/font.eot");
    src: url("../fonts/regular/font.eot?#iefix") format("embedded-opentype"),
         url("../fonts/regular/font.woff2") format("woff2"),
         url("../fonts/regular/font.woff") format("woff"),
         url("../fonts/regular/font.ttf") format("truetype");
}

@font-face {
    font-family: "ABC Diatype";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/medium/font.eot");
    src: url("../fonts/medium/font.eot?#iefix") format("embedded-opentype"),
         url("../fonts/medium/font.woff2") format("woff2"),
         url("../fonts/medium/font.woff") format("woff"),
         url("../fonts/medium/font.ttf") format("truetype");
}

/* Global styles */

html {
    font-size: 14px;
    font-family: "ABC Diatype", sans-serif;
    background-color: var(--bg-color);
}

p {
    text-align: justify;
    text-align-last: right;
    word-spacing: 0.2rem;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

.external-link-arrow {
    font-size: 0.6rem;
    color: var(--text-color);
}

.external-link-text {
    color: var(--blue-color);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.highlight {
    font-weight: 600;
}

.spaced-text {
    word-spacing: 1rem;
}

.small-text {
    font-size: 0.8rem;
    word-spacing: normal;
}

.underline-button {
    display: inline-block;
    position: relative;
    padding-bottom: 0.2rem;
    margin-bottom: -0.2rem;
}

.underline-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--text-color);
}

.underline-button:hover::after,
.underline-button:active::after,
.underline-button:focus-visible::after,
.underline-button.active::after {
    width: 100%;
}

.asterisk {
    font-size: 0.6rem;
    display: inline-block;
    vertical-align: middle;
    transform-origin: center;
}

/* Header styles */

.home-header {
  text-align: right;
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    color: var(--text-color);
}

.header-subtitle {
    word-spacing: normal;
}

/* Menu styles */

.main-menu-item {
    cursor: pointer;
    text-decoration: none;
}

.main-menu-item img {
    mix-blend-mode: screen;
    background-color: var(--text-color);
}

.menu-label {
    font-weight: 400;
    color: var(--text-color);
    opacity: 1;
    white-space: nowrap;
    display: inline-block;
}

#main-menu-about-item .main-menu-item:hover img {
    background-color: var(--red-color);
}

#main-menu-my-work-item .main-menu-item:hover img {
    background-color: var(--green-color);
}

#main-menu-misc-item .main-menu-item:hover img {
    background-color: var(--blue-color);
}

/* Disable hover when any subsection is active */
.main-menu-list:has(li.active) #main-menu-about-item .main-menu-item:hover img,
.main-menu-list:has(li.active) #main-menu-my-work-item .main-menu-item:hover img,
.main-menu-list:has(li.active) #main-menu-misc-item .main-menu-item:hover img {
    background-color: var(--grey-color);
}

/* Hide menu labels when a subsection or the contact card is active */
.main-menu-list:has(li.active) .menu-label,
body:has(#contactCard.active) .menu-label {
    opacity: 0;
    pointer-events: none;
}

/* Active menu item styling */
li.active .main-menu-item img {
    background-color: var(--grey-color);
}

/* Underline animation for menu labels*/
li:hover .menu-label.underline-button::after {
    width: 100%;
}

.main-menu-list li:has(~ li.active) .main-menu-item img,
.main-menu-list li.active ~ li .main-menu-item img {
    background-color: var(--grey-color);
}

/* Back button styles */

#back-button {
    opacity: 0;
    pointer-events: none;
}

#back-button.active {
    opacity: 1;
    pointer-events: auto;
}

#back-button a {
    text-decoration: none;
    font-size: 0.8rem;
    color: var(--blue-color);
}

/* Main content styles */

.main-content {
    text-align: right;
}


/* Section styles */

.content-section {
    opacity: 0;
    pointer-events: none;
    scrollbar-width: none; /* Firefox */
}

.content-section::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.content-section.active {
    opacity: 1;
    pointer-events: auto;
}

.content-section p { 
    font-size: 1rem;
    line-height: 1.45; 
    color: var(--text-color); 
}

/* Footer styles */

.page-footer {
    text-align: right;
    font-size: 1rem;
    color: var(--text-color);
}

.page-footer a {
    color: var(--text-color);
    text-decoration: none;
}

/* Contact card styles */

.contact-card {
    line-height: 1.45;
    color: var(--text-color);
    opacity: 0;
    pointer-events: none;
    text-align: right;
}

.contact-card.active {
    opacity: 1;
    pointer-events: auto;
}

.contact-card dt {
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--bg-color);
    width: fit-content;
}

.contact-card dd {
    background-color: var(--bg-color);
    width: fit-content;
}

/* Disable hover effects on main menu items when contact card is active */
#contactCard.active ~ .main-menu .main-menu-item img,
body:has(#contactCard.active) .main-menu .main-menu-item img {
    background-color: var(--grey-color);
}

body:has(#contactCard.active) .main-menu .main-menu-item img:hover {
    background-color: var(--grey-color);
}

/* About section styles */

.preview-toggle {
    display: none;
}

.preview-link {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--blue-color);
    white-space: nowrap;
}

/* Link preview */

.link-preview {
    opacity: 0;
    pointer-events: none;
    background-color: var(--bg-color);
}

body:has(#preview-toggle-01:checked) #link-preview-01 {
    opacity: 1;
    pointer-events: auto;
}

body:has(#preview-toggle-02:checked) #link-preview-02 {
    opacity: 1;
    pointer-events: auto;
}

body:has(#preview-toggle-03:checked) #link-preview-03 {
    opacity: 1;
    pointer-events: auto;
}

body:has(#preview-toggle-04:checked) #link-preview-04 {
    opacity: 1;
    pointer-events: auto;
}

body:has(#preview-toggle-05:checked) #link-preview-05 {
    opacity: 1;
    pointer-events: auto;
}

body:has(#preview-toggle-06:checked) #link-preview-06 {
    opacity: 1;
    pointer-events: auto;
}

.link-preview-image {
    width: 100%;
    height: auto;
    display: block;
}

.link-preview-caption {
    margin: 0.75rem 0 0 0;
    color: var(--text-color);
    text-align: left;
    text-align-last: left;
    line-height: 1.8;
}

.link-preview-close {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--blue-color);
}

.link-preview-frame {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 1px solid var(--grey-color);
}

.link-preview--audio audio {
    display: none;
}