/*
 Theme Name:   Child Theme
 Template:     blankslate
*/

/* Theme identification only.
   Content builder: edit-profile.css
   Shared profile display: profile.css
   These are loaded conditionally in functions.php. */

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

html {
   font-family: 'degular', sans-serif;
   overflow-x: hidden;
}

div#wpadminbar {
    position: relative;
    z-index: 0;
}

main#content {
    min-height: 100vh;
}

section.row {
    float:left;
    width:100%;
    display:flex;
}

.halfSection {
    width:100%;
}

body.home p {
    text-align:justify;
    line-height:1.1em;
    font-size:16px;
}

.paper {
    background-image:url('');
}

#mainLogo {
    
}

#homeLogo img {
    width:200px;
}

.home #leftRule {
    position: absolute;
    left: 0;
    width: 80px;
    border-right: 1px solid var(--profile-margin-color, #ffc0cb);
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

header#header {
    position:fixed;
    width:100%;
    top:0;
    z-index: 999;
    background:white;
}

.nav {
    float: right;
}

.nav a {
    padding:0 .5em;
    color:black;
    font-weight:bold;
    background:pink;
}

body.home header#header {
    display:none;
}

#homeLogo span {
    background: pink;
    color: black;
    font-weight: bold;
    text-decoration: none;
    line-height: 1em;
    margin-bottom: .2em;
    float: left;
    clear: both;
}

a#randomPageButton {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 25px;
    z-index: 99;
    transition:width .5s;
    height: auto;
    overflow:hidden;
}

a#randomPageButton:hover {
    width:50px;
}

a#randomPageButton .text {
    position: fixed;
    top: 40vw;
    font-weight: bold;
    color: black;
    text-align: right;
    right: 0px;
    z-index: 1;
    opacity:0;
    transition: all 1s;
    transition-delay:.5s;
}

a#randomPageButton:hover .text {
    right:15px;
    opacity:1;
}

a#randomPageButton .blur {
    position: fixed;
    top: 35vw;
    background: white;
    right: 0px;
    width: 50px;
    filter: blur(21px);
    height: 190px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    opacity:0;
    transition: all 1s;
}

a#randomPageButton:hover .blur {
    opacity:1;
    width:70px
}

a#randomPageButton span {
    background: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 20%;
    float: left;
    height: 100%;
}

/* Transform the content only: transforming body traps fixed controls. */
body:has(a#randomPageButton) > #wrapper {
    transform: translateX(0);
    transition: transform .5s;
}

body:has(a#randomPageButton:hover) > #wrapper {
    transform: translateX(-20px);
}

#bookLayout {
   float: left;
   width:100%;
   display:flex;
}

#binding {
   width:8vw;
   background:rgb(39, 39, 39);
}

#pageCover {
   width:100%;
   background-image:url("http://worldwideweb.wpengine.com/wp-content/themes/child-theme/Images/marble2-seamless.png");
   background-size:450px;
   background-color: #253B52;
   padding:0 8vw 0 0;
}

div#header {
    margin-bottom: 2em;
    float: left;
    width: 100%;
}

nav#menu {
    float: right;
}

nav#menu a {
    color: black;
    margin-left: 1em;
    font-weight: bold;
    background: pink;
    font-style: italic;
}

#coverContent {
    width: 100%;
    background: white;
    padding: 2em 5vw 0;
    box-shadow: 0 0 300px black;
    float: left;
    width: 100%;
}

div#coverContentInner {
    padding: 8vw 0 8vw;
    float: left;
    width: 100%;
    border-bottom: 0;
}

#coverContent h2 {
    font-size:5em;
    line-height:1em;
    text-align: center;
    margin:0 0 1em;
    float:left;
    width:100%;
}

span.textLine {
    float: left;
    width: 100%;
    border-bottom: 2px solid #e8e8e8;
}

section.CTASection {
    flex-direction: column;
    align-items: center;
}

