/*
Theme Name: Sam Cranwell Portfolio
Theme URI: https://samcranwell.com
Author: Sam Cranwell
Description: Independent portfolio theme preserving Sam's CMP homepage design.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: samcranwell-portfolio
*/


body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    font-size: 2.5em;
    margin-bottom: .5em;
    margin-top: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.logo-wrapper.image {
    margin-bottom: 2em;
}

.section {
    flex-grow: 1;
    padding: 2em;
    text-align: center;
    position: relative;
}

.section-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-grow: 10;
    width: 70%;
    max-width: 1170px;
    min-height: calc(100vh - 7em);
    margin: 0 auto;
    pointer-events: none;
}

.graphic-logo {
    width: auto;
    max-width: 500px;
    max-height: 300px;
    margin: 0 auto;
}

.text-logo {
    font-size: 2em;
}

.section-body p {
    font-size: 1em;
    line-height: 1.5em;
}

#background-wrapper, #background-image, #background-color, .background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#background-wrapper {
    overflow: hidden;
}

#background-image {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#background-image.pattern {
    background-size: initial;
    background-repeat: repeat;
}

.video-banner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

#background-image {
    opacity: 0;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

#background-image.loaded {
    opacity: 1;
}

.video-banner iframe, .video-banner video {
    -o-transition: opacity 1500ms;
    transition: opacity 1500ms;
}

.social-list {
    height: 3em;
    padding: 0;
    margin: 0;
    z-index: 100;
    text-align: center;
}

.social-list li {
    list-style: none;
    display: inline-block;
    padding: 0 2px;
}

.social-list a {
    display: block;
    height: 3em;
    width: 2.5em;
    line-height: 3em;
    background: transparent;
    -o-transition: background 300ms linear;
    transition: background 300ms linear;
    border-radius: 5px;
}

.social-list i {
    font-size: 1em;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}

.social-list a:hover i {
    -webkit-animation: spin 300ms linear;
    animation: spin 300ms linear;
}

.lang-switch-wrapper {
    position: absolute;
    top: 50px;
    right: 50px;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 1024px) {
    .graphic-logo {
        padding: 20px 0;
    }
    .section-body, .social-list {
        font-size: 16px!important;
    }
    .section-body h1:not(.text-logo), .section-body h2, .section-body h3, .section-body h4, .section-body h5, .section-body h6, .text-logo-wrapper {
        font-size: 1.8em!important;
    }
}

@media only screen and (max-width: 680px) {
    .section-body, .social-list {
        font-size: 15px!important;
    }
    .text-logo {
        font-size: 1.6em;
    }
    .lang-switch-wrapper {
        position: absolute;
        top: 20px;
        right: 20px;
    }
}

@media only screen and (max-width: 560px) {
    .section {
        padding: 4em 1em;
        min-height: calc(100vh - 11em);
    }
    .section-body {
        width: auto;
    }
    .graphic-logo {
        max-height: 200px;
        padding-bottom: 0;
        max-width: 100%;
    }
    .section-body, .social-list {
        font-size: 14px!important;
    }
}

#particles-js {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
}

#particles-js .particles-js-canvas-el {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-animation: appear 1.4s 1;
    animation: appear 1.4s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


p a {
    background: rgb(224,224,216);
    background: linear-gradient(0deg, rgba(224,224,216,1) 0%, rgba(224,224,216,1) 35%, rgba(224,224,216,0) 35%);
    text-decoration: none;
    pointer-events: all;
    padding-right: 0.1em;
    padding-left: 0.1em;
}

p a:hover {
    color: #fff;
    background: #b5afa3;
}

.social-list i {
    font-size: 1.4em;
}

.social-list a {
        width: 3.5em;
}

iframe {
    pointer-events: all;
}
/* Shared visual system extracted from the live CMP page. */
body, input, button, textarea { font-family: 'Montserrat', sans-serif; color: #434b56; font-size: 17px; letter-spacing: 0; font-weight: 400; }
body { background: #fff; }
a { color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; font-weight: 700; }
h1 { font-size: 2.3529411765em; }
.section-body { max-width: 640px; }
.intro, .section-body .intro { font-size: 24px; color: #a1a191; }
.mainText { text-align: left; }
.graphic-logo { max-width: 150px; }
.logo-wrapper a { display: inline-block; pointer-events: auto; }
.site-content { pointer-events: none; }
.site-content a, .site-content button, .site-content input, .site-content textarea, .site-content select, .site-content iframe, .site-content video, .site-content audio, .site-content summary { pointer-events: auto; }
.mainText, .entry-content { pointer-events: auto; }
#background-wrapper { z-index: 0; }
.section-body, .social-list { position: relative; }
.entry-content { text-align: left; line-height: 1.5; }
.entry-content h2 { font-size: 1.8em; margin-top: 1.5em; }
.entry-content h3 { font-size: 1.4em; margin-top: 1.5em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content .intro { text-align: center; margin-top: 0; margin-bottom: .5em; }
.entry-content > .mainText:first-of-type p:first-child { margin-top: 1em; }
.home-content { text-align: center; }
.home-content h2.intro { margin-top: 0; margin-bottom: .5em; font-size: 24px; }
.portfolio-page { max-width: 960px; }
.portfolio-page .entry-content { max-width: 100%; }
.portfolio-page .wp-block-image, .portfolio-page .wp-block-gallery { margin: 2em 0; }
.wp-block-image img { display: block; height: auto; }
.wp-block-columns { gap: 2em; }
figure { max-width: 100%; margin-inline: 0; }
figcaption { font-size: .85em; color: #666; }
.fluid-vids { width: 100%; position: relative; aspect-ratio: 16 / 9; }
.fluid-vids iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.entry-content iframe { max-width: 100%; }
.social-list a { pointer-events: auto; }
.social-list svg { width: 1.4em; height: 1.4em; vertical-align: middle; fill: currentColor; }
.social-list a:hover svg { animation: spin 300ms linear; }
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.skip-link:focus { clip-path: none; height: auto; width: auto; top: 1em; left: 1em; z-index: 1000; background: white; padding: .75em 1em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #434b56; outline-offset: 4px; }
.motion-toggle { position: fixed; bottom: 1em; right: 1em; z-index: 101; border: 1px solid #e0e0d8; border-radius: 4px; background: rgba(255,255,255,.9); padding: .5em .7em; font-size: 11px; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
@media (max-width:1024px) { h1 { font-size: 1.8em; } }
@media (max-width:560px) { .entry-content h2 { font-size:1.6em; } .home-content h2.intro { font-size:1.8em; } .portfolio-page { width: auto; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }