/*a dot in front of variable initializes it no dot applies to named element*/
/*styles applied to parent apply to children unless otherwise defined on child element or variable*/

/* base styles and scaling */

/* scaling solution root font size to scale everything proportionally */
html {
    font-size: 250%; /* scale everything by 2.5x (1rem = 40px) */
    overflow-x: hidden;
    width: 100%;
    cursor: url('images/cursor.cur'), auto;
}

* {
    cursor: url('images/cursor.cur'), auto;
}

body {
    overflow-x: hidden;
    font-family: 'Roboto Mono', sans-serif;
    color: #FFFF;
    font-weight: 400;
    letter-spacing: .2px;
    margin: 0;
    padding: 10px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    cursor: url('images/cursor.cur'), auto;
}

/* typography */

h1 {
    font-family: 'Roboto', sans-serif;
    letter-spacing: .5px;
    font-size: 1.4rem;
}

h2 {
    font-family: 'Roboto', sans-serif;
    letter-spacing: .2px;
    font-weight: 600;
    font-size: 1rem;
}

h4 {
    font-size: 0.7rem;
}

p, ul {
    font-family: 'Roboto Mono', sans-serif;
    font-weight: 300;
    font-size: 0.6rem;
    line-height: 1.5;
    margin: 0 0 5px 0;
}

ul {

}

a {
    font-family: 'Roboto Mono', sans-serif;
    font-weight: 300;
    font-size: 0.6rem;
    justify-content: center;
    color: #FFFF;
    margin-bottom: 5px;
}

/* layout containers */

/* center justification */
.flex-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

h1.flex-container {
    margin-bottom: 30px;
}

p.flex-container {
    margin-bottom: 5px;
}

/* random text container */
.randomText-container {
    max-width: min(600px, 70%);
    margin: 0 auto 30px auto;
    padding: 18px;
    text-align: center;
    position: relative;
}

/* border on top layer for randomtext */
.randomText-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 3003; /* above desc box backgrounds (3002), same as link-highlight */
}

/* links sections bordered containers */
.todo-section,
.stuff-section,
.cool-section {
    max-width: min(350px, 75%);
    margin: 0 auto 30px auto;
    padding: 10px;
    position: relative;
}

.stuff-section {
    max-width: min(280px, 60%);
    padding: 18px;
}

/* border overlays for javascript */
.border-overlay {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 3003; /* above desc box backgrounds (3002), same as link-highlight */
}

/* link styles */

