/*
Theme Name: Trinity Como
Description: Custom from-scratch theme for Trinity Weddings & Events, structurally modeled on thelakecomoweddingplanner.com. Keeps Trinity's own photos, video and copy.
Author: Trinity Weddings & Events
Version: 1.0
Text Domain: trinity-como
*/

:root{
  --ink:#111111;
  --muted:#8a8a8a;
  --hair:#ececec;
  --bg:#ffffff;
  --serif:"Baskervville", Georgia, serif;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter:6vw;
  --section-y:140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.section.default-page{
	max-width:1140px;
	margin: 0 auto;
	padding-top:190px;
	padding-left:30px;
	padding-right:30px;
	padding-bottom:90px;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0 0 .5em;letter-spacing:.2px;}
h1{font-size:clamp(2rem,4vw,3.2rem);}
h2{font-size:clamp(1.8rem,2.6vw,2.4rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}

#site-header {
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

#site-header.nav-hidden {
  transform: translateY(-100%);
}

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:1em;
}

.btn-link{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-block;
  border:none;
  background:none;
  padding:0;
}
.btn-link:before{content:"( ";}
.btn-link:after{content:" )";}
.btn-link:hover{color:var(--muted);}

.container{max-width:1400px;margin:0 auto;padding:0 var(--gutter);}
.section{padding:var(--section-y) 0;}
.section-tight{padding:70px 0;}

/* header */
#site-header{
  position:absolute;top:0;left:0;right:0;
  z-index:50;
  padding:26px var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;
}
#site-header.is-solid{position:fixed;background:transparent;padding:14px var(--gutter);}

.nav-left{justify-self:start;}
.nav-right{justify-self:end;}
.nav-left ul, .nav-right ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;align-items:center;}
.nav-left a, .nav-right a, .nav-right .social-label{
  font-family:var(--sans);
  font-size:11px;font-weight:400;letter-spacing:.55px;text-transform:uppercase;
  color:#fff;
}
#site-header.is-solid .nav-left a,
#site-header.is-solid .nav-right a,
#site-header.is-solid .nav-right .social-label{color:var(--ink);}
.nav-left a:hover, .nav-right a:hover{opacity:.6;}

.site-logo{justify-self:center;font-family:var(--serif);font-size:20px;letter-spacing:1px;color:var(--ink);display:flex;align-items:center;opacity:.55;transition:opacity .4s ease, max-height .25s ease;}
.site-logo img{max-height:150px;width:auto;transition:max-height .25s ease, filter .3s ease;filter:brightness(0) invert(1);}
#site-header.is-solid .site-logo{opacity:.55;}
#site-header.is-solid{padding-top:22px;padding-bottom:22px;}
#site-header.is-solid .site-logo img{max-height:140px;filter:none;}
#site-header.is-solid.logo-hidden .site-logo{opacity:0;pointer-events:none;}
.nav-left, .nav-right{transition:opacity .4s ease;}
#site-header.nav-hidden .nav-left, #site-header.nav-hidden .nav-right{opacity:0;pointer-events:none;}

@media (max-width:600px){
  .site-logo img{max-height:66px;}
  #site-header.is-solid .site-logo img{max-height:62px;}
}

.nav-toggle{display:none;}

