/*
Theme Name: Meg and John
Author: ANTNNA
Author URI: http://antnna.com
Description: Tema customizado para o casamento dos pombinhos.
Tags: art, minimalist, black and white
Version: 2025
Requires at least: 5.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
*/

/******00) REGRAS GERAIS ******/
body {background-color: #4F204D; font-weight: normal; overscroll-behavior: none; overflow-x: hidden;}
* {margin: 0; padding: 0; box-sizing: border-box; position: relative; text-decoration: none; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; letter-spacing: -0.02em; color: #FFEDED; font-family: helvetica, arial, sans-serif;}
div {display: block;}
::-webkit-scrollbar {display: none;}
::selection {background-color: #FFEDED; color:#FF6262;}
ul, li, figure {list-style:none; margin: 0; padding: 0;}
img {max-width: 100%;;}
a, span {display: block;}
p {text-decoration:none; margin:0; padding:0; font-size: 15px; line-height: 1.3; font-weight: 400; padding: 8px 0; max-width: 480px;}
p strong {font-weight: 600;}
a, span, li {display: block; line-height: 1; font-weight: 500; list-style: none; text-decoration: none;}
a {font-weight: bold;}
a:hover {transition: all ease .3s;}
p > a {display: initial; text-decoration: underline;}
p > a:hover {color: #FF6262; transition: .3s all ease;}
a, path {transition: all 0.15s linear;}
h1, h2 , h3 , h4 , h5 , h6 {font-weight: bold; padding-bottom: 8px;}
h1 {padding-bottom: 24px;}
select::-ms-expand {display: none;}
hr {border: 1px solid #FFEDED; margin: 24px 0; max-width: 480px;}
:root {scroll-padding-top: 120px;}

/* pre-sets */
.container {width: 100vw; max-width: 1920px; margin: 0 auto; position: relative; padding: 30px;}
.d-flex {display: flex;}
.j-sa {justify-content: space-around;}
.j-sb {justify-content: space-between;}
.d-table {display: table;}
.a-base {align-items: baseline;}
.ovflow {overflow-x: scroll; overflow-y: hidden; flex-wrap: nowrap;}
.ovflow::-webkit-scrollbar {display: none;}
.vh {height: 100vh; height: 100dvh; padding: 0; min-height: 520px;}
.vw {width: 100vw; width: 100dvw; padding: 0;}
.ph {height: 100%;}
.pw {width: 100%;}
.ov-hid {overflow: hidden;}
.txt-c {text-align: center;}
.txt-r {text-align: right;}
.p-fix {position: fixed;}
.p-abs {position: absolute;}
.p-stk {position: sticky; top: 0;}
.btn {padding: 6px 12px; border: 1px solid #FFEDED; width: fit-content; display: block; margin-bottom: 36px;}
.btn img {margin-left: 36px;}
.btn::after {content: ''; height: 100%; width: 1px; background-color: #FFEDED; position: absolute; right: 48px; top: 0;}
.btn, .btn * {cursor: pointer !important;}
.btn:hover {background-color: #FF6262;}
.close-btn {cursor: pointer; width: 24px; height: 24px; position: relative;}
.close-btn div {transform: rotate(45deg); width: 28px; position: absolute; height: 1px; top: 10px; background-color: #4F204D; transition: all ease 0.3s;}
.close-btn div:last-child {transform: rotate(-45deg);}
.close-btn:hover div {transform: rotate(135deg);}
.close-btn:hover div:last-child {transform: rotate(45deg);}

/* padrões de posicionamento */
.c-holder {position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto;}
.v-holder {position: absolute; top: 50%; transform: translateY(-50%);}
.m-holder {margin: 0 auto; left: 0; right: 0;}
.cov-holder {position: relative;}
.cov-holder img {position: absolute; left: 0; top:0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: 50% 50%;}
.r0 {right: 0;}
.l0 {left: 0;}
.b0 {bottom: 0;}
.t0 {top: 0;}
.zdex1 {z-index: 1;}
.zdex3 {z-index: 3;}
.zdex6 {z-index: 6;}
.zdex9 {z-index: 9;}
.w50 > div {width: 50%;}

.fig-cover {padding-top: 56.25%; overflow: hidden; height: 0;}
.fig-cover img {left: 0; top: 0; height: 100%; width: 100%; min-height: 100%; min-width: 100%; object-fit: cover; position: absolute;}
.if-holder, .wp-block-embed-youtube > div, .is-type-video.is-provider-spotify > div {overflow: hidden; position: relative; width:100%;}
.if-holder::after , .wp-block-embed-youtube > div::after, .is-type-video.is-provider-spotify > div::after {padding-top: 56.25%; display: block; content: '';}
.if-holder iframe, .wp-block-embed-youtube iframe, .is-type-video.is-provider-spotify iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.vid-bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; background-color: #000; object-fit: cover; overflow: hidden;}


/* padrões de espaçamento */
.padtop1 {padding-top: 1vh;}
.padbot1 {padding-bottom: 1vh;}
.padtop2 {padding-top: 2vh;}
.padbot2 {padding-bottom: 2vh;}
.padtop3 {padding-top: 4vh;}
.padbot3 {padding-bottom: 4vh;}
.padtop4 {padding-top: 6vh;}
.padbot4 {padding-bottom: 6vh;}
.padtop5 {padding-top: 8vh;}
.padbot5 {padding-bottom: 8vh;}
.padtop6 {padding-top: 10vh;}
.padbot6 {padding-bottom: 10vh;}
.padtop7 {padding-top: 12vh;}
.padbot7 {padding-bottom: 12vh;}
.padtop8 {padding-top: 16vh;}
.padbot8 {padding-bottom: 16vh;}
.padtop9 {padding-top: 20vh;}
.padbot9 {padding-bottom: 20vh;}
.padtop10 {padding-top: 24vh;}
.padbot10 {padding-bottom: 24vh;}

/******02) TUDO ******/
.ilustra figure {text-align: center; position: fixed; bottom: 0; right: 50px;}
.ilustra figure img {max-height: 560px;}

.overlay {left: 300vw; opacity: 0; transition: .4s opacity ease; position: fixed;}
.overlay.active {background-color: #FFEDED; z-index: 2; left: 0; top:0; opacity: 1;}
.overlay figure {position: fixed; right: 0; bottom: 0;}
.overlay figure img {max-width: 600px; position: absolute; right: 40px; bottom: 40px;}
.overlay * {color: #4F204D;}
.overlay .close-btn {position: absolute; right: 40px; top: 40px; z-index: 3;} 

.copyright {font-size: 11px;}

form {max-width: 480px;}
form input {background-color: transparent; border: #FFEDED 1px solid; padding: 12px; text-transform: uppercase; color: #FFEDED; width: 100%; margin: 6px 0; outline: none;}
form input::placeholder {color: #FFEDED; opacity: 0.7;}
form input::focus {outline: none;}
form textarea {background-color: transparent; border: #FFEDED 1px solid; padding: 8px; height: 120px; width: 100%; color: #FFEDED; text-transform: uppercase; margin: 4px 0;  outline: none; font-size: 14px;}
form textarea::placeholder {color: #FFEDED; opacity: 0.7;}
form button {font-weight: bold; background-color: #FFEDED; border-radius: 0; border: none; color: #4F204D; padding: 8px 12px 6px; margin-top: 6px; cursor: pointer; transition: 0.3s all ease; width: fit-content; text-transform: uppercase;}
form button:hover {color: #FFEDED; background-color: #FF6262;}
form fieldset {border: none; padding: 12px 0 16px;}
form fieldset input {width: fit-content;}
form fieldset label {line-height: 1; top: 6px; margin-left: 8px;}

.post-password-form {height: 100vh; height: 100dvh; width: 100%; background-color: #FFF9EA; z-index: 10; position: fixed;}
.post-password-form > p:first-child {display: none;}
.post-password-form > p {max-width: 540px; padding: 30px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%);}
.post-password-form > p input {padding: 8px 12px; font-size: 16px; border: 1px solid #000; background-color: transparent; border-radius: 80px;}
.post-password-form > p input[type="submit"] {text-transform: uppercase; cursor: pointer; transition: 0.2s all ease; font-weight: bold;}
.post-password-form > p input[type="submit"]:hover {background-color: #000; color: #FFF9EA;}

@keyframes hbt {0%, 100% {transform: scale(1);} 50% {transform: scale(1.2);}}


/******99) RESPONSIVOS ******/

@media screen and (max-height: 700px) {
.ilustra figure {text-align: center; position: sticky; top:20px}
.ilustra figure img {max-height: 520px;}
}

@media screen and (min-width: 1921px) {
}

@media screen and (min-width: 1481px) {
.no-desk0 {display: none;}
}

@media screen and (min-width: 1081px) {
.no-desk1 {display: none;}
}

@media screen and (min-width: 769px) {
.no-desk2 {display: none;}
}

@media screen and (min-width: 481px) {
.no-desk3 {display: none;}
}

@media screen and (max-width: 1080px) {
.no-mob1 {display: none !important;}
}

@media screen and (max-width: 768px) {
.no-mob2 {display: none !important;}
.container {padding: 12px;}
.d-flex {flex-direction: column;}
.w50 > div {width: 100%;}
.ilustra figure {text-align: center; position: relative; right: 0;}
.ilustra figure img {max-height: 100%;}
form input {font-size: 13px;}
form input::placeholder {font-size: 13px;}
form .d-flex {flex-direction: initial;}
form label {font-size: 14px;}
.overlay .close-btn {right: 12px; top: 12px; overflow-y: scroll;}
.overlay figure {position: relative;}
.overlay figure img {max-width: 100%; position: relative; right: 0; bottom: 0;}
h1 {font-size: 24px;}
h2 {font-size: 20px;}
p {font-size: 14px;}
.post-password-form > p , .post-password-form > p label {display: flex; flex-direction: column;}
.post-password-form > p * {width: 100%; width: 100%;}
.post-password-form > p label {text-align: center;}
.post-password-form > p input {margin-top: 12px;}
.copyright {width: 100%; text-align: center;}
}

@media screen and (max-width: 480px) {
.no-mob3 {display: none !important;}
}