/*
Theme Name: CoProduce
Theme URI: https://coproduce.com.au
Author: CoProduce
Description: Custom theme for CoProduce — boutique event production for remarkable live experiences.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: coproduce
*/

:root {
  --navy:#243f78;
  --navy-dark:#132c59;
  --sky:#95c6dd;
  --ice:#dcecf3;
  --paper:#f3f0e9;
  --white:#ffffff;
  --ink:#172033;
  --line:rgba(23,32,51,.14);
  --max:1380px;
  --pad:clamp(24px,4.8vw,76px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* "Home Blue Text" preview page only — scoped to its own body.page-id-*
   class so the main Home page keeps the original --ink color. */
body.page-id-22{
  --ink:#253c70;
}

/* Elementor's Kit CSS sets its own default color/font-family directly on
   .elementor-widget-text-editor (and similar), which otherwise silently
   replaces this design's inherited white/ink text and Arial font stack.
   !important is safe here: the original design never styles these selectors
   itself, so there is no legitimate rule of ours for this to fight. */
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-image .widget-image-caption{
  color:inherit !important;
  font-family:inherit !important;
  font-weight:inherit !important;
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
}

/* Plain grouping wrappers (no design class of their own) should behave like
   a normal block <div>, not Elementor's flex-with-gap-and-padding default.
   Elementor also sets width:100% on every container (.e-con{width:var(...)})
   which, combined with flex-basis:auto, forces these wrappers to claim the
   full row width when used as a flex item in a row layout (.section-head) —
   starving their sibling of space. width:auto lets them size to content in
   a row, while stretch (the flex default) still fills the width when used
   in a column layout, so this is safe everywhere. */
.eb-plain{
  gap:0;
  padding:0;
  width:auto;
}

/* Every Elementor container defaults to 10px left/right padding (.e-con)
   plus 10px top/bottom padding and a 20px gap between children (.e-con-full).
   The original design has zero padding/gap on most containers, adding it
   back only via its own explicit classes further down this file (which win
   the specificity tie by appearing later). .wrap re-applies its own
   horizontal padding the same way. */
.e-con{
  padding-inline:0;
}
.e-con-full{
  padding:0;
  gap:0;
}

/* Elementor's own container default is flex-direction:column (via the
   2-class selector ".e-con-full.e-flex") — which happens to already match
   what most plain grouping wrappers in this design need (normal block
   stacking). The few containers that actually need a row layout restate it
   here, matching that same 2-class specificity via ".e-flex" so load order
   (this file prints after Elementor's) decides the tie. */
.hero.e-flex,.section-head.e-flex,.cta.e-flex,.meta.e-flex{
  flex-direction:row;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
h1,h2,h3,p{margin-top:0}
.wrap{width:min(var(--max),100%);margin:auto;padding-inline:var(--pad)}
.eyebrow{
  margin:0 0 22px;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
}

/* The intro section's "CoProduce" eyebrow sits alone in its own grid column
   (no heading following it in the same box, unlike the hero/section-head
   eyebrows), so the trailing margin above inflates its own box and throws
   off the column's align-items:end bottom alignment. Zero it here. */
.intro-grid > .elementor-widget-text-editor .eyebrow{
  margin-bottom:0;
}

/* The hero h1's curved letters (Q) have more left-bearing at that huge size
   than the small-caps eyebrow's squared-off B, so their box edges match but
   the visual ink doesn't. Nudge just this instance to compensate. */
.hero .eyebrow{
  margin-left:6px;
}

header{
  position:absolute;
  inset:0 0 auto;
  z-index:20;
  color:var(--sky);
}

.nav{
  min-height:98px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(149,198,221,.22);
}

.logo,.custom-logo-link img{width:clamp(144px,11.2vw,193px)}

/* The logo mark's "C" has ~0 left-bearing, same as the hero eyebrow's "B" —
   but the eyebrow was nudged 6px right to optically match the h1's "Q"
   (see .hero .eyebrow below), so the logo needs the same nudge to stay
   aligned with it. Scoped to the header nav only, not the footer logo. */
.nav .logo,.nav .custom-logo-link{
  margin-left:6px;
}

.nav-links{display:flex;gap:36px;align-items:center;margin:0;padding:0}
.nav-links li{list-style:none;margin:0}
.nav-links a{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.9;
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:170px 0 78px;
  color:white;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(8,27,58,.88) 0%,rgba(20,45,93,.66) 48%,rgba(20,45,93,.34) 100%);
  pointer-events:none;
}

.hero > *{
  position:relative;
  z-index:1;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.5fr);
  gap:8vw;
  align-items:end;
}

h1{
  margin:0;
  max-width:900px;
  font-size:clamp(4.7rem,9vw,9.6rem);
  line-height:.82;
  letter-spacing:-.058em;
  text-transform:uppercase;
  font-weight:900;
}

.hero-copy{
  max-width:390px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.42);
}