.CTA {
    text-align: center;
    font-size: 18px;
    justify-content: center;
    gap:1em;
    flex-direction:column;
    align-items: center;
    text-decoration:none;
    padding: 1em 3em;
    border: 0;
    border-radius: .3rem;
    color: white;
    background:#f75252;
    font: inherit;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-style: italic;
}

/* Homepage: newest published members. */
/* Override the shared .row layout: carousel and controls occupy separate rows. */
.row.recent-profiles {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    padding: 2rem 0;
    background: #d2d2d2;
}
.recent-profiles-list {
    --carousel-gutter: clamp(24px, 4vw, 64px);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    /* Three full cards + 30% of the next, accounting for all three gaps. */
    grid-auto-columns: calc((100% - 3rem) / 3.3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    list-style: none;
    margin: 1.5rem 0 0;
    /* Space inside the scrollport keeps the offset border/shadow visible. */
    padding: 8px var(--carousel-gutter) 24px;
    scroll-padding-inline: var(--carousel-gutter);
}
.recent-profiles-list::-webkit-scrollbar { display: none; }
.recent-profiles-list.is-wheel-scrolling { scroll-snap-type: none; }
@media (min-width: 1400px) {
    .recent-profiles-list { grid-auto-columns: calc((100% - 4rem) / 4.3); }
}
@media (max-width: 1000px) {
    .recent-profiles-list { grid-auto-columns: calc((100% - 2rem) / 2.3); }
}
@media (max-width: 600px) {
    .recent-profiles-list { grid-auto-columns: calc((100% - 1rem) / 1.3); }
}
.recent-profiles-controls:not([hidden]) {
    position: static;
    float: none;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
    gap: .75rem;
    padding-inline: 2rem;
}
.recent-profiles-controls button { 
    width: 70px; height: 34px; background: transparent; color: black; font: inherit; cursor: pointer; border:none;
}
.recent-profiles-controls button img {
    width: 40px;
}

.recent-profiles-controls button:disabled { opacity: .35; cursor: default; }
.recent-profiles-controls button:focus-visible, .recent-profiles-list:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.recent-profiles-list .recent-profile-link:focus-visible { outline-offset: -4px; }
.recent-profiles-list .recent-profile-link { box-sizing: border-box; }
.recent-profile {
    scroll-snap-align: start;
    margin: 0;
    min-width: 0;
    border-radius: 20px;
    background-color: var(--card-page-background, #ffffff);
    overflow: visible !important;
}
.recent-profile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 220px;
    height: 100%;
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--card-header-background, transparent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 7px solid currentColor;
    border-radius: 12px;
    color: var(--card-text-color, #333333);
    text-decoration: none;
    overflow-wrap: anywhere;
    box-shadow: 0 14px 0 currentColor;
}
.recent-profile-link:hover .recent-profile-title,
.recent-profile-link:focus-visible .recent-profile-title { text-decoration: underline; }
.recent-profile-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.recent-profile-title { margin: 0; font-size: 1rem; line-height: 1; color: inherit; font-family: inherit; }
.recent-profile-byline { font-size: 0.8em; }


/* WWW: reveal one word over the other initials without moving the heading.
   The invisible initials keep their hover areas, so you can sweep across all three. */
.www-reveal {
    display: inline-flex;
    position: relative;
    isolation: isolate;
    white-space: nowrap;
}
.www-word {
    display: inline-block;
    position: relative;
    cursor: default;
    transition: opacity 180ms ease;
}
.www-rest {
    position: absolute;
    left: 100%;
    top: 0;
    opacity: 0;
    transform: translateX(-.08em);
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms ease;
}
.www-question { transition: opacity 180ms ease; }
.www-reveal:has(.www-word:is(:hover, :focus-visible)) .www-word:not(:hover, :focus-visible),
.www-reveal:has(.www-word:is(:hover, :focus-visible)) .www-question {
    opacity: .3;
}
.www-reveal .www-word:is(:hover, :focus-visible) {
    opacity: 1;
    z-index: 1;
}
.www-word:is(:hover, :focus-visible) .www-rest {
    opacity: 1;
    transform: translateX(0);
}
.www-word:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: .12em;
}

/* HOMEPAGE HUMAN STORY
   Panel colors: data-background/data-foreground in index.php.
   Keep overflow visible on this wrapper and its ancestors for sticky positioning. */
#internetHumans {
    --humans-background: #ffffff;
    --humans-foreground: #111111;
    --humans-gutter: 7vw;
    --humans-max-width: 1200px;
    --humans-heading-size: clamp(2rem, 9vw, 146px);
    --humans-word-gap: calc(var(--humans-heading-size) * .22);
    --humans-sticky-top: 20vh;
    clear: both;
    display: flow-root;
    position: relative;
    width: 100%;
    padding: var(--humans-gutter) 0;
    /* Full story width, excluding the browser scrollbar, for image-row sizing. */
    container-type: inline-size;
    color: var(--humans-foreground);
    background: var(--humans-background);
    transition: background-color 450ms ease, color 450ms ease;
}

