/*
Theme Name: Apiary Marketing
Theme URI: https://apiarymktg.com
Author: Apiary Marketing
Description: Custom theme for Apiary Marketing. Fonts (Please Display VF, RL Horizon) load from an Adobe Fonts kit, set under Appearance > Customize > Apiary Settings.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: apiary
*/

:root{
  --purple:#6359a3;
  --ink:#0a2126;
  --cream:#fff2e8;
  --teal:#0d4a59;
  --coral:#eb6e57;
  --clay:#bf5e59;
  --blue:#4d7da3;

  /* If Adobe's CSS names differ in your kit, change them here. */
  --font-display:"please-display-vf","Arial Black","Helvetica Neue",Impact,sans-serif;
  --font-text:"rl-horizon","Georgia","Times New Roman",serif;

  --hex-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 89.6'%3E%3Cpolygon points='11,44.8 30.5,11 69.5,11 89,44.8 69.5,78.6 30.5,78.6' fill='black' stroke='black' stroke-width='22' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wrap:1280px;
  --pad:clamp(1.25rem,5vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
main{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-text);font-size:1.125rem;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* Hexagons: rounded flat-top hex drawn as an SVG, tinted via --hex */
.hex{
  --hex:var(--purple);
  position:absolute;aspect-ratio:100/89.6;background:var(--hex);
  -webkit-mask:var(--hex-shape) center/100% 100% no-repeat;
          mask:var(--hex-shape) center/100% 100% no-repeat;
  
}

/* ---------- Header / navigation ---------- */
.site-header{padding-top:clamp(1rem,2.2vw,1.75rem)}
.site-header__in{--logo-w:clamp(7.5rem,17vw,15rem);display:flex;align-items:flex-end;gap:clamp(.75rem,2vw,1.5rem)}
.site-logo{flex:none;width:var(--logo-w);display:block}
.site-logo img{width:100%}
.site-nav{flex:1;min-width:0;border-bottom:4px solid var(--teal);border-radius:4px;padding-bottom:.6rem;margin-bottom:calc(var(--logo-w)*.04)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:flex-end;gap:clamp(1.1rem,5.5vw,5rem);font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.9vw,1.55rem);line-height:1}
.site-nav a{display:block;padding:.25rem 0;color:var(--ink);text-decoration:none}
.site-nav a:hover,
.site-nav .current-menu-item>a,.site-nav .current_page_item>a,.site-nav .current-menu-ancestor>a{color:var(--purple)}

/* ---------- Hero ---------- */
.hero{
  --w:clamp(7rem,20vw,17rem);--h:calc(var(--w)*.896);--g:calc(var(--w)*.07);--d:calc(var(--h) + var(--g));
  position:relative;overflow:hidden;padding-top:clamp(1rem,3vw,2.5rem)}
/* Three identical hexagons in a honeycomb, equal gaps; the bottom one is cut at its middle by the band below */
.hero__hexes{position:absolute;z-index:0;pointer-events:none;left:calc(var(--w)*-.3);bottom:calc(var(--h)/-2);
  width:calc(var(--d)*.866 + var(--w));height:calc(var(--d) + var(--h))}
.hero__hexes .hex{width:var(--w)}
.hero__hexes .hex:nth-child(1){left:0;top:0}
.hero__hexes .hex:nth-child(2){left:calc(var(--d)*.866);top:calc(var(--d)*.5)}
.hero__hexes .hex:nth-child(3){left:0;top:var(--d)}
.hero .wrap{position:relative;z-index:1}
.hero__title{margin:0;line-height:0}
.hero__title img{display:block;width:100%;height:auto}
.hero__lower{margin-top:clamp(.75rem,2vw,1.75rem);min-height:calc(var(--d) + var(--h)/2 + clamp(1rem,2.5vw,2rem))}
.hero__copy{max-width:34rem;margin-left:max(0px,calc(var(--w)*1.55 + 2rem - (max(0px,(100vw - var(--wrap))/2) + var(--pad))))}
.hero__lead{margin:0 0 .75rem;font-weight:700;font-size:clamp(1.15rem,2.2vw,1.65rem);line-height:1.25}
.hero__body{margin:0;font-size:clamp(1rem,1.7vw,1.3rem);padding-left:.75rem}

/* ---------- Marquee band ---------- */
.band{background:var(--purple);color:var(--cream);padding-block:clamp(.75rem,2vw,1.5rem);overflow:hidden;display:grid;gap:.15em;font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,4.6vw,3.5rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.band__row{display:flex;width:max-content;white-space:nowrap;animation:slide 45s linear infinite}
.band__row:nth-child(2){animation-direction:reverse;animation-duration:55s}
.band__row:nth-child(3){animation-duration:65s}
.band__row span{padding-right:.35em}
.band .c-clay{color:var(--clay)}.band .c-blue{color:var(--blue)}.band .c-ink{color:var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Our Work ---------- */
.work{padding-block:clamp(3rem,7vw,6rem)}
.work__heading{display:flex;align-items:center;gap:1.5rem;margin:0 0 clamp(2rem,5vw,4rem);font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--coral)}
.work__heading::after{content:"";flex:1;height:2px;background:var(--coral)}

.project{--c:var(--teal);--gap:clamp(1.5rem,4vw,3.5rem);--reach:6.5rem;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:var(--gap);margin-bottom:clamp(3rem,7vw,6rem)}
.project:nth-of-type(1){--reach:3rem}
.project:nth-of-type(3){--reach:9rem}
.project--blue{--c:var(--blue)}
.project--clay{--c:var(--clay)}
.project--flip{grid-template-columns:1fr 1.5fr}
.project--flip .project__media{order:2}
.project__media img{width:114%;max-width:none;margin-left:-11%;filter:drop-shadow(0 8px 14px rgba(10,33,38,.18))}
.project__title{position:relative;margin:0 0 .6rem;font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:.95;color:var(--c)}
.project__title--caps{text-transform:uppercase}
/* connector: hexagon next to the title, then a line with an angled end that runs onto the photo */
.project__title::before,.project__title::after{content:"";position:absolute}
.project__title::before{right:calc(100% + .35rem);top:.48em;width:1.1rem;height:calc(1.1rem*.896);margin-top:calc(-.55rem*.896);
  background:var(--c);-webkit-mask:var(--hex-shape) center/100% 100% no-repeat;mask:var(--hex-shape) center/100% 100% no-repeat}
.project__title::after{right:calc(100% + 1.55rem);top:.48em;margin-top:-1px;width:calc(var(--gap) + var(--reach));height:1.5rem;
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--c) calc(50% - 1.2px),var(--c) calc(50% + 1.2px),transparent calc(50% + 1.2px)) 0 100%/2.2rem 1.5rem no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/calc(100% - 2.2rem) 2px no-repeat}
/* photo on the right: title, then hexagon, then line running right onto the photo */
.project--flip .project__media img{margin-left:-3%}
.project--flip .project__title{display:flex;align-items:flex-start}
.project--flip .project__title span{order:1}
.project--flip .project__title::before{order:2;position:static;flex:none;margin:calc(.48em - .55rem*.896) 0 0 .35rem}
.project--flip .project__title::after{order:3;position:static;flex:1;width:auto;margin:calc(.48em - 1px) calc(-1*(var(--gap) + var(--reach))) 0 .1rem;height:1.5rem;
  background:
    linear-gradient(to bottom left,transparent calc(50% - 1.2px),var(--c) calc(50% - 1.2px),var(--c) calc(50% + 1.2px),transparent calc(50% + 1.2px)) 100% 100%/2.2rem 1.5rem no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/calc(100% - 2.2rem) 2px no-repeat}