.hero-copy p{
  color:#f4fbff;
  font-size:clamp(1rem,1.3vw,1.22rem);
  line-height:1.62;
  margin-bottom:32px;
}

.arrow-link{
  display:inline-flex;
  gap:16px;
  align-items:center;
  padding-bottom:9px;
  border-bottom:1px solid currentColor;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.arrow-link::after{content:"→";font-size:1.15rem}

section{padding:clamp(94px,10vw,155px) 0}
/* Elementor's own .e-con-full class carries a default 10px top/bottom
   padding at the same specificity as a bare tag selector, so it wins the
   cascade over the rule above for any section that doesn't already set its
   own padding (.hero/.clients/.cta below do, and so stay unaffected). */
.intro,.work,.capabilities{padding:clamp(94px,10vw,155px) 0}
.cta{padding:clamp(94px,10vw,155px) 0}

.intro{background:var(--paper)}
.intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.38fr) minmax(0,1.62fr);
  gap:8vw;
}

.intro h2{
  margin:0;
  max-width:1040px;
  font-size:clamp(3.4rem,6.9vw,7.5rem);
  line-height:.9;
  letter-spacing:-.053em;
}

.intro-copy{
  max-width:540px;
  margin:40px 0 0 7px;
  font-size:1.08rem;
  line-height:1.72;
}

.work{background:var(--white)}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:36px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line);
}

.section-head h2{
  margin:0;
  font-size:clamp(3rem,5.7vw,6rem);
  line-height:.93;
  letter-spacing:-.05em;
}

.feature{
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
  min-height:610px;
  border-bottom:1px solid var(--line);
}

.feature:nth-child(even){
  grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);
}

.feature:nth-child(even) .feature-copy{order:2}
.feature:nth-child(even) .feature-image{order:1}

.feature-copy{
  padding:clamp(48px,5vw,78px) clamp(38px,5vw,72px) clamp(48px,5vw,78px) 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:70px;
}

.feature:nth-child(even) .feature-copy{
  padding-left:clamp(38px,5vw,72px);
  padding-right:0;
}

.meta{
  display:flex;
  justify-content:space-between;
  gap:22px;
  font-size:.7rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(23,32,51,.62);
}

.feature-copy h3{
  margin:0;
  max-width:600px;
  font-size:clamp(2.7rem,4.8vw,5rem);
  line-height:.94;
  letter-spacing:-.047em;
}

.feature-image{
  position:relative;
  align-self:stretch;
  margin:clamp(48px,5vw,78px) 0;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--ice);
}

.feature-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s ease;
}

/* Elementor's image widget wraps the <img> in two plain block divs
   (.elementor-widget-image > .elementor-widget-container) that don't
   inherit .feature-image's stretched height on their own, leaving the img's
   own height:100% resolving against an auto-height ancestor instead —
   visible as a gap at the bottom of the image. Force the chain to 100%. */
.feature-image .elementor-widget-image,
.feature-image .elementor-widget-container{
  height:100%;
}

.feature:hover img{transform:scale(1.025)}

.capabilities{background:var(--ice)}
.cap-grid{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:8vw;
  align-items:start;
}