.links-container-todo,
.links-container-stuff,
.links-container-cool {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.links-container-todo {
    align-items: center;
}

.links-container-stuff {
    align-items: flex-start;
}

.links-container-cool {
    align-items: center;
}

/* link item styling */
.link-item {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative; /* enables z-index */
    z-index: 3003; /* above desc box backgrounds (3002) so sibling links aren't obscured */
    cursor: url('images/cursor.cur'), pointer; /* ensures pointer even on <a> tags without href */
}

.link-item.link-active {
    z-index: 3004; /* text above link-highlight (3003), borders (3002), and fill (3001) */
}

/* emoji icons unused */
.emoji-size {
    height: 1.2em;
    width: 1.2em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* fix favicon emoji alignment */
a.flex-container {
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

/* link hover highlight — background fill sits below all border lines */
.link-highlight-bg {
    position: fixed;
    background: #1f8ae0;
    border: none;
    pointer-events: none;
    z-index: 3001;
    opacity: 0;
}

.link-highlight-bg.visible {
    opacity: 1;
}

/* link hover highlight — border outline, always on top of description boxes */
.link-highlight {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    pointer-events: none;
    z-index: 3003;
    opacity: 0;
}

.link-highlight.visible {
    opacity: 1;
}

/* sub-link hover highlight — border only, same layer as other borders
   so it intersects with the sub-desc-border and template box edges */
.sub-link-highlight {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    pointer-events: none;
    z-index: 3003;
    opacity: 0;
}

.sub-link-highlight.visible {
    opacity: 1;
}

/* description boxes */

/* individual description boxes for each link */
.individual-description-box {
    position: fixed;
    width: 350px;
    padding: 20px;
    background: rgba(31, 138, 224, 0.95); /* matching page blue very opaque */
    border: 1px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* bulletproof tap-through prevention on mobile (pointer-events alone unreliable on iOS) */
    z-index: 3002; /* same layer as all other borders */
    transform: translateX(10%) translateY(-50%); /* centers vertically, slight horizontal nudge */
}

.individual-description-box.visible {
    opacity: 1;
    pointer-events: auto; /* allow link clicks when visible */
    visibility: visible;
}

.individual-description-box p,
.individual-description-box div {
    margin: 0;
    font-family: 'Roboto Mono', sans-serif;
    font-weight: 300;
    font-size: 0.55rem;
    color: white;
    line-height: 1.6;
    text-align: left;
}

.individual-description-box a {
    font-family: 'Roboto Mono', sans-serif;
    font-size: 0.55rem;
    color: white;
    line-height: 1.6;
    text-decoration: none;
    opacity: 0.8;
    pointer-events: none; /* hidden boxes: links must not intercept taps from boxes below */
}

/* re-enable link clicks only when the parent box is actually shown */
.individual-description-box.visible a {
    pointer-events: auto;
}

.individual-description-box a:hover {
    opacity: 1;
}

/* Sub-desc box is split into two layers so its border intersects the template box:
   - .sub-desc-fill   = background only (no border), sits behind template box
   - .sub-desc-border = border only (transparent bg), appended after template so it paints on top */
.individual-description-box.sub-desc-fill {
    border: none;
    z-index: 3001; /* explicitly below template box (3002) — don't rely on DOM order */
}

.individual-description-box.sub-desc-border {
    background: transparent !important;
    pointer-events: none !important;
    z-index: 3003; /* above template box fill (3002) */
}

/* fill layer carries the background; its text sits behind the template box (z-index 3001 < 3002)
   so hide it there — the border layer at z-index 3003 renders the visible text on top */
.individual-description-box.sub-desc-fill p,
.individual-description-box.sub-desc-fill div,
.individual-description-box.sub-desc-fill a {
    color: transparent;
}

/* keep border overlay non-interactive even when visible */
.individual-description-box.sub-desc-border.visible {
    pointer-events: none !important;
}
.individual-description-box.sub-desc-border.visible a {
    pointer-events: none !important;
}

/* mobile responsive */

@media (max-width: 976px), (pointer: none), (pointer: coarse) {
    html {
        font-size: 180%; /* slightly smaller scale on mobile */
    }

    /* bordered sections — wider on small screens */
    .randomText-container {
        max-width: min(600px, 92%);
        padding: 14px 16px;
        margin-bottom: 20px;
        font-size: 0.75rem; /* up from global p 0.6rem */
    }

    .todo-section,
    .cool-section {
        max-width: min(350px, 88%);
        padding: 12px 16px;
        margin-bottom: 20px;
    }

    .stuff-section {
        padding: 12px;
        margin-bottom: 20px;
    }

    /* links easier to tap — tighter margins, padding carries the touch target */
    .link-item {
        min-height: 44px; /* iOS HIG minimum touch target */
        margin-top: 2px;
        margin-bottom: 2px;
        padding: 6px 4px;
        font-size: 0.9rem; /* larger than the global 0.6rem to fill the box */
    }

    /* emoji icons */
    .emoji-size {
        height: 1.4em;
        width: 1.4em;
        flex-shrink: 0;
    }

    /* headings */
    h4.flex-container {
        font-size: 0.85rem;
        margin: 15px 0 10px 0;
    }

    /* form inputs for other pages */
    .input-top, 
    .input-bot {
        padding: 12px;
        margin: 8px 0;
        font-size: max(16px, 0.6rem); /* prevents zoom on ios */
        box-sizing: border-box;
        border: 1px solid rgb(0, 0, 0);
    }
    
    .input-bot {
        min-height: 80px;
        resize: vertical;
    }
    
    .form-container {
        width: min(450px, 65%);
        padding: 0 5px;
    }
    
    .pfp-selector-container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .submit {
        padding: 15px;
        font-size: 16px;
    }

    /* description boxes on mobile — JS owns all positioning; CSS handles styling only */
    .individual-description-box {
        width: min(340px, 88vw) !important;
        padding: 18px 22px !important;
        background: rgba(31, 138, 224, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        z-index: 9000 !important;
    }

    /* sub-link highlight on mobile must clear the template box (9000) to remain visible */
    .sub-link-highlight {
        z-index: 9001 !important;
    }

    .individual-description-box.visible {
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* split-layer effect not needed on mobile — hide border overlay, show fill text */
    .individual-description-box.sub-desc-border {
        display: none !important;
    }
    .individual-description-box.sub-desc-fill p,
    .individual-description-box.sub-desc-fill div,
    .individual-description-box.sub-desc-fill a {
        color: white !important;
    }

    .individual-description-box p,
    .individual-description-box div {
        line-height: 1.9 !important;
        text-align: center !important;
    }

    .individual-description-box a {
        line-height: 1.9 !important;
    }

    /* keep borders on top on mobile */
    .todo-section::before,
    .stuff-section::before,
    .cool-section::before,
    .randomText-container::before {
        z-index: 3003;
    }
}

/* mobile touch devices — larger text regardless of viewport width */
@media (hover: none) {
    .individual-description-box p,
    .individual-description-box div {
        font-size: 0.9rem !important;
    }

    .individual-description-box a {
        font-size: 0.9rem !important;
    }
}

/* webring marquee styles */

.webring-section {
    width: 100%;
    margin-top: 50px;
    padding: 20px 0;
    overflow: hidden;
}

.webring-section h4 {
    margin-bottom: 20px;
}

/* marquee row container */
.marquee-row {
    display: flex;
    overflow: hidden;
    margin: 10px 0;
    gap: 0;
    white-space: nowrap;
}

/* marquee content duplicate for seamless loop */
.marquee-content {
    display: inline-flex;
    gap: 15px;
    padding: 5px 0;
    animation: scroll-left 60s linear infinite;
}

/* slow scroll speed for row 2 */
.marquee-content.marquee-slow {
    animation-duration: 80s;
}

/* fast scroll speed for row 3 */
.marquee-content.marquee-fast {
    animation-duration: 40s;
}

/* reverse direction for row 2 */
.marquee-reverse .marquee-content {
    animation-name: scroll-right;
}

/* marquee images */
.marquee-content img {
    width: 240px;
    height: 60px;
    object-fit: contain;
    display: block;
}

.marquee-content a {
    display: inline-block;
    flex-shrink: 0;
}

/* scroll left animation */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* scroll right animation */
@keyframes scroll-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* pause on hover */
.marquee-row:hover .marquee-content {
    animation-play-state: paused;
}

/* mobile adjustments */
@media (max-width: 976px) {
    .webring-section {
        margin-top: 30px;
    }
    
    .marquee-content img {
        width: 180px;
        height: 45px;
    }
    
    .marquee-content {
        gap: 10px;
    }
}
/* mobile responsive */
@media (max-width: 450px) {
    html {
    font-size: 130%; 
    }
}