/* =============================================================
   ds.css — Homepage-specific styles
   Hero section, "What I do" accordion, section boxes (.box),
   list styling (// bullets), like-display animation.
   Loaded via index.njk (homepage only).
   ============================================================= */

ul:not(.nav-links) li,
ol:not(.nav-links) li {
    list-style-type: "// ";
    margin-left: 2rem;
}

h2{
    color: #000000;
}

.hero{
    min-height: 20vh;
    margin-top: 8rem;
    padding-right: 5rem;
    margin-bottom: 8rem;
    padding-top: 3rem;
    max-width: 980px;
}

.hero_emoji{
    font-size: var(--font-size-xxl);
    margin-left: -1rem;
    color: #000000;
}

.hi{
    font-size: var(--font-size-xxl);
    color: #000000;
    max-width: 1024px;
}

.hero-text{
    padding: 2rem 1rem 2rem 0rem;
    max-width: 1024px;
}

.like-display{
    color: #000000;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6' width='40' height='6'%3E%3Cpath d='M0 3 Q5 0 10 3 Q15 6 20 3 Q25 0 30 3 Q35 6 40 3' fill='none' stroke='%23008000' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: left bottom;
    padding-bottom: 0.15em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.like-display:hover {
    animation: wave-flow 0.8s linear infinite;
}

@keyframes wave-flow {
    from { background-position-x: 0; }
    to { background-position-x: 40px; }
}

/* Click-to-cycle slide (initLikeFacts in main.js):
   each word is an inline-block span (wrapping still happens between
   words); old words stagger-slide up + out, new words rise in.
   The squiggle underline stays put as an anchor. */
.like-word {
    display: inline-block;
}

.like-display.swap-out .like-word {
    animation: like-word-out 150ms ease-in both;
    animation-delay: calc(var(--i) * 30ms);
}

.like-display.swap-in .like-word {
    animation: like-word-in 240ms ease-out both;
    animation-delay: calc(var(--i) * 30ms);
}

@keyframes like-word-out {
    to { opacity: 0; transform: translateY(-0.35em); }
}

@keyframes like-word-in {
    from { opacity: 0; transform: translateY(0.35em); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .like-display.swap-out .like-word,
    .like-display.swap-in .like-word {
        animation: none;
    }
}

.listspace{
}

/* ── Section boxes ──────────────────────────── */
.box {
    border: 2px solid #000000;
    padding: 4rem;
    margin-bottom: 0;
}

.container1, .container2, .container3, .container4 {
    padding: 3rem 4rem 3rem 3rem;
    margin-top: 2rem;
    color: #000000;
}

.container1 { background-color: rgba(255, 0, 0, 0.06); }
.container2 {
    background-color: rgba(0, 128, 0, 0.06);
}

.container2 ul {
    white-space: nowrap;
    padding: 0;
    margin: 0;
    font-size: clamp(0.9rem, 3.5vw, 1.6rem);
}

.container2 .listspace {
}
.container3 { background-color: rgba(255, 255, 0, 0.12); }
.container4 { background-color: rgba(0, 0, 0, 0.03); }

/* ── Accordion ──────────────────────────── */
.accordion {
    margin-top: 2rem;
}

.accordion-item {
    border: 2px solid #000;
    margin-bottom: 0.5rem;
    background: #fff;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    font: inherit;
    color: #000;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.accordion-header:hover {
    background: rgba(0,0,0,0.03);
}

/* ── Label cross-fade ─── */
.accordion-label {
    position: relative;
    display: inline-block;
}

.accordion-label .caps,
.accordion-label .normal {
    display: block;
    transition: opacity 0.3s ease, font-size 0.3s ease, letter-spacing 0.3s ease;
}

/* Collapsed: show caps, hide normal */
.accordion-label .caps {
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 1;
}

.accordion-label .normal {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* Expanded: hide caps, show normal */
.accordion-header[aria-expanded="true"] .accordion-label .caps {
    opacity: 0;
    font-size: 1.25rem;
    letter-spacing: normal;
}

.accordion-header[aria-expanded="true"] .accordion-label .normal {
    opacity: 1;
}

.accordion-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.accordion-icon::before {
    content: "+";
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 300;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 1.5rem;
    color: #000;
}

.accordion-panel p,
.accordion-panel ul {
    margin: 1rem 0;
}

.accordion-panel ul {
    padding-left: 2rem;
}

.accordion-panel li {
    margin-left: 0;
}

.accordion-panel li .listspace {
    padding-left: 1rem;
}

.accordion-panel.open {
    max-height: 600px;
    padding: 0 1.5rem 1.25rem;
}

.refresh-icon{
        height: 1.5rem;
        width: 1.5rem;
        cursor: pointer;
        filter: brightness(0.3);
        transition: transform 0.4s ease;
    }

    .refresh-icon:hover {
        transform: rotate(180deg);
    }


span.email b {
	display: none !important;
}


/* #media queries */
@media screen and (min-width: 1200px) {
        .hero{
        padding-right: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .hero{
        padding-right: 2rem;
    }
    .hero-text{
        padding-right: 1rem;
        max-width: 768px;
    }
    .box {
        padding: 2rem;
    }
    .container1, .container2, .container3, .container4{
        padding: 2rem 1.5rem;
    }
    h2{
        padding-right: 7rem;
    }
    .bullets{
        margin-left: 4.5rem;
        list-style-position: outside;
    }
}