/*
Theme Name: Baltic Carpentry 2
Theme URI: https://www.instagram.com/balticcarpentry/
Author: Baltic Carpentry
Description: One-page site for Baltic Carpentry with Home, Gallery and Get in Touch views, a photo gallery and a quote request form. Everything is editable without code: go to Appearance > Baltic Carpentry for a guided start page, or Appearance > Customize > Baltic Carpentry for colors, color schemes, fonts, every heading and paragraph, every photo, section order, your own block sections, gallery layout and the contact form. Gallery photos are managed under Projects.
Version: 2.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baltic-carpentry
*/
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* keep the sticky header below the WordPress toolbar when logged in */
.admin-bar header{top:32px}
@media (max-width:782px){.admin-bar header{top:46px}}
@media (max-width:600px){.admin-bar header{top:0}}
body.bc-static-header header{position:relative;top:0}

/* Default values. The theme replaces these with your Customizer choices. */
:root{
  --bg:#FBFAF8;
  --alt:#F1EEEA;
  --ink:#1F1D1B;
  --muted:#65605A;
  --line:#DDD8D1;
  --wood:#8A5A32;
  --dark:#24211E;
  --on-dark:#F6F3EF;
  --serif:"Bodoni Moda",Didot,"Bodoni 72","Times New Roman",serif;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif;
  --serif-sm:var(--serif);
  --base:17px;
  --hs:1;
  --hw:400;
  --radius:0px;
  --field-radius:0px;
  --hero-ov:.5;
  --banner-ov:.55;
  --hero-pos:50% 50%;
  --banner-pos:50% 25%;
  --tile:260px;
  --tile-ratio:1/1;
  --logo-h:48px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--base);line-height:1.7}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:var(--hw);line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px;margin-inline:auto}
.muted{color:var(--muted)}
.rich p+p{margin-top:16px}
.eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wood);font-weight:600}
.eyebrow + h1,.eyebrow + h2,.eyebrow + .h2{margin-top:14px}
.btn{display:inline-block;padding:15px 30px;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--bg);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.light{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.btn.light:hover{background:transparent;color:var(--on-dark)}
.btn.sm{padding:10px 18px;font-size:.72rem;letter-spacing:.14em}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.bar-right{display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:40px;height:40px;flex:none}
.logo img{display:block;height:var(--logo-h);width:auto;max-width:min(260px,55vw);object-fit:contain}
footer .logo img{height:calc(var(--logo-h) + 8px)}
.logo b{display:block;font-family:var(--serif-sm);font-size:1.45rem;font-weight:500;letter-spacing:.06em;line-height:1}
.logo small{display:block;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:4px}
nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:.95rem;font-weight:500;padding-bottom:4px;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.menu-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}
@media (max-width:760px){
  .bar-right{gap:12px}
  .hdr-cta{order:-1}
  .menu-toggle{display:block}
  nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  nav ul.open{display:flex}
  nav li{border-top:1px solid var(--line)}
  nav a{display:block;padding:16px 0;border:0}
}
@media (max-width:420px){.hdr-cta{display:none}}

/* photos */
.ph{position:relative;margin:0;background:var(--alt) center/cover no-repeat;overflow:hidden;max-width:100%}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph.empty[data-slot]::after{content:"Photo: " attr(data-slot);position:absolute;right:10px;bottom:10px;max-width:calc(100% - 20px);padding:4px 9px;background:rgba(31,29,27,.55);color:#F6F3EF;font-size:.68rem;letter-spacing:.06em;line-height:1.4}

/* hero */
.hero{position:relative;color:var(--on-dark);text-align:center;isolation:isolate}
.hero .ph{position:absolute;inset:0;z-index:-2}
.hero .ph img{object-position:var(--hero-pos)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,16,calc(var(--hero-ov) * .55)),rgba(20,18,16,var(--hero-ov)))}
.hero .inner{padding-block:clamp(110px,16vw,190px)}
.hero.h-compact .inner{padding-block:clamp(64px,9vw,110px)}
.hero.h-tall .inner{padding-block:clamp(150px,22vw,260px)}
.hero.h-full{min-height:calc(100vh - 81px);min-height:calc(100svh - 81px);display:flex;align-items:center}
.hero.h-full .inner{width:100%}
.hero h1{font-size:calc(clamp(2.1rem,6vw,4.4rem) * var(--hs));line-height:1.05}
.hero.caps h1{text-transform:uppercase;letter-spacing:.06em}
.hero .tag{margin-top:18px;font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:600}
.hero .sub{margin:12px auto 0;max-width:34em;font-family:var(--serif-sm);font-style:italic;font-size:clamp(1.15rem,2vw,1.35rem);opacity:.92}
.hero .btn{margin-top:34px}
.hero.left{text-align:left}
.hero.left .sub{margin-left:0}

