/* =====================================================================
   hakolawood — HOME PAGE supplement (Step 2)
   wp-content/themes/hakolawood-child/assets/css/home.css

   Only the things core blocks can't express on their own: button
   hover-fills, the "Coming soon" badge, hero text width, the enquiry
   form, and a few responsive rules. Colors/sizes/spacing are set in the
   block markup itself (editable in Gutenberg); keep classNames in sync.
   ===================================================================== */

.hw-section,
section[id]{ scroll-margin-top:-8px; } /* anchor offset: sections already carry 120px top padding, so a small negative lands the heading ~36px under the 76px sticky header (90px stacked on the padding jumped ~134px too low) */

/* ---- HERO PANELS ---------------------------------------------------- */
.hw-heroes{ gap:0 !important; }
.hw-hero .wp-block-cover__inner-container{
  width:100%;
  max-width:440px;
  margin-bottom:96px;          /* lift text off the bottom edge */
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hw-hero .wp-block-buttons{ margin-top:20px; }

/* ---- LEFT hero (Configurator): text OVERLAID on the image.
   The image (paper bg, tabletops low with paper headroom on top) fills the whole
   80vh panel behind the copy; bottom-anchored cover only ever crops the top
   *paper* margin, so no tabletop (incl. the green top) is cut on any viewport.
   The copy sits over the paper headroom via z-index. */
.hw-hero--configurator{
  background:#FAF7F3; min-height:80vh; position:relative; overflow:hidden;
}
.hw-configurator__text{ padding:calc(48px + 2vh) 48px 0; position:relative; z-index:1; }
.hw-configurator__title{ text-wrap:balance; }
.hw-configurator__sub{ max-width:410px; }
.hw-configurator__img{ margin:0 !important; position:absolute; inset:0; z-index:0; }
.hw-configurator__img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:50% 100%; display:block;
  transform:translateY(10%);
}

/* ---- RIGHT hero (Cabinets): same panel, image right-anchored to mirror the layout,
   scaled to 80% (anchored to the same bottom-right corner it renders at).
   object-fit:contain (not cover) — a cover crop with a 100% object-position
   crops entirely from the left edge as the panel narrows, chopping into the
   cabinet artwork on resize. Contain always shows the full render. */
.hw-hero--cabinets .hw-configurator__img img{
  object-fit:contain; object-position:100% 100%;
  transform:translateY(-10%) scale(0.8); transform-origin:100% 100%;
}

/* Primary (filled) CTA — coral, deepens on hover, subtle focus-pulse ring */
.hw-btn-primary .wp-block-button__link{
  background:#D85959; color:#fff; border:1.5px solid #D85959; border-radius:4px;
  font-weight:500; font-size:14px; letter-spacing:0.01em; line-height:1;
  height:44px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
  animation:hk-pulse 2.4s ease-out infinite;
}
.hw-btn-primary .wp-block-button__link:hover,
.hw-btn-primary .wp-block-button__link:focus{ background:#C0463F; border-color:#C0463F; }
@keyframes hk-pulse{
  0%{ box-shadow:0 0 0 0 rgba(216,89,89,0.45); }
  70%{ box-shadow:0 0 0 11px rgba(216,89,89,0); }
  100%{ box-shadow:0 0 0 0 rgba(216,89,89,0); }
}
@media (prefers-reduced-motion:reduce){ .hw-btn-primary .wp-block-button__link{ animation:none; } }
/* 3D cube before the hero button label — same icon as the header "Design in 3D" CTA */
.hw-btn-primary .wp-block-button__link::before{
  content:""; flex:none; width:19px; height:19px; margin-right:9px; background-color:currentColor;
  -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMi41IEwyMC41IDcgVjE3IEwxMiAyMS41IEwzLjUgMTcgVjcgWiIvPjxwYXRoIGQ9Ik0zLjUgNyBMMTIgMTEuNSBMMjAuNSA3Ii8+PHBhdGggZD0iTTEyIDExLjUgVjIxLjUiLz48L3N2Zz4=) center/contain no-repeat;
  mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMi41IEwyMC41IDcgVjE3IEwxMiAyMS41IEwzLjUgMTcgVjcgWiIvPjxwYXRoIGQ9Ik0zLjUgNyBMMTIgMTEuNSBMMjAuNSA3Ii8+PHBhdGggZD0iTTEyIDExLjUgVjIxLjUiLz48L3N2Zz4=) center/contain no-repeat;
}