.capabilities h2{
  position:sticky;
  top:40px;
  margin:0;
  max-width:560px;
  font-size:clamp(3rem,5.6vw,6rem);
  line-height:.92;
  letter-spacing:-.05em;
}

.cap-list{border-top:1px solid var(--line)}
.cap-item{
  display:grid;
  grid-template-columns:50px 1fr 24px;
  gap:24px;
  align-items:center;
  min-height:108px;
  border-bottom:1px solid var(--line);
}

.cap-item span:first-child{
  font-size:.7rem;
  letter-spacing:.17em;
  color:rgba(23,32,51,.55);
}

.cap-item h3{
  margin:0;
  font-size:clamp(1.6rem,2.8vw,2.9rem);
  letter-spacing:-.035em;
}

.clients{
  background:var(--paper);
  padding-top:76px;
  padding-bottom:76px;
}

.client-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.client{
  min-height:125px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  border-right:1px solid var(--line);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.02em;
  color:rgba(23,32,51,.6);
}
.client:last-child{border-right:0}

.cta{
  min-height:78vh;
  display:flex;
  align-items:center;
  background:var(--navy);
  color:var(--sky);
}

.cta-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.5fr);
  gap:8vw;
  align-items:end;
}

.cta h2{
  margin:0;
  max-width:930px;
  font-size:clamp(3.2rem,6.4vw,7rem);
  line-height:.85;
  letter-spacing:-.058em;
  text-transform:uppercase;
}

.cta p{
  color:#e3f2f8;
  line-height:1.65;
  margin-bottom:32px;
}

.cta-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.cta-form .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cta-form label{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(227,242,248,.7);
}

.cta-form input,
.cta-form textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(149,198,221,.35);
  color:#f4fbff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  padding:6px 0;
  resize:none;
  transition:border-color .3s ease;
}

.cta-form input::placeholder,
.cta-form textarea::placeholder{
  color:rgba(227,242,248,.4);
}

.cta-form input:focus,
.cta-form textarea:focus{
  outline:none;
  border-bottom-color:var(--sky);
}

.cta-form button{
  align-self:flex-start;
  margin-top:10px;
  display:inline-flex;
  gap:16px;
  align-items:center;
  padding-bottom:9px;
  border:none;
  border-bottom:1px solid currentColor;
  background:none;
  color:var(--sky);
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  font-family:Arial,Helvetica,sans-serif;
}

.cta-form button::after{content:"→";font-size:1.15rem}

.cta-form-notice{
  color:#f4fbff;
  font-size:1rem;
  line-height:1.65;
}

.cta-form-notice-error{
  color:#ffb4a8;
}

footer{
  background:var(--navy);
  color:var(--sky);
  padding:0 0 34px;
}