@media (max-width:900px){
  #site-header{display:flex;justify-content:space-between;}
  .nav-left, .nav-right{display:none;}
  #site-header.is-open .nav-left, #site-header.is-open .nav-right{
    display:flex;background:#fff;flex-direction:column;align-items:center;z-index:55;justify-self:unset;position:fixed;left:0;right:0;
  }
  #site-header.is-open .nav-left{top:0;bottom:50%;justify-content:flex-end;padding-bottom:14px;}
  #site-header.is-open .nav-right{top:50%;bottom:0;justify-content:flex-start;padding-top:14px;}
  #site-header.is-open .nav-left ul, #site-header.is-open .nav-right ul{flex-direction:column;text-align:center;gap:26px;}
  #site-header.is-open .nav-left a, #site-header.is-open .nav-right a, #site-header.is-open .nav-right .social-label{color:var(--ink) !important;font-size:13px;}
  .nav-toggle{display:block;background:none;border:none;font-size:24px;color:#fff;cursor:pointer;z-index:60;}
  #site-header.is-solid .nav-toggle{color:var(--ink);}
}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero video, .hero img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero:before{content:"";position:absolute;inset:0;background:#000;opacity:.35;z-index:1;}
.hero-credit{position:absolute;right:18px;bottom:16px;z-index:2;font-family:var(--sans);font-size:10px;letter-spacing:.4px;color:rgba(255,255,255,.55);pointer-events:none;}
.hero-inner{position:relative;z-index:2;color:#fff;padding:0 var(--gutter) 90px;}
.hero-inner h1{color:#fff;text-transform:lowercase;font-style:italic;max-width:820px;}
.hero-inner h1 .cap{text-transform:none;}

/* two column / image-text */
.split{display:flex;gap:60px;align-items:center;}
.split > div{flex:1;min-width:0;}
@media (max-width:900px){.split{flex-direction:column;}}

#about-section{padding-top:330px;}
#about-section .split{align-items:flex-start;}
#about-section .container{padding-left:calc(var(--gutter) + 130px);}
#about-section .split > div:first-child img{max-width:88%;margin-left:-90px;}
@media (min-width:901px){
  #about-section .split > div:first-child img{max-width:150%;width:150%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:top;margin-left:-160px;}
}
@media (max-width:900px){
  #about-section{padding-top:140px;}
  #about-section .split{align-items:stretch;}
  #about-section .container{padding-left:var(--gutter);}
  #about-section .split > div:first-child img{max-width:100%;width:100%;aspect-ratio:unset;height:auto;object-fit:unset;object-position:unset;margin-left:0;}
}

.split-photos{display:flex;gap:20px;}
.split-photos img{flex:1;}

/* team / grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.grid .card{border-left:1px solid var(--hair);padding:0 34px;}
.grid .card:first-child{border-left:none;}
.grid .card img{margin-bottom:24px;filter:grayscale(35%);width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;}
.grid .card h3{font-style:italic;margin-bottom:.2em;}
.grid .card .role{font-family:var(--sans);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:1em;}
.grid .card p strong{font-weight:700;color:var(--ink);}
@media (max-width:900px){
  .grid{grid-template-columns:1fr;}
  .grid .card{border-left:none;border-top:1px solid var(--hair);padding:34px 0 0;margin-top:34px;}
  .grid .card:first-child{border-top:none;padding-top:0;margin-top:0;}
}

/* services list */
.service-row{display:flex;gap:60px;border-top:1px solid var(--hair);padding:70px 0;}
.service-row:first-of-type{border-top:none;}
.service-row .service-name{flex:0 0 260px;}
.service-row .service-name h3{font-style:italic;}
.service-row .service-body{flex:1;}
.service-row .service-photos{display:flex;gap:16px;margin-top:24px;}
.service-row .service-photos img{flex:1;}
@media (max-width:900px){
  .service-row{flex-direction:column;gap:24px;}
  .service-row .service-name{flex:none;}
}

/* quote */
.quote{text-align:center;max-width:780px;margin:0 auto;font-style:italic;font-size:1.4rem;}

/* footer */
#site-footer{border-top:1px solid var(--hair);padding:70px var(--gutter) 40px;font-family:var(--sans);font-size:12px;color:var(--muted);}
#site-footer .footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:40px;}
#site-footer a:hover{color:var(--ink);}
#site-footer .footer-bottom{border-top:1px solid var(--hair);padding-top:20px;letter-spacing:.5px;text-transform:uppercase;font-size:10px;}

#site-footer .footer-top{flex-direction:column;align-items:center;text-align:center;gap:22px;padding:10px 0 20px;}
#site-footer .footer-logo{font-family:var(--serif);font-size:20px;letter-spacing:1px;color:var(--ink);}
#site-footer .footer-logo img{max-height:80px;width:auto;}
#site-footer .footer-contact{text-align:center;}
#site-footer .footer-contact p{margin:0 0 8px;}
#site-footer .footer-contact-eyebrow{display:block;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--muted);margin-bottom:16px;}
#site-footer .footer-contact-name{font-family:var(--serif);font-size:28px;color:var(--ink);letter-spacing:.5px;margin-bottom:6px;}
#site-footer .footer-contact-role{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--muted);margin-bottom:18px;}
#site-footer .footer-contact-line{font-size:15px;}
#site-footer .footer-contact-line a{color:var(--ink);text-decoration:none;}
#site-footer .footer-contact-line a:hover{color:var(--muted);}
#site-footer .footer-privacy{margin-left:12px;}
#site-footer .footer-privacy a{color:var(--muted);text-decoration:none;}
#site-footer .footer-privacy a:hover{color:var(--ink);}

@media (max-width:600px){
  #site-footer .footer-contact-name{font-size:22px;}
}

.center{text-align:center;}
.mt-0{margin-top:0;}

/* consultation form (WPForms) */
.consult-form-wrap .wpforms-container{margin:0;}
.consult-form-wrap .wpforms-form{background:#fff;color:var(--ink);}
.consult-form-wrap .wpforms-field{padding:0 0 22px;}
.consult-form-wrap .wpforms-field-label{
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6em;
}
.consult-form-wrap .wpforms-field-required{color:var(--ink);}
.consult-form-wrap input[type=text],
.consult-form-wrap input[type=email],
.consult-form-wrap input[type=tel],
.consult-form-wrap select,
.consult-form-wrap textarea{
  font-family:var(--serif);font-size:16px;color:var(--ink);
  background:#fff;border:none;border-bottom:1px solid var(--hair);
  border-radius:0;padding:10px 2px;width:100%;
}
.consult-form-wrap input:focus,
.consult-form-wrap select:focus,
.consult-form-wrap textarea:focus{outline:none;border-bottom-color:var(--ink);}
.consult-form-wrap .wpforms-field-name .wpforms-field-row{display:flex;gap:24px;}
.consult-form-wrap .wpforms-field-radio ul, .consult-form-wrap .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0;}
.consult-form-wrap .wpforms-field-radio li, .consult-form-wrap .wpforms-field-checkbox li{
  font-family:var(--serif);font-size:15px;margin-bottom:8px;
}
.consult-form-wrap .wpforms-field-checkbox li{font-family:var(--sans);font-size:12px;letter-spacing:.3px;line-height:1.6;}
.consult-form-wrap .wpforms-submit-container{margin-top:10px;}
.consult-form-wrap button[type=submit]{
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:2px;
  text-transform:uppercase;color:#fff;background:var(--ink);border:none;border-radius:0;
  padding:16px 40px;cursor:pointer;
}
.consult-form-wrap button[type=submit]:hover{background:var(--muted);}
@media (max-width:600px){
  .consult-form-wrap .wpforms-field-name .wpforms-field-row{flex-direction:column;gap:0;}
}


/* social media */
.social-grid{display:flex;gap:24px;justify-content:center;max-width:640px;margin:40px auto 0;}
.social-col{
  flex:1;
  min-width:0;
  text-align:center;
}
.social-icon{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  margin-bottom:.6em;
}
.social-col .sbi_header, .social-col .tik-header{display:none;}
.social-handle{
  display:inline-block;
  margin-top:1em;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.social-handle:hover{color:var(--ink);}
@media (max-width:600px){
  .social-grid{flex-direction:column;}
}

/* make TikTok + Instagram feed thumbnails uniform small squares */
.social-col .sbtt-tiktok-feed .sb-grid-wrapper{
  grid-template-columns:repeat(4,1fr) !important;
  gap:6px !important;
}
.social-col .sbtt-tiktok-feed .sb-grid-wrapper > *{
  min-width:0;
}
.social-col .sbtt-tiktok-feed .sb-post-item-image-wrap{
  aspect-ratio:1/1 !important;
  height:auto !important;
  width:100% !important;
}
.social-col .sbtt-tiktok-feed .sb-post-item-image-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.social-col .sbi_col_4{grid-template-columns:repeat(4,1fr);}
.social-col .sbi_item{aspect-ratio:1/1 !important;}

/* process / etapy wspolpracy */
.timeline{position:relative;max-width:980px;margin:0 auto;padding:21px 0;}
.timeline:before{content:"";position:absolute;top:21px;bottom:21px;left:50%;width:1px;background:var(--hair);transform:translateX(-50%);}
.timeline-item{position:relative;display:grid;grid-template-columns:1fr 60px 1fr;column-gap:32px;align-items:start;margin-bottom:64px;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-marker{grid-column:2;justify-self:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--ink);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:12px;letter-spacing:.5px;position:relative;z-index:2;animation:markerPulse 3.5s ease-in-out infinite;}
@keyframes markerPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,.10); }
  50% { box-shadow: 0 0 0 9px rgba(17,17,17,0); }
}
.timeline-item:nth-child(2) .timeline-marker{animation-delay:.6s;}
.timeline-item:nth-child(3) .timeline-marker{animation-delay:1.2s;}
.timeline-item:nth-child(4) .timeline-marker{animation-delay:1.8s;}
.timeline-item:nth-child(5) .timeline-marker{animation-delay:2.4s;}
.timeline-item:nth-child(6) .timeline-marker{animation-delay:3s;}
.timeline-side{padding-top:2px;}
.timeline-side.left{grid-column:1;text-align:right;}
.timeline-side.right{grid-column:3;text-align:left;}
.timeline-side h3{font-style:italic;margin-bottom:.4em;}
.timeline-side p{color:var(--ink);margin:0;}

@media (max-width:900px){
  .timeline{padding:0;}
  .timeline:before{left:20px;top:0;bottom:0;}
  .timeline-item{grid-template-columns:40px 1fr;column-gap:20px;margin-bottom:44px;}
  .timeline-marker{grid-column:1;width:36px;height:36px;font-size:11px;}
  .timeline-side.left, .timeline-side.right{grid-column:2;text-align:left;}
  .timeline-side.left:empty, .timeline-side.right:empty{display:none;}
}