/* ---- HERO BUTTONS: hairline ghost, fills on hover ---- */
.hw-btn-outline .wp-block-button__link{
  background:transparent; color:#C0463F; border:1.5px solid #C0463F;
  border-radius:4px; font-weight:500; font-size:16px; letter-spacing:0.01em;
  padding:13px 28px; transition:background .18s ease, color .18s ease;
}
.hw-btn-outline .wp-block-button__link:hover,
.hw-btn-outline .wp-block-button__link:focus{ background:#C0463F; color:#fff; }

/* ---- CONFIGURATOR PILLS ---- */
.hw-pills{ gap:18px; }
.hw-pills .wp-block-button__link{
  border-radius:4px; font-size:13px; font-weight:500; letter-spacing:0.06em;
  text-transform:uppercase; padding:11px 22px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
/* active pills (Cabinets, Benches) → ghost, fill INK on hover */
.hw-pill-ink .wp-block-button__link{
  background:transparent; color:#1C1B1A; border:1px solid #D6CFC4;
}
.hw-pill-ink .wp-block-button__link:hover,
.hw-pill-ink .wp-block-button__link:focus{
  background:#1C1B1A; color:#fff; border-color:#1C1B1A;
}
/* All Products → ink outline, fills ink on hover */
.hw-pill-outline .wp-block-button__link{
  background:transparent; color:#1C1B1A; border:1px solid #1C1B1A;
}
.hw-pill-outline .wp-block-button__link:hover,
.hw-pill-outline .wp-block-button__link:focus{ background:#1C1B1A; color:#FAF7F3; }
/* "Coming soon" pills → muted; subtle, honest hover (no link affordance) */
.hw-pill-soon .wp-block-button__link{
  background:#FFFFFF; color:#8A847E; border:1px solid #E4DFD9;
  padding-right:30px; cursor:default;
  display:inline-flex; align-items:center; gap:10px;
  transition:background .18s ease, border-color .18s ease;
}
.hw-pill-soon .wp-block-button__link:hover{ background:#FAF7F3; border-color:#D6CFC4; }
.hw-pill-soon .wp-block-button__link::after{
  content:"Coming soon";
  font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:#C0463F; background:#F3E5E1; border-radius:6px; padding:4px 8px;
}

/* ---- MATERIALS GRID: keep 4-up, tighten the title row --------------- */
.hw-mat-grid{ gap:28px; }
.hw-mat-grid .wp-block-group{ align-items:baseline; }

/* ---- ABOUT STATS ---------------------------------------------------- */
.hw-stats{ gap:56px; }
.hw-stats .wp-block-column{ flex-basis:auto; flex-grow:0; }

/* ---- ENQUIRY FORM (shortcode-rendered) ------------------------------ */
.hw-form-card{
  background:#FFFFFF; border:1px solid #E4DFD9; border-radius:5px; padding:40px;
}
.hw-form{ display:flex; flex-direction:column; gap:20px; }
.hw-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hw-form label{ display:block; }
.hw-form .hw-form__label{
  display:block; font-size:13px; font-weight:500; color:#4A4744; margin-bottom:7px;
}
.hw-form input,
.hw-form textarea{
  width:100%; padding:14px 16px;
  border:1px solid #E4DFD9; border-radius:4px;
  font-size:16px; font-family:'Manrope',system-ui,sans-serif;
  background:#fff; color:#1C1B1A; outline:none;
}
.hw-form textarea{ resize:vertical; }
.hw-form input:focus,
.hw-form textarea:focus{ border-color:#C0463F; }
.hw-form__submit{
  align-self:flex-start; margin-top:4px;
  background:transparent; color:#C0463F; border:1.5px solid #C0463F;
  font-family:'Manrope',system-ui,sans-serif; font-size:16px; font-weight:500;
  padding:14px 32px; border-radius:4px; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.hw-form__submit:hover{ background:#C0463F; color:#fff; }
.hw-form__sent{
  font-size:16px; color:#3C7A57; margin-bottom:4px;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1024px){
  .hw-mat-grid{ flex-wrap:wrap; }
  .hw-mat-grid > .wp-block-column{ flex-basis:calc(50% - 14px); }
}
@media (max-width:782px){
  /* core stacks columns automatically; just tidy the heroes + stats */
  .hw-hero{ min-height:60vh !important; }
  .hw-hero .wp-block-cover__inner-container{ margin-bottom:56px; }
  .hw-mat-grid > .wp-block-column{ flex-basis:100%; }
  .hw-form__row{ grid-template-columns:1fr; }
  .hw-stats{ gap:32px; }
}
/* Narrower side-by-side widths: shrink the headline so the copy stays compact,
   the panel keeps ~80vh, and the text doesn't run down over the tabletops. */
@media (max-width:1279px){
  .hw-configurator__title{ font-size:34px !important; line-height:1.15 !important; }
}
@media (max-width:900px){
  .hw-configurator__title{ font-size:30px !important; }
}
@media (max-width:480px){
  .hw-configurator__text{ padding:28px 28px 0; }
  .hw-configurator__title{ font-size:28px !important; }
}

/* Configurator band heading ("Made to measure…") — desktop keeps its inline 46px,
   but it had no mobile scaling and towered on phones. Match the hero heading's
   steps (34 → 30 → 28). Inline font-size means !important is required. */
@media (max-width:1279px){
  #configurator h2{ font-size:34px !important; line-height:1.15 !important; }
}
@media (max-width:900px){
  #configurator h2{ font-size:30px !important; }
}
@media (max-width:480px){
  #configurator h2{ font-size:28px !important; }
}

/* ===== Contact — tighten the (far too airy) contact-details spacing =====
   WordPress does NOT apply the block flex-gap to these vertical groups, so the
   details fell back to large default paragraph margins (~60px between every line).
   Zero those margins and set an explicit rhythm: each label sits on its value
   (4px), with a moderate gap between the Studio/Email/Phone/Hours items (20px). */
#contact .wp-block-column .is-layout-flex.is-vertical > *{ margin-top:0 !important; margin-bottom:0 !important; }
#contact .wp-block-column > .is-layout-flex.is-vertical{ gap:20px !important; }
#contact .wp-block-column .is-layout-flex.is-vertical .is-layout-flex.is-vertical{ gap:4px !important; }