/* generic sections */
section{padding-block:clamp(64px,9vw,112px)}
.sec-plain{background:var(--bg)}
.sec-tinted,.alt{background:var(--alt)}
.sec-dark{background:var(--dark);color:var(--on-dark)}
.sec-dark .lead,.sec-dark .muted,.sec-dark .card p,.sec-dark .steps p,.sec-dark .points p{color:inherit;opacity:.8}
.sec-dark .steps li,.sec-dark .points div{border-color:rgba(255,255,255,.18)}
.sec-dark .btn{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.sec-dark .btn:hover{background:transparent;color:var(--on-dark)}
.center{text-align:center}
.head{margin-inline:auto}
.h2{font-size:calc(clamp(2rem,4.2vw,3.1rem) * var(--hs))}
.lead{margin-top:18px;color:var(--muted);font-size:1.1rem}
.lead + .rich{margin-top:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split .ph{aspect-ratio:4/5}
.split.flip > .ph{order:2}
.split .text .btn{margin-top:30px}
@media (max-width:820px){.split{grid-template-columns:1fr}.split .ph{aspect-ratio:4/3}.split.flip > .ph{order:0}}

/* services */
.cards{--cols:3;margin-top:52px;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 28px}
.card{flex:0 1 calc((100% - (var(--cols) - 1) * 28px) / var(--cols));min-width:0}
.card .ph{aspect-ratio:4/5}
.card h3{margin-top:20px;font-family:var(--serif-sm);font-size:calc(1.55rem * var(--hs))}
.card p{margin-top:8px;color:var(--muted);font-size:.98rem}
@media (max-width:980px){.card{flex-basis:calc((100% - 28px)/2)}}
@media (max-width:520px){.card{flex-basis:100%}.card .ph{aspect-ratio:4/3}}

/* banner */
.banner{position:relative;color:var(--on-dark);text-align:center;isolation:isolate;padding-block:clamp(90px,12vw,150px)}
.banner .ph{position:absolute;inset:0;z-index:-2}
.banner .ph img{object-position:var(--banner-pos)}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,18,16,var(--banner-ov))}
.banner h2{font-size:calc(clamp(2.4rem,5.5vw,4rem) * var(--hs))}
.banner-text{margin:16px auto 0;max-width:34em;opacity:.9}
.banner .btn{margin-top:28px}

/* steps */
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.steps li{border-top:1px solid var(--line);padding-top:22px}
.steps .n{font-family:var(--serif);font-size:2.6rem;font-weight:400;color:var(--wood);line-height:1}
.steps h3{margin-top:12px;font-family:var(--sans);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.steps p{margin-top:8px;color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr;gap:32px}}

/* why */
.points{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.points:empty{display:none}
.points div{border-top:1px solid var(--line);padding-top:14px}
.points h3{font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.points p{margin-top:6px;color:var(--muted);font-size:.97rem}
@media (max-width:520px){.points{grid-template-columns:1fr}}

/* cta */
.cta{text-align:center}
.cta p{margin:18px auto 0;max-width:34em;opacity:.85}
.cta .btn{margin-top:32px}

/* your block sections */
.bc-blocks > *{margin-block:0}
.bc-blocks > * + *{margin-top:1.4em}
.bc-blocks h1,.bc-blocks h2{font-size:calc(clamp(1.8rem,3.6vw,2.8rem) * var(--hs))}
.bc-blocks h3{font-size:calc(1.5rem * var(--hs))}
.bc-blocks h4,.bc-blocks h5,.bc-blocks h6{font-family:var(--sans);margin:0}
.bc-blocks ul,.bc-blocks ol{padding-left:1.3em}
.bc-blocks .wp-block-button__link{border-radius:var(--radius)}
.bc-blocks.full > .alignfull,.bc-blocks.full > .wp-block-cover{margin-inline:0}
.bc-blocks.full > :not(.alignfull):not(.wp-block-cover){max-width:1180px;margin-inline:auto;padding-inline:16px}
.bc-custom-empty{border:1px dashed var(--line);padding:28px;text-align:center;color:var(--muted)}

/* gallery page */
.page-head{padding-block:clamp(56px,8vw,96px) 0;text-align:center}
.page-head h1{font-size:calc(clamp(2.6rem,6vw,4.4rem) * var(--hs))}
.page-head .intro{margin:14px auto 0;max-width:34em;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:36px}
.chip{background:none;border:0;border-bottom:1px solid transparent;padding:4px 0;font:inherit;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--tile),100%),1fr));gap:14px;margin-top:40px}
.grid-empty{margin-top:40px;text-align:center;color:var(--muted)}
.tile{padding:0;border:0;background:none;cursor:zoom-in;display:block;text-align:left;color:inherit}
.tile .ph{aspect-ratio:var(--tile-ratio);transition:opacity .2s}
.tile:hover .ph{opacity:.88}
.tile span{display:block;margin-top:8px;font-family:var(--serif-sm);font-size:1.1rem;font-weight:400}
.ig{margin-top:48px;text-align:center}
.ig p{color:var(--muted);margin-bottom:18px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(14,13,12,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 60px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(16px,env(safe-area-inset-left,0px))}
.lightbox .ph{width:min(92vw,960px);aspect-ratio:4/3;max-height:72vh;background-color:#141210}
.lightbox .ph img{object-fit:contain}
.lightbox p{color:#F6F3EF;font-family:var(--serif-sm);font-size:1.3rem}
.lb-btn{background:none;border:1px solid rgba(246,243,239,.45);color:#F6F3EF;font:inherit;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:max(16px,env(safe-area-inset-right,0px))}
.lb-nav{display:flex;gap:10px}

/* contact page */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,80px);margin-top:56px;align-items:start}
.details{display:flex;flex-direction:column;gap:22px}
.details .lab{display:block;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.details .v{font-family:var(--serif-sm);font-size:1.35rem;font-weight:400;display:block;overflow-wrap:anywhere}
.details span.v{user-select:all}
.details a.v{text-decoration:none;border-bottom:1px solid var(--line);display:inline-block}
.details .ph{aspect-ratio:4/3;margin-top:8px}
form{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--alt);padding:clamp(22px,4vw,40px);border-radius:var(--field-radius)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.field label i{font-style:normal;color:var(--muted);letter-spacing:.05em;text-transform:none;font-weight:400}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:var(--field-radius)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.note{font-size:.92rem;color:var(--muted)}
.sent{grid-column:1/-1;font-family:var(--serif-sm);font-size:1.4rem;line-height:1.4}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:44px}
.foot{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.foot .social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.foot .social a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot small{color:var(--muted);font-size:.85rem}