/*
Theme Name: Compton's Shoe Repairing
Theme URI: https://designedbythomas.com
Author: DesignedByThomas
Author URI: https://designedbythomas.com
Description: Custom theme for Compton's Shoe Repairing, Burbank, CA. Header, footer, styling and animations live in the theme; page content is editable in the block editor.
Version: 1.0.0
Text Domain: comptons
*/
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/LibreBaskerville-italic-400.woff2) format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/LibreBaskerville-normal-400.woff2) format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/LibreBaskerville-normal-700.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Oswald-normal-500.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Oswald-normal-600.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Oswald-normal-700.woff2) format('woff2')}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/SpecialElite-normal-400.woff2) format('woff2')}

:root{
  --red:#b3222b; --red-d:#8f1a22; --cream:#f4ecdd; --paper:#fbf6ea; --leather:#4a2f1d; --leather-d:#2b1a0f;
  --ink:#201915; --brass:#b88a3b; --line:#d9ccb2;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:'Oswald','Arial Narrow',Impact,sans-serif; --serif:'Libre Baskerville',Georgia,serif; --type:'Special Elite','Courier New',monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;overflow-x:clip}
body{margin:0;font-family:var(--serif);color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px;overflow-x:clip;
  background-image:radial-gradient(rgba(74,47,29,.05) 1px,transparent 1.4px);background-size:7px 7px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
:where(.cmp-main) :where(h1,h2,h3,h4,p,figure,blockquote,ol,ul){margin:0}
.wp-block-group__inner-container{display:contents}
.cmp-main .wp-block-image{margin:0}

/* buttons (core/button) */
.wp-block-buttons.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.wp-block-button.btn .wp-block-button__link,.btn-link{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px;line-height:1.4;
  padding:.85em 1.5em;border:2px solid var(--red);background:var(--red);color:#fff;text-decoration:none;border-radius:2px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s}
.wp-block-button.btn .wp-block-button__link:hover{background:var(--red-d);border-color:var(--red-d);transform:translateY(-2px);box-shadow:0 6px 0 rgba(43,26,15,.18)}
.wp-block-button.btn .wp-block-button__link:active{transform:none;box-shadow:none}
.wp-block-button.btn.ghost .wp-block-button__link{background:transparent;color:var(--leather);border-color:var(--leather)}
.wp-block-button.btn.ghost .wp-block-button__link:hover{background:var(--leather);color:var(--cream);border-color:var(--leather)}

/* header */
header.bar{position:sticky;top:0;z-index:50;background:rgba(43,26,15,.96);color:var(--cream);backdrop-filter:blur(4px);border-bottom:3px solid var(--red);transition:box-shadow .3s}
.admin-bar header.bar{top:32px}
@media(max-width:782px){.admin-bar header.bar{top:46px}}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;transition:height .3s var(--ease)}
header.bar.small .wrap{height:56px}
header.bar.small{box-shadow:0 6px 20px rgba(0,0,0,.25)}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--display);font-size:26px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.brand b i{color:#ff6b6b;font-style:normal}
.brand span{font-family:var(--type);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-top:3px}
nav.main ul{display:flex;gap:30px;list-style:none;align-items:center;margin:0;padding:0}
nav.main a{font-family:var(--display);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:15px;text-decoration:none;position:relative;padding:6px 0;color:var(--cream)}
nav.main li:not(.cta) a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
nav.main li:not(.cta) a:hover::after{transform:scaleX(1)}
nav.main .cta a{background:var(--red);padding:9px 16px;border-radius:2px;color:#fff;transition:background .2s,transform .2s}
nav.main .cta a:hover{background:#d12d37;transform:translateY(-1px)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative;color:#fff}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s,top .3s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* kickers + headings */
.kicker{font-family:var(--type);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--red);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:38px;height:2px;background:var(--red);flex:none}
.cmp-main h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,6.6vw,86px);line-height:.98;letter-spacing:.01em;color:var(--leather-d);margin:18px 0 22px}
.cmp-main h1 strong{font-weight:700;color:var(--red);display:inline-block;padding-bottom:16px;position:relative;white-space:nowrap}
.cmp-main h1 strong::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 40 2 80 8 T 160 8 T 240 8 T 298 7' stroke='%23b3222b' stroke-width='4' fill='none' stroke-dasharray='10 7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.lead{font-size:19px;max-width:34em;color:#3b2e25}

/* intro */
.intro{padding:64px 0 40px;position:relative}
.intro .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.status{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--type);font-size:15px;color:var(--leather)}
.status::before{content:"";width:11px;height:11px;border-radius:50%;background:#999;position:relative;flex:none}
.status.open::before{background:#2f8f4e;animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,143,78,.55)}100%{box-shadow:0 0 0 12px rgba(47,143,78,0)}}
.ticket{position:relative;background:var(--paper);padding:16px 16px 18px;box-shadow:0 18px 40px rgba(43,26,15,.22),0 2px 0 var(--line);transform:rotate(1.6deg);border-radius:3px}
.ticket::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(179,34,43,.55);border-radius:2px;pointer-events:none;z-index:1}
.ticket .wp-block-image{overflow:hidden;border-radius:2px;aspect-ratio:4/3.4;background:var(--line)}
.ticket .wp-block-image img{width:100%;height:100%;object-fit:cover;object-position:18% 30%;transition:transform 1.2s var(--ease)}
.ticket:hover .wp-block-image img{transform:scale(1.04)}
.ticket-cap{display:flex;justify-content:space-between;align-items:center;font-family:var(--type);font-size:14px;padding:14px 8px 2px;color:var(--leather)}
.ticket-cap b{font-family:var(--display);letter-spacing:.12em;font-size:15px;color:var(--red);font-weight:600}
.stamp{position:absolute;right:22px;top:-26px;transform:rotate(12deg);border:3px solid var(--red);color:var(--red);font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  padding:10px 16px;font-size:15px;line-height:1.15;text-align:center;background:rgba(251,246,234,.92);border-radius:4px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--red);z-index:2}
.stamp small{display:block;font-family:var(--type);font-size:11px;letter-spacing:.1em;font-weight:400}

/* stitch divider (core/separator) */
hr.wp-block-separator.stitch{display:block;width:100%;height:30px;margin:0;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cpath d='M0 15 Q 12 3 24 15 T 48 15' stroke='%23b3222b' stroke-width='3' fill='none' stroke-linecap='round' stroke-dasharray='14 10'/%3E%3C/svg%3E") repeat-x 0 0/48px 30px;opacity:.9}

section.cmp-sec{padding:84px 0}
.sec-h{max-width:640px;margin-bottom:44px}
.cmp-main .sec-h h2,.cmp-main h2.sec-title{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:clamp(34px,4.6vw,56px);line-height:1.02;color:var(--leather-d);margin-top:12px}
.sec-h p:not(.kicker){margin-top:14px;color:#4b3d33}

/* services */
.svc{background:var(--leather-d);color:var(--cream);position:relative}
.svc::before,.svc::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,var(--cream) 0 14px,transparent 14px 28px);opacity:.14}
.svc::before{top:10px}.svc::after{bottom:10px}
.svc .sec-h h2{color:#fff}.svc .kicker{color:#ff7a7a}.svc .kicker::before{background:#ff7a7a}.svc .sec-h p:not(.kicker){color:#d9c9b2}
.svc .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.rows{border-top:1px solid rgba(244,236,221,.2)}
.row{display:grid;grid-template-columns:70px 1fr;gap:6px 18px;padding:22px 8px;border-bottom:1px solid rgba(244,236,221,.2);transition:background .3s var(--ease),padding-left .3s var(--ease)}
.row:hover{background:rgba(244,236,221,.06);padding-left:18px}
.row .no{font-family:var(--type);font-size:30px;color:var(--brass);grid-row:span 2;line-height:1.1;transition:transform .35s var(--ease)}
.row:hover .no{transform:rotate(-8deg) scale(1.08)}
.row h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:24px;color:#fff;line-height:1.3}
.row p:not(.no){color:#d9c9b2;font-size:16px}
.svc-aside{position:sticky;top:96px}
.svc-aside .wp-block-image.pic{border:8px solid var(--paper);box-shadow:0 20px 40px rgba(0,0,0,.4);transform:rotate(-2deg);overflow:hidden;background:var(--paper)}
.svc-aside .pic img{width:100%;aspect-ratio:4/4.4;object-fit:cover}
.svc-aside .aside-cap{font-family:var(--type);margin-top:22px;font-size:15px;color:#d9c9b2;text-align:center}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.grid .wp-block-image{position:relative;overflow:hidden;background:var(--paper);box-shadow:0 8px 20px rgba(43,26,15,.18);border-radius:2px;cursor:zoom-in}
.grid .wp-block-image:nth-child(1){grid-column:span 4;aspect-ratio:16/9}
.grid .wp-block-image:nth-child(2){grid-column:span 2;aspect-ratio:3/4}
.grid .wp-block-image:nth-child(3){grid-column:span 3;aspect-ratio:4/3.4}
.grid .wp-block-image:nth-child(4){grid-column:span 3;aspect-ratio:4/3.4}
.grid .wp-block-image:nth-child(5){grid-column:span 6;aspect-ratio:21/8}
.grid .wp-block-image img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.grid .wp-block-image::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--ease);pointer-events:none}
.grid .wp-block-image:hover img{transform:scale(1.06)}
.grid .wp-block-image:hover::after{transform:translateX(120%)}
.grid figcaption{position:absolute;left:0;bottom:0;right:0;margin:0;padding:26px 14px 10px;background:linear-gradient(transparent,rgba(32,25,21,.78));color:#fff;font-family:var(--type);font-size:14px;text-align:left}
.note{margin-top:20px!important;font-family:var(--type);font-size:14px;color:#6b5a4d}

/* pop images (replay every scroll-in) */
.js .pop{opacity:0;transform:translateY(46px) scale(.9) rotate(-1.5deg);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .pop.in{opacity:1;transform:none}
.js .ticket.pop{transform:translateY(46px) scale(.9) rotate(-3deg)}
.js .ticket.pop.in{transform:rotate(1.6deg)}
.js .svc-aside .pic.pop{transform:translateY(46px) scale(.9) rotate(-4deg)}
.js .svc-aside .pic.pop.in{transform:rotate(-2deg)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js .rv.in{opacity:1;transform:none}
.js .stamp{opacity:0}
.js .ticket.in .stamp{animation:thump .55s .5s var(--ease) forwards}
@keyframes thump{0%{opacity:0;transform:rotate(12deg) scale(1.8)}60%{opacity:1;transform:rotate(12deg) scale(.94)}100%{opacity:1;transform:rotate(12deg) scale(1)}}
.js .cmp-main h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);animation:up .7s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + 150ms)}
.js .intro .fade{opacity:0;transform:translateY(18px);animation:up .7s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes up{to{opacity:1;transform:none}}

/* reviews */
.rev{background:var(--paper);border-block:1px solid var(--line)}
.score{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:40px}
.score .big{font-family:var(--display);font-size:78px;font-weight:700;line-height:1;color:var(--red)}
.score .stars{color:var(--brass);font-size:26px;letter-spacing:3px;line-height:1}
.score .small{font-family:var(--type);font-size:14px;color:#6b5a4d;margin-top:6px!important}
.slips{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.slips .wp-block-quote{margin:0;background:#fff;padding:36px 24px 22px;border:1px solid var(--line);box-shadow:0 10px 24px rgba(43,26,15,.1);position:relative;transition:transform .3s var(--ease),box-shadow .3s}
.slips .wp-block-quote:nth-child(1){transform:rotate(-.8deg)}.slips .wp-block-quote:nth-child(3){transform:rotate(.8deg)}
.js .slips .wp-block-quote.rv:not(.in){transform:translateY(26px)}
.slips .wp-block-quote:hover{transform:translateY(-6px) rotate(0)!important;box-shadow:0 18px 30px rgba(43,26,15,.16)}
.slips .wp-block-quote::before{content:"\201C";position:absolute;top:-8px;left:18px;font-family:var(--display);font-size:80px;line-height:1;color:var(--red);opacity:.85}
.slips .wp-block-quote p{font-style:italic;font-size:16.5px}
.slips .wp-block-quote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--type);font-size:14px;color:var(--leather)}
.rev .wp-block-buttons.actions{margin-top:36px}

/* visit */
.visit .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.card{background:var(--paper);border:1px solid var(--line);padding:30px;box-shadow:0 10px 24px rgba(43,26,15,.1);position:relative}
.card::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(179,34,43,.4);pointer-events:none}
.card .sec-h{margin-bottom:22px}
.card .sec-h h2{font-size:clamp(32px,4vw,46px)}
.info{display:grid;gap:18px;margin:6px 0 28px}
.info p{line-height:1.6}
.info strong{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-weight:600;display:block;font-size:14px;color:var(--leather)}
.info a{text-decoration:none;border-bottom:2px solid var(--line);transition:border-color .2s}
.info a:hover{border-color:var(--red)}
.hrs{font-family:var(--type);font-size:16px;margin-bottom:26px}
.hrs .hr{display:flex;justify-content:space-between;gap:12px;padding:9px 6px;border-bottom:1px dashed var(--line)}
.hrs .hr.today{background:rgba(179,34,43,.09);color:var(--red-d);font-weight:700}
.hrs .hr.today p:first-child::after{content:" \2190 today";font-size:12px;letter-spacing:.06em}
.card .wp-block-buttons.actions{margin-top:0}
figure.wp-block-image.map{position:relative;border:8px solid var(--paper);box-shadow:0 14px 30px rgba(43,26,15,.2);overflow:hidden;min-height:420px;height:100%;background:var(--line)}
figure.map a{display:block;position:absolute;inset:0}
figure.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
figure.map:hover img{transform:scale(1.05)}
figure.map::after{content:"Open in Google Maps \2192";position:absolute;left:16px;bottom:16px;background:var(--red);color:#fff;font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:15px;padding:.7em 1.2em;border-radius:2px;pointer-events:none;transition:background .2s}
figure.map:hover::after{background:var(--red-d)}

/* footer */
footer.site-foot{background:var(--leather-d);color:#d9c9b2;padding:56px 0 0}
footer.site-foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-bottom:44px}
footer.site-foot h4{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0 0 10px;font-size:16px}
footer.site-foot p{margin:0}
footer.site-foot a{text-decoration:none;border-bottom:1px solid rgba(217,201,178,.3);transition:color .2s,border-color .2s}
footer.site-foot a:hover{color:#fff;border-color:var(--brass)}
footer.site-foot a.brand{border:0}
footer.site-foot .brand b{font-size:30px}
footer .credit{border-top:1px solid rgba(244,236,221,.14);padding:18px 20px;text-align:center;font-size:14px;color:#cbb99f;font-family:var(--serif)}
footer .credit a{color:#f0d9a8;border-bottom:1px solid rgba(240,217,168,.5)}
footer .credit a:hover{color:#fff}

/* generic pages */
.cmp-page{width:min(820px,100% - 40px);margin:60px auto;min-height:40vh}
.cmp-page h1{font-size:clamp(34px,5vw,56px)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,12,7,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;max-width:min(92vw,1200px);transform:scale(.94);transition:transform .35s var(--ease)}
.lb.open figure{transform:none}
.lb img{max-height:78vh;width:auto;max-width:100%;margin-inline:auto;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:opacity .25s}
.lb figcaption{color:#e9dcc6;font-family:var(--type);text-align:center;margin-top:14px;font-size:15px}
.lb button{position:absolute;background:rgba(244,236,221,.12);color:#fff;border:1px solid rgba(244,236,221,.3);width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;transition:background .2s,transform .2s}
.lb button:hover{background:var(--red);transform:scale(1.08)}
.lb .x{top:18px;right:18px}.lb .pv{left:18px;top:50%}.lb .nx{right:18px;top:50%}

/* responsive */
@media(max-width:960px){
  .intro .wrap,.svc .wrap,.visit .wrap{grid-template-columns:1fr;gap:44px}
  .svc-aside{position:static;max-width:460px;margin-inline:auto}
  .slips{grid-template-columns:1fr}.slips .wp-block-quote:nth-child(n){transform:none}
  footer.site-foot .wrap{grid-template-columns:1fr}
  .ticket{max-width:560px;margin-inline:auto}
}
@media(max-width:820px){
  .burger{display:block}
  nav.main{position:absolute;top:100%;left:0;right:0;background:var(--leather-d);overflow:hidden;max-height:0;transition:max-height .35s var(--ease);border-bottom:3px solid var(--red)}
  nav.main.open{max-height:380px}
  nav.main ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  nav.main li a{display:block;padding:14px 0;border-bottom:1px solid rgba(244,236,221,.12)}
  nav.main .cta a{margin-top:12px;text-align:center}
}
@media(max-width:600px){
  body{font-size:16px}
  section.cmp-sec{padding:60px 0}
  .intro{padding-top:40px}
  .stamp{right:4px;top:-22px;font-size:13px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid .wp-block-image:nth-child(n){grid-column:span 1;aspect-ratio:3/4}
  .grid .wp-block-image:nth-child(1),.grid .wp-block-image:nth-child(5){grid-column:span 2;aspect-ratio:16/10}
  .row{grid-template-columns:48px 1fr}.row .no{font-size:24px}
  .wp-block-buttons.actions,.wp-block-buttons.actions .wp-block-button{width:100%}
  .wp-block-button.btn .wp-block-button__link{width:100%;justify-content:center}
  .card{padding:24px 20px}
  .lb .pv,.lb .nx{top:auto;bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .pop,.js .rv,.js .cmp-main h1 .w,.js .intro .fade,.js .stamp{opacity:1!important;transform:none!important}
  .js .ticket.pop{transform:rotate(1.6deg)!important}
  .js .svc-aside .pic.pop{transform:rotate(-2deg)!important}
  .js .stamp{transform:rotate(12deg)!important}
}