/*
Theme Name: The Lions Dem (Block Theme)
Description: One-page reggae backing band theme for the WordPress Site Editor. Every section is made of normal blocks, so it works with the block editor and Spectra.
Version: 1.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: lionsdem
*/

:root{--ld-red:var(--wp--preset--color--red);--ld-gold:var(--wp--preset--color--gold);--ld-green:var(--wp--preset--color--green);
  --ld-paper:var(--wp--preset--color--paper);--ld-ink:var(--wp--preset--color--ink);
  --ld-cond:var(--wp--preset--font-family--condensed);--ld-display:var(--wp--preset--font-family--display);
  --ld-tri:linear-gradient(90deg,#d9302a,#e9a919 50%,#2f9e2f);--ld-tri-v:linear-gradient(180deg,#d9302a,#e9a919 50%,#2f9e2f)}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.09'/></svg>")}
:where(a:focus-visible,button:focus-visible){outline:3px solid var(--ld-gold);outline-offset:3px}
.ld-wrap{width:min(1200px,92%);margin-inline:auto}

/* Header */
.ld-header{position:sticky;top:0;z-index:50;background:rgba(12,11,9,.96);border-bottom:3px solid;border-image:var(--ld-tri) 1}
.admin-bar .ld-header{top:32px}
.ld-header__inner{display:flex;align-items:center;gap:2rem;padding:.9rem 0}
.ld-logo{font-family:var(--ld-display);font-size:3rem;line-height:1;margin:0;white-space:nowrap}
.ld-logo a{text-decoration:none}
.ld-nav{margin-left:auto;font-family:var(--ld-cond);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;gap:1.8rem}
.ld-nav .wp-block-navigation-item__content{padding:.4rem 0;border-bottom:3px solid transparent}
.ld-nav .wp-block-navigation-item__content:hover{border-image:var(--ld-tri) 1;color:var(--ld-gold)}
.ld-header__slogan{font-family:var(--ld-display);font-size:1.7rem;line-height:1;border-left:2px solid var(--ld-red);padding-left:1.4rem}
.ld-header__slogan p{margin:0}

/* Hero */
.ld-hero{padding:4rem 0 0;overflow:hidden;border-bottom:3px solid;border-image:var(--ld-tri) 1;background:radial-gradient(ellipse at 70% 40%,#1b1712,var(--ld-ink) 70%)}
.ld-hero__grid{display:grid;grid-template-columns:1fr 1.1fr;align-items:end}
.ld-hero__text{padding-bottom:3rem;position:relative;z-index:2}
.ld-hero__title{font-size:clamp(3.4rem,9.2vw,8.2rem);white-space:nowrap}
.ld-hero__box{display:inline-block;margin:1.4rem 0 1.6rem;padding:.55rem 2rem;border:3px solid;border-image:var(--ld-tri) 1;font-family:var(--ld-cond);font-weight:500;font-size:clamp(1.1rem,2.2vw,1.9rem);letter-spacing:.18em}
.ld-hero__tagline{margin:0;max-width:26rem;color:var(--ld-gold);font-family:var(--ld-cond);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:1.05rem}
.ld-hero__media{position:relative;margin-left:-6%}
.ld-hero__media::before{content:"";position:absolute;inset:-10% -10% 0 10%;opacity:.7;
  background:linear-gradient(115deg,transparent 30%,#d9302a 30% 40%,#e9a919 40% 52%,#2f9e2f 52% 64%,transparent 64%)}
.ld-hero__media figure{position:relative;margin:0}
.ld-hero__media img{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 55%,transparent 98%);mask-image:radial-gradient(ellipse at 50% 45%,#000 55%,transparent 98%)}

/* About */
.ld-about{padding:4.5rem 0;border-bottom:3px solid;border-image:var(--ld-tri) 1}
.ld-about__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.ld-about__text{padding-right:3rem;border-right:2px solid transparent;border-image:var(--ld-tri-v) 1}
.ld-about__title{font-size:clamp(2.4rem,4.5vw,3.4rem);color:var(--ld-gold);margin:0 0 1.2rem}
.ld-about__text p{margin:0 0 1.1rem;max-width:34rem}
.ld-about p.ld-about__slogan{font-family:var(--ld-display);font-size:2rem;text-transform:uppercase;margin-top:1.4rem}
.ld-about__media{padding-left:2.5rem}
.ld-about__media .wp-block-embed,.ld-about__media .wp-block-video,.ld-about__media figure{margin:0}
.ld-about__media .wp-block-embed__wrapper{border:3px solid;border-image:var(--ld-tri) 1}
.ld-about__media iframe{display:block;max-width:100%}
.ld-slot{display:grid;place-items:center;text-align:center;min-height:300px;padding:2rem;border:2px dashed rgba(233,169,25,.55);color:var(--ld-gold);font-family:var(--ld-cond);letter-spacing:.06em}
.ld-slot p{margin:0}

/* Services */
.ld-services{padding:3.5rem 0 4rem;border-bottom:3px solid;border-image:var(--ld-tri) 1}
.ld-section-title{display:flex;align-items:center;justify-content:center;gap:2rem;text-align:center;font-size:clamp(2rem,4vw,3rem);color:var(--ld-gold);margin:0 0 2.6rem}
.ld-section-title::before,.ld-section-title::after{content:"";height:2px;flex:1;max-width:260px;background:currentColor}
.ld-services__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ld-svc{text-align:center;padding:.5rem 1.6rem;border-right:2px solid currentColor}
.ld-svc:last-child{border-right:0}
.ld-svc--red{color:var(--ld-red)}.ld-svc--gold{color:var(--ld-gold)}.ld-svc--green{color:var(--ld-green)}
.ld-svc__icon{width:84px;height:84px;margin:0 auto 1rem;border:4px solid currentColor;border-radius:50%;display:grid;place-items:center}
.ld-svc__icon::before,.ld-ico::before{content:"";display:block;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ld-svc__icon::before{width:42px;height:42px}
.ld-svc h3{font-size:2rem;margin:0 0 .5rem}
.ld-svc p{margin:0;color:var(--ld-paper)}

/* Extra sections (Music, Gallery, anything added on the Home page) */
.ld-extra:not(:empty),.ld-extra-section{width:min(1200px,92%);margin-inline:auto;padding:3.5rem 0}
.ld-extra>*{max-width:none}

/* Book */
.ld-book{border-top:3px solid;border-image:var(--ld-tri) 1;background:
  linear-gradient(90deg,rgba(12,11,9,.82),rgba(12,11,9,.3) 60%,rgba(12,11,9,.55)),
  radial-gradient(ellipse at 20% 100%,rgba(217,48,42,.5),transparent 55%),
  radial-gradient(ellipse at 55% 110%,rgba(233,169,25,.55),transparent 55%),
  radial-gradient(ellipse at 90% 100%,rgba(47,158,47,.55),transparent 55%),var(--ld-ink);background-size:cover;background-position:center bottom}
.ld-book__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center;gap:2rem;padding:3.5rem 0}
.ld-book__title{font-size:clamp(4rem,8vw,6.2rem);color:var(--ld-gold);margin:0}
.ld-book p.ld-book__sub{font-family:var(--ld-display);font-size:clamp(2.4rem,5vw,4rem);line-height:1;margin:.1rem 0 1.2rem}
.ld-book p.ld-book__list{font-family:var(--ld-cond);letter-spacing:.05em;margin:0}
.ld-contact{border-left:2px solid transparent;border-right:2px solid transparent;border-image:var(--ld-tri-v) 1;padding:.4rem 1.8rem}
.ld-contact h3{font-size:1.8rem;color:var(--ld-gold);margin:0 0 1rem}
.ld-ico{display:flex;align-items:center;gap:.9rem;margin:0 0 .9rem}
.ld-ico::before{width:26px;height:26px;flex:none;background:var(--ld-red)}
.ld-ico--phone::before{background:var(--ld-gold)}
.ld-ico a{text-decoration:none}.ld-ico a:hover{color:var(--ld-gold)}
.ld-slogan-wrap{display:grid;justify-items:center}
.ld-book p.ld-slogan{font-family:var(--ld-display);font-style:italic;font-size:clamp(1.8rem,3vw,2.4rem);text-transform:uppercase;line-height:1.05;transform:rotate(-6deg);padding:1.1rem 1rem;position:relative;max-width:16rem;margin:0}
.ld-slogan::before,.ld-slogan::after{content:"";position:absolute;left:0;right:0;height:4px}
.ld-slogan::before{top:0;background:linear-gradient(90deg,#d9302a,#e9a919)}
.ld-slogan::after{bottom:0;background:linear-gradient(90deg,#e9a919,#2f9e2f)}

/* Footer */
.ld-footer{display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:1.6rem 4%;border-top:3px solid;border-image:var(--ld-tri) 1;font-family:var(--ld-cond);font-size:.8rem;letter-spacing:.2em}
.ld-footer p{margin:0}
.ld-footer p+p::before{content:"|";margin-right:1.2rem}
.ld-footer::before,.ld-footer::after{content:"";height:3px;width:140px;background:linear-gradient(90deg,#d9302a,#e9a919,#2f9e2f)}

/* Plain pages and posts */
.ld-page{width:min(46rem,92%);margin:4rem auto}
.ld-page .wp-block-post-title{color:var(--ld-gold);font-size:3.5rem;margin-bottom:1.5rem}

/* Responsive */
@media (max-width:1000px){
  .ld-header__slogan{display:none}
  .ld-hero__grid,.ld-about__grid,.ld-book__grid{grid-template-columns:1fr}
  .ld-hero__media{margin:0}
  .ld-about__text{border-right:0;border-image:none;padding:0 0 2rem}
  .ld-about__media{padding:0}
  .ld-services__grid{grid-template-columns:1fr 1fr;gap:2rem 0}
  .ld-svc:nth-child(2){border-right:0}
  .ld-contact{border:0;border-top:2px solid var(--ld-gold);padding:1.4rem 0}
  .ld-footer{flex-direction:column;gap:.8rem;text-align:center}
  .ld-footer p+p::before{content:none}
}
@media (max-width:560px){
  .ld-logo{font-size:2.2rem}
  .ld-services__grid{grid-template-columns:1fr}
  .ld-svc{border-right:0;border-bottom:2px solid currentColor;padding-bottom:1.8rem}
  .ld-svc:last-child{border-bottom:0}
  .ld-section-title::before,.ld-section-title::after{display:none}
}

/* Icons (drawn with CSS so they follow the text colour) */
.ld-icon-music::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E")}
.ld-icon-users::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.ld-icon-bus::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6M15 6v6M2 12h19.6M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6M15 6v6M2 12h19.6M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E")}
.ld-icon-hand::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3M3 4h8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3M3 4h8'/%3E%3C/svg%3E")}
.ld-ico--mail::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}
.ld-ico--phone::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.ld-ico--pin::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}