.humans-panel.is-active .humans-intro-image {
    opacity:1;
}

#internetHumans .humans-intro-title,
#internetHumans #stickyHumans,
#internetHumans .humans-panel h3 {
    font-size: clamp(2rem, 9vw, 146px);
    font-weight: 700;
    font-style: italic;
    line-height: 110px;
    letter-spacing: -.035em;
    color: inherit;
    margin: 0;
}

/* Notebook rules: decoration never changes the text or sticky track widths. */
#internetHumans {
    --humans-rule-color: #e8e8e8;
    --humans-rule-thickness: 2px;
    isolation: isolate;
}
#internetHumans .humans-intro-title > .textLine {
    display: block;
    position: relative;
    float: none;
    width: auto;
    border: 0;
}
#internetHumans .humans-intro-title > .textLine::after,
#internetHumans .humans-story::before {
    content: "";
    position: absolute;
    bottom: 0;
    /* Both text elements start at the centered content's left edge. */
    left: calc((min(var(--humans-max-width), calc(100cqw - var(--humans-gutter) - var(--humans-gutter))) - 100cqw) / 2);
    width: 100cqw;
    height: var(--humans-rule-thickness);
    background: var(--humans-rule-color);
    z-index: -1;
    pointer-events: none;
}

/* Leave the third rule at the original baseline instead of following the word. */
#internetHumans .humans-story::before {
    top: 107px;
    bottom: auto;
}

/* The vertical notebook margin also sits behind the content. */
#internetHumans > #leftRule { z-index: -1; }

.humans-container {
    width: calc(100% - var(--humans-gutter) - var(--humans-gutter));
    max-width: var(--humans-max-width);
    margin-inline: auto;
}