.footer-row{
  padding-top:27px;
  border-top:1px solid rgba(149,198,221,.24);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.footer-row .logo,
.footer-row .custom-logo-link img{
  width:clamp(120px,9vw,150px);
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{opacity:1;transform:none}

/* The scroll-reveal JS relies on IntersectionObserver, which doesn't fire
   reliably inside Elementor's editor preview iframe — leaving every .reveal
   element stuck at opacity:0 while editing (structure visible, content
   not). Elementor adds .elementor-editor-active to the iframe body while
   editing, so force content visible there regardless of scroll state. */
body.elementor-editor-active .reveal{
  opacity:1 !important;
  transform:none !important;
}

@media(max-width:940px){
  .nav-links{display:none}
  .hero-grid,.intro-grid,.cap-grid,.cta-grid{grid-template-columns:1fr}
  .feature,.feature:nth-child(even){grid-template-columns:1fr;min-height:auto}
  .feature:nth-child(even) .feature-copy,.feature:nth-child(even) .feature-image{order:initial}
  .feature-copy,.feature:nth-child(even) .feature-copy{padding:46px 0}
  .capabilities h2{position:static}
  .client-grid{grid-template-columns:1fr 1fr}
  .client:nth-child(2n){border-right:0}
  .client{border-bottom:1px solid var(--line)}
}

@media(max-width:600px){
  .nav{min-height:82px}
  .logo,.custom-logo-link img{width:130px}
  h1{font-size:clamp(3rem,15vw,5.5rem)}
  .cta h2{font-size:clamp(2.4rem,12vw,4.9rem)}
  .section-head{align-items:start;flex-direction:column}
  .meta{flex-direction:column;gap:7px}
  .client-grid{grid-template-columns:1fr}
  .client{border-right:0}
  .footer-row{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .feature-image img{transition:none}
}

/* Alignment refinements */
.hero-grid,
.intro-grid,
.cap-grid,
.cta-grid {
  align-items: end;
}

.hero-copy,
.intro-copy,
.cta-grid > div:last-child {
  justify-self: end;
}

.hero-copy p,
.intro-copy,
.cta p {
  max-width: 38ch;
}

.section-head > div,
.feature-copy > div:last-child,
.capabilities .cap-grid > div:first-child {
  min-width: 0;
}

.section-head h2,
.feature-copy h3,
.capabilities h2,
.cta h2,
.intro h2 {
  text-wrap: balance;
}

.feature-copy {
  align-self: stretch;
}

.feature-copy > div:last-child {
  margin-top: auto;
}

/* .intro-copy is a plain paragraph sitting under the heading, not a grid
   item — but modern browsers apply justify-self to ordinary blocks too, so
   it was still inheriting the "align to the end" rule meant for the actual
   grid items above (.hero-copy, .cta-grid > div:last-child) and overriding
   the left-aligned margin further up this file. Reset it here, and widen
   the wrap so the copy doesn't break into a narrow, cramped column. */
.intro-copy {
  justify-self: start;
  max-width: 640px;
}

@media(max-width:940px) {
  .hero-grid,
  .intro-grid,
  .cap-grid,
  .cta-grid {
    align-items: start;
  }

  .hero-copy,
  .intro-copy,
  .cta-grid > div:last-child {
    justify-self: start;
  }
}

/* Motion layer */

/* Elementor's own background-position rule for the hero (from the editable
   native background image) is generated per-post with a much higher
   specificity (.elementor-X .elementor-element.elementor-element-Y) than a
   plain class selector can match, so it would otherwise silently override
   the scroll parallax below. !important is the reliable way to win that
   fight regardless of the per-post element ID, which can change whenever
   the page content is regenerated. */
.hero{
  background-position:center calc(50% + var(--hero-shift, 0px)) !important;
}

.logo,.custom-logo-link img {
  transition: transform .35s ease, opacity .35s ease;
}

.logo:hover,.custom-logo-link:hover img {
  transform: translateY(-2px);
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 1px;
  background: currentColor;
  transition: right .3s ease;
}

.nav-links a:hover::after {
  right: 0;
}

.feature.motion-ready .feature-image {
  clip-path: inset(0 0 100% 0);
}

.feature.motion-ready.motion-in .feature-image {
  animation: imageReveal 1.05s cubic-bezier(.22,1,.36,1) forwards;
}

.feature.motion-ready .feature-image img {
  transform: scale(1.055);
}

.feature.motion-ready.motion-in .feature-image img {
  animation: imageSettle 1.25s cubic-bezier(.22,1,.36,1) forwards;
}

.cap-item {
  transition: transform .28s ease;
}

.cap-item:hover {
  transform: translateX(8px);
}

.cap-item span:last-child {
  transition: transform .28s ease;
}

.cap-item:hover span:last-child {
  transform: translate(4px,-4px);
}

.client {
  transition: transform .3s ease, color .3s ease;
}

.client:hover {
  transform: translateY(-4px);
  color: var(--navy);
}

@keyframes imageReveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes imageSettle {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}

@media(prefers-reduced-motion:reduce) {
  .hero { background-position: center; }
  .logo,
  .nav-links a::after,
  .cap-item,
  .cap-item span:last-child,
  .client {
    transition: none;
  }

  .feature.motion-ready .feature-image,
  .feature.motion-ready .feature-image img {
    clip-path: none;
    transform: none;
    animation: none;
  }
}