.project__role{margin:0 0 1.25rem;font-weight:700;font-size:clamp(1.05rem,1.8vw,1.45rem);line-height:1.25;max-width:18em}
.project__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:clamp(.95rem,1.45vw,1.15rem)}
.project__list li{position:relative;padding-left:2rem}
.project__list li::before{
  content:"";position:absolute;left:0;top:.3em;width:1.1rem;height:1.1rem;background:var(--c);
  -webkit-mask:var(--hex-line) center/100% 100% no-repeat;mask:var(--hex-line) center/100% 100% no-repeat;
  --hex-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='28,10 72,10 94,50 72,90 28,90 6,50' fill='none' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Footer / contact ---------- */
.contact{background:var(--purple);color:var(--cream);padding-block:clamp(2rem,4vw,3.5rem)}
.contact .wrap{display:grid;grid-template-columns:1.6fr 1fr;align-items:end;gap:2rem}
.contact__title{margin:0;line-height:0}
.contact__title img{display:block;width:100%;max-width:42rem;height:auto}
.contact__copy{font-size:clamp(.9rem,1.3vw,1.05rem);line-height:1.45}
.contact__copy p{margin:0 0 .9rem;max-width:24em}
.contact__copy a{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor}
.contact__copy a:hover{color:var(--coral)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .project,.project--flip{grid-template-columns:1fr}
  .project__media img,.project--flip .project__media img{width:100%;margin-left:0}
  .project--flip .project__media{order:0}
  .project__media{max-width:36rem}
  .project__title::before,.project__title::after,.project--flip .project__title::before,.project--flip .project__title::after{display:none}
  .project--flip .project__title{display:block}
  .contact .wrap{grid-template-columns:1fr}
  .hero__copy{margin-left:0}
  .hero__lower{min-height:0;padding-bottom:calc(var(--d) + var(--h)/2 + 1.5rem)}
}
@media (prefers-reduced-motion:reduce){
  .band__row{animation:none}
}