.humans-story {
    display: grid;
    /* First track is exactly the width of “humans”, followed by a word space. */
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--humans-word-gap);
    position: relative;
}
.humans-sticky-rail {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    /* The word floats above images; its rule lives on .humans-story separately. */
    z-index: 2;
    pointer-events: none;
}
#internetHumans #stickyHumans {
    display: block;
    position: sticky;
    top: var(--humans-sticky-top);
}
/* Share the same text-sized tracks through every section. */
.humans-panels {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: subgrid;
}
.humans-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    min-height: 85vh;
    min-height: 85svh;
    padding-bottom: 6rem;
}
.humans-panel-intro { min-height: 45vh; min-height: 45svh; }
/* Intro photo stays in the second track; its panel supplies .is-active. */
.humans-panel-intro > .humans-intro-image {
    grid-column: 2;
    grid-row: 2;
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: 20px;
}
@media (prefers-reduced-motion: reduce) {
    .humans-panel-intro > .humans-intro-image {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.humans-panel-copy { grid-column: 2; min-width: 0;}
p.humans-panel-copy,
.humans-panel-copy p {
    font-size: 16px;
    line-height: 1.1em;
    max-width: 30ch;
    margin: 1rem 0 1.5rem;
}
p.humans-panel-copy { font-weight: 600; font-style: italic; }
.humans-link {
    display: inline-block;
    color: inherit;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: .65em 1em;
    font-weight: 600;
    text-decoration: none;
}
.humans-link:hover { text-decoration: underline; }
.humans-link:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.humans-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin-top: 4rem;
    padding: 1rem;
}

.humans-panel > .imageGroup {
    grid-column: 1 / -1;
    /* Break out of the centered text column while remaining inside its section. */
    width: 100cqw;
    max-width: none;
    margin-inline: calc((100% - 100cqw) / 2);
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    min-width: 0;
    margin-top: 3rem;
    overflow: visible;
    padding-bottom: 1rem;
    transform: translateX(-30px);
}

.humans-intro-image {
    opacity:0;
    transition:
        transform 1s steps(6, end), opacity 2s !important;
}

.humans-panel > .imageGroup img {
    flex: 0 0 auto;
    display: block;
    height: clamp(180px, 28vw, 380px);
    width: auto;
    max-width: none;
    object-fit: contain;
    border-radius: 20px;
    border: 7px solid white;
    animation: photo-wiggle 5s steps(12, end) infinite;
    box-shadow:0px 14px 0 white;
}

.humans-panel img {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s;
}

.humans-panel.is-active img {
    opacity: 1;
    transform: translateX(0);
}

@keyframes photo-wiggle {
    0%, 100% { transform: translateY(10px);}
    50%      { transform: translateY(-10px);}
}

.imageGroup img:nth-child(3n + 1) {
    animation-duration: 5s;
    animation-delay: -0.4s;
    transition-delay:0.5s;
}

.imageGroup img:nth-child(3n + 2) {
    animation-duration: 8s;
    animation-delay: -1.1s;
    transition-delay:1s;
}

.imageGroup img:nth-child(3n) {
    animation-duration: 3s;
    animation-delay: -0.8s;
    animation-direction: reverse;
    transition-delay:0.75s;
}

.humans-sample-card:nth-child(2) { transform: rotate(4deg) translateY(-1rem); }
.humans-note {
    grid-column: 2;
    margin-top: 4rem;
    padding-block: 1rem;
    border-block: 1px solid currentColor;
    font-size: clamp(1.3rem, 2.5vw, 2.5rem);
    line-height: 1.5;
}
#internetHumans .humans-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    #coverContent h2 {
        font-size:2em;
    }
    #coverContent {
        padding: 2em 10vw 0;
    }
    div#pageCover {
        padding: 0 20px 0 0;
    }
    div#binding {
        width: 20px;
    }

    nav.recent-profiles-controls {
        padding: 0 !important;
        margin: 0 !important;
    }

    .recent-profiles-controls button {
        width: 44px;
        padding: 0;
    }

    nav.recent-profiles-controls {
        width: 145px !important;
    }

    #internetHumans .humans-intro-title, #internetHumans #stickyHumans, #internetHumans .humans-panel h3 {
        font-size: 3em;
        line-height: 38px;
    }

    #internetHumans {
        --humans-heading-size: 7vw;
        --humans-gutter: 6vw;
        --humans-sticky-top: 20vh;
    }
    .humans-panel { min-height: 60svh; padding-bottom: 3rem; }
    .humans-panel-intro { min-height: 35svh; }
    .humans-cards { gap: .8rem; margin-top: 2rem; padding: .4rem; }
    .humans-sample-card { padding: .75rem; border-width: 3px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    #internetHumans { transition: none; }
}



@media (prefers-reduced-motion: reduce) {
    .www-word, .www-rest, .www-question { transition: none; }
}

/* Add random-color-button to any button/link that should cycle this palette. */
.random-color-button {
    --random-color-duration: 24s;
    background-color: var(--random-color-1, #d7c9a4);
    color: #111;
}
.random-color-button.random-colors-ready {
    animation: random-button-colors var(--random-color-duration) ease-in-out infinite;
}
@keyframes random-button-colors {
    0%, 100% { background-color: var(--random-color-1); }
    25% { background-color: var(--random-color-2); }
    50% { background-color: var(--random-color-3); }
    75% { background-color: var(--random-color-4); }
}
@media (prefers-reduced-motion: reduce) {
    .random-color-button.random-colors-ready { animation: none; }
}