/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ---------- Poppins (self-hosted design font) ---------- */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/poppins-300.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-500.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-600.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/poppins-800.woff2') format('woff2'); }

body, button, input, select, textarea,
#brx-header, #brx-content, #brx-footer{
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Scroll-reveal (frontend only; see inc/projects.php enqueue) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Fixed sticky header: offset content so it doesn't overlap ---------- */
#brx-content{ padding-top: 149px; }
@media (max-width:640px){ #brx-content{ padding-top: 100px; } }
html{ scroll-behavior: smooth; }
#contact{ scroll-margin-top: 149px; }
/* header WP nav menu — green highlight on hover only (not the current page) */
#brx-header .brxe-nav-menu a{ transition:background-color .25s ease, color .25s ease; padding:4px 13px; border-radius:3px; }
#brx-header .brxe-nav-menu a:hover{ background-color:#aef5a0; color:#1d1d1b; }

/* ---------- Logo: animate the mark to brand colours on hover ---------- */
.sm-mark .sm-solid{ transition: fill 1.1s cubic-bezier(.22,.61,.36,1); }
.sm-mark path[stroke="white"]{ transition: stroke 1.1s cubic-bezier(.22,.61,.36,1); }
.sm-mark .sm-hg-a, .sm-mark .sm-hg-b{ transition: stop-color 1.3s cubic-bezier(.22,.61,.36,1); }
.sm-logo:hover .sm-mark .sm-solid{ fill:#aef5a0; }                    /* solid triangle → green */
.sm-logo:hover .sm-mark path[stroke="white"]{ stroke:#aef5a0; }       /* solid-area hatch blends to flat green */
.sm-logo:hover .sm-mark .sm-hg-a{ stop-color:#194fff; }              /* hatch lines → blue (bottom) … */
.sm-logo:hover .sm-mark .sm-hg-b{ stop-color:#7fd6c2; }              /* … to teal (top) */
@media (prefers-reduced-motion:reduce){
  .sm-mark .sm-solid, .sm-mark path[stroke="white"], .sm-mark .sm-hg-a, .sm-mark .sm-hg-b{ transition:none; }
}

/* ---------- Work grid category filter: green highlight on hover + active ---------- */
#brx-content .pf-filterbar .brx-option-text{ padding:3px 12px; border-radius:3px; transition:background-color .25s ease, color .25s ease; }
#brx-content .pf-filterbar .brx-option-text:hover{ background-color:#aef5a0; color:#1d1d1b; }

/* ---------- Work card: crossfade to a second image on hover ---------- */
.pf-card__img--hover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease; z-index:2; pointer-events:none;
}
.pf-card--hoverable:hover .pf-card__img--hover{ opacity:1; }
@media (hover:none){ .pf-card__img--hover{ display:none; } }   /* no hover on touch */
@media (prefers-reduced-motion:reduce){ .pf-card__img--hover{ transition:none; } }

/* ---------- Mobile nav: custom hamburger + full-screen overlay ---------- */
.sm-mnav-toggle, .sm-mnav{ display:none; }
@media (max-width:860px){
  #brx-header .brxe-nav-menu{ display:none !important; }   /* hide Bricks nav on mobile */
  #brx-header .sm-headbar{ height:90px; }
  #brx-content{ padding-top:90px !important; }

  .sm-mnav-toggle{
    display:flex; position:fixed; top:25px; right:22px; z-index:1995;
    width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    background:none; border:0; padding:0; cursor:pointer;
  }
  .sm-mnav-toggle span{ display:block; width:26px; height:2px; background:#1d1d1b; transition:transform .3s ease; }
  .sm-mnav-toggle.is-active span:first-child{ transform:translateY(4.5px) rotate(45deg); }
  .sm-mnav-toggle.is-active span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

  .sm-mnav{
    display:block; position:fixed; inset:0; z-index:1990; background:#fff;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1); visibility:hidden;
  }
  .sm-mnav.is-open{ transform:none; visibility:visible; }
  .sm-mnav__list{ list-style:none; margin:0; padding:130px 32px 0; display:flex; flex-direction:column; gap:30px; }
  .sm-mnav__list a{ font-size:clamp(30px, 9vw, 40px); font-weight:400; color:#1d1d1b; text-decoration:none; letter-spacing:.5px; }
  .sm-mnav__list a:hover{ opacity:.5; }
}

/* ===================== Studio / About page (.sa-*) ===================== */
.sa-section{ display:block; padding-block:0; }   /* block flow so full-bleed bands fill width (not flex-shrunk) */
.sa-pad{ padding-inline:clamp(20px, 8.3vw, 160px); }
.sa-intro{ display:flex; flex-direction:row; align-items:flex-start; gap:clamp(28px, 4vw, 72px); margin-top:30px; }
.sa-intro .sa-manifesto{ flex:0 1 auto; }
.sa-we{ font-weight:700; font-size:clamp(90px, 11vw, 200px); line-height:.78; letter-spacing:-3px; color:#1d1d1b; flex-shrink:0; margin:0; }
.sa-we-img{ height:clamp(90px, 11vw, 200px); width:auto; display:block; flex-shrink:0; }
.sa-manifesto{ list-style:none; margin:0; padding-top:8px; }
.sa-manifesto li{ font-weight:300; font-size:clamp(24px, 3vw, 45px); line-height:1.32; text-transform:capitalize; color:#1d1d1b; }

.sa-hero{ width:clamp(0px, 70.52vw, 1354px); margin:40px 0 0; margin-left:clamp(24px, 20.26vw, 389px); aspect-ratio:1354 / 762; background-color:#d9d6cf; overflow:hidden; }   /* Figma: x389 w1354 @1920 */
.sa-hero img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); display:block; }

.sa-sthead{ font-weight:400; font-size:clamp(28px, 2.6vw, 46px); letter-spacing:.18em; text-transform:uppercase; color:#1d1d1b; margin-bottom:30px; }
.sa-sthead b{ font-weight:700; letter-spacing:.12em; }
.sa-stbody{ max-width:470px; font-weight:400; font-size:16px; line-height:25px; color:#1d1d1b; }

.sa-band{ background:#aef5a0; padding-block:clamp(50px, 6vw, 90px); width:auto; }
.sa-band--left{ margin-top:60px; margin-right:clamp(20px, 9.22vw, 177px); padding-left:clamp(24px, 20.26vw, 389px); padding-right:0; }   /* Figma: full-bleed left, right margin 177, text x389 */
.sa-band--right{ margin-left:clamp(20px, 17.24vw, 331px); margin-right:0; padding-left:clamp(0px, 3.02vw, 58px); padding-right:clamp(20px, 9.22vw, 177px); }   /* Figma: band x331 bleed-right, text x389 */

.sa-mid{ position:relative; width:100%; }
.sa-arewe{ margin-top:90px; padding-left:clamp(24px, 20.26vw, 389px); padding-right:clamp(20px, 9.22vw, 177px); }   /* Figma: text x389 */
.sa-arewe .sa-stbody{ max-width:clamp(0px, 35.68vw, 685px); }   /* Figma: body width 685 @1920 */
.sa-specialise{ margin-top:30px; }
.sa-founders{ position:absolute; right:clamp(20px, 15.73vw, 302px); top:36px; width:clamp(150px, 23.80vw, 457px); aspect-ratio:457 / 491; background-color:#d9d6cf; overflow:hidden; z-index:2; margin:0; }   /* Figma: w457, right margin 302, ~36px below heading */
.sa-founders img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); display:block; }

.sa-clients{ margin-top:120px; }
.sa-clients__inner{ max-width:1269px; margin-inline:auto; }
.sa-clients__title{ font-weight:600; font-size:18px; letter-spacing:.5px; text-transform:uppercase; color:#194fff; text-align:center; margin-bottom:40px; }
.sa-clients__grid{ display:grid; grid-template-columns:repeat(8, 1fr); gap:36px 28px; align-items:center; justify-items:center; }
.sa-clients__grid span{ font-weight:600; font-size:14px; letter-spacing:1px; color:#6e6e6e; text-transform:uppercase; text-align:center; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* logo wall — flex (not grid) so the incomplete last row stays centered */
.sa-clients__grid--logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:48px 40px; }
.sa-client-logo{ display:flex; align-items:center; justify-content:center; width:100%; }
.sa-clients__grid--logos .sa-client-logo{ width:calc((100% - 7 * 40px) / 8 - 1px); }
.sa-client-logo img{ max-width:120px; max-height:60px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .3s ease, opacity .3s ease; }
.sa-client-logo img:hover{ filter:none; opacity:1; }

.sa-stranger{ margin-top:120px; background:#aef5a0; min-height:200px; display:flex; align-items:center; justify-content:center; }
.sa-stranger a{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:32px; width:auto; max-width:100%; color:#1d1d1b; text-align:center; }
.sa-stranger .txt{ white-space:nowrap; }
.sa-stranger .txt{ font-weight:400; font-size:clamp(22px, 2.4vw, 34px); line-height:1; letter-spacing:.14em; text-transform:uppercase; }
.sa-env{ width:clamp(130px, 13vw, 190px); flex-shrink:0; display:block; transform:rotate(-12deg); transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.sa-stranger a:hover .sa-env{ transform:translateX(10px) rotate(-18deg); }
.sa-env svg, .sa-env img{ display:block; width:100%; height:auto; }
/* winged envelope: gentle float + flapping wings */
.sa-env-svg{ overflow:visible; animation: smEnvFloat 3.2s ease-in-out infinite; }
.sa-env-svg .ew{ transform-box:view-box; }
.sa-env-svg .ew-l{ transform-origin:108px 74px; animation: smEnvFlapL .85s ease-in-out infinite; }
.sa-env-svg .ew-r{ transform-origin:192px 74px; animation: smEnvFlapR .85s ease-in-out infinite; }
@keyframes smEnvFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-9px) rotate(-1deg); } }
@keyframes smEnvFlapL{ 0%,100%{ transform:rotate(0) scaleY(1); } 50%{ transform:rotate(-13deg) scaleY(.82); } }
@keyframes smEnvFlapR{ 0%,100%{ transform:rotate(0) scaleY(1); } 50%{ transform:rotate(13deg) scaleY(.82); } }
@media (prefers-reduced-motion:reduce){ .sa-env-svg, .sa-env-svg .ew-l, .sa-env-svg .ew-r{ animation:none; } }

@media (max-width:900px){
  .sa-intro{ flex-direction:column; gap:18px; }
  .sa-band--left, .sa-band--right{ margin-left:0; margin-right:0; }
  .sa-arewe, .sa-band--left, .sa-band--right{ padding-left:clamp(20px, 6vw, 60px); padding-right:clamp(20px, 6vw, 60px); }
  .sa-arewe .sa-stbody{ max-width:none; }
  .sa-hero{ width:min(1354px, 100% - 40px); margin-left:auto; margin-right:auto; }
  .sa-founders{ position:static; width:min(320px, 70%); margin:24px auto 0; }
  .sa-clients__grid{ grid-template-columns:repeat(4, 1fr); }
  .sa-clients__grid--logos .sa-client-logo{ width:calc((100% - 3 * 40px) / 4 - 1px); }
  .sa-stranger{ margin-top:80px; min-height:auto; padding:50px 20px; }
}
@media (max-width:640px){
  .sa-clients__grid{ grid-template-columns:repeat(2, 1fr); }
  .sa-clients__grid--logos .sa-client-logo{ width:calc((100% - 40px) / 2 - 1px); }
  /* phones: stack text over the envelope, both centered (never clips) */
  .sa-stranger a{ flex-direction:column; gap:18px; }
  .sa-stranger .txt{ white-space:normal; letter-spacing:.08em; font-size:clamp(18px, 5.5vw, 26px); }
  .sa-env{ width:clamp(120px, 34vw, 170px); }
}

/* ===================== Contact modal (slide-up green band) ===================== */
.sm-contact{ position:fixed; inset:0; z-index:2000; visibility:hidden; pointer-events:none; }
.sm-contact.is-open{ visibility:visible; pointer-events:auto; }
.sm-contact__backdrop{ position:absolute; inset:0; background:rgba(29,29,27,.45); opacity:0; transition:opacity .45s ease; }
.sm-contact.is-open .sm-contact__backdrop{ opacity:1; }
.sm-contact__panel{
  position:absolute; left:0; bottom:0; width:100%;
  min-height:181px; display:flex; align-items:center;
  background:#aef5a0; transform:translateY(100%);
  transition:transform .55s cubic-bezier(.83,0,.17,1);
  padding:24px clamp(20px, 8.3vw, 160px);
}
@media (max-width:700px){ .sm-contact__panel{ min-height:0; padding-block:48px; } }
.sm-contact.is-open .sm-contact__panel{ transform:none; }
.sm-contact__close{
  position:absolute; top:22px; right:22px; width:40px; height:40px;
  border:0; background:none; font-size:32px; line-height:1; color:#1d1d1b;
  cursor:pointer; transition:opacity .2s ease;
}
.sm-contact__close:hover{ opacity:.5; }
.sm-contact__bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:24px 40px; width:min(1760px, 100%); margin-inline:auto;
  font-size:13px; line-height:1.6; color:#1d1d1b;
}
.sm-contact__phones{ text-align:center; }
.sm-contact__phones a, .sm-contact__addr a{ color:#1d1d1b; }
.sm-contact__phones a:hover{ opacity:.55; }
.sm-contact__follow{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
@media (max-width:700px){
  .sm-contact__bar{ flex-direction:column; align-items:center; text-align:center; gap:20px; }
}

/* ---------- Footer Instagram (shortcode [sm_instagram]) ---------- */
.sm-ig{ display:inline-flex; color:#1d1d1b; transition:opacity .2s ease; }
.sm-ig:hover{ opacity:.5; }
.sm-ig svg{ width:20px; height:20px; display:block; }

/* ---------- Single project: gallery (shortcode [sm_project_gallery]) ---------- */
/* keep the title/challenge column in the SAME 1570 column as the gallery + nav */
.single-project .cs-wrap.brxe-container{ width:min(1570px, 100% - 80px); }
.cs-gallery{
  display:flex; flex-direction:column; gap:60px;
  width:min(1570px, 100% - 80px); margin:140px auto 0;
}
.cs-shot{
  position:relative; width:100%; aspect-ratio:1570 / 605;
  overflow:hidden; background:#cfcfcf; margin:0;
}
.cs-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* half-width image pairs */
.cs-pair{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.cs-pair .cs-shot{ aspect-ratio:754 / 605; }
/* mid-gallery statement heading */
.cs-statement{ font-weight:600; font-size:clamp(34px, 3.4vw, 64px); line-height:1.05; color:#1d1d1b; max-width:1414px; margin:0; }
@media (max-width:900px){ .cs-gallery{ gap:32px; margin-top:80px; } .cs-pair{ grid-template-columns:1fr; gap:32px; } }

/* single project: bottom nav (Show all work / Next project) */
.cs-nav{ display:flex; justify-content:space-between; align-items:center; width:min(1570px, 100% - 80px); margin:clamp(90px, 12vw, 160px) auto 0; }
.cs-nav__link{ font-weight:400; font-size:clamp(18px, 2vw, 22px); color:#1d1d1b; transition:opacity .2s ease; }
.cs-nav__link:hover{ opacity:.5; }
@media (max-width:640px){ .cs-nav{ flex-direction:column; gap:14px; margin-top:70px; } }