/* ---------- Little Glass Helpers — custom visual layer ---------- */

:root {
  --lgh-teal: #1f8577;
  --lgh-teal-dark: #16655a;
  --lgh-orange: #ea6035;
  --lgh-orange-dark: #cf4d22;
  --lgh-purple: #6b3d8f;
  --lgh-yellow: #f4bf3a;
  --lgh-cream: #faf4e8;
  --lgh-cream-deep: #f2e8d4;
  --lgh-ink: #2a2a2a;
  --lgh-muted: #6b6b6b;

  --lgh-font-display: "Fredoka", system-ui, -apple-system, sans-serif;
  --lgh-font-body: "Nunito", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--lgh-font-body);
  color: var(--lgh-ink);
  background: var(--lgh-cream);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--lgh-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Brand wordmark accents for headings that use inline colored spans */
.lgh-accent-teal  { color: var(--lgh-teal); }
.lgh-accent-orange { color: var(--lgh-orange); }
.lgh-accent-purple { color: var(--lgh-purple); }
.lgh-accent-yellow { color: var(--lgh-yellow); }

/* Primary CTA button */
.wp-block-button.is-style-lgh-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link.lgh-btn-primary {
  background: var(--lgh-teal);
  color: #fff;
  border-radius: 14px;
  padding: 0.85em 1.8em;
  font-family: var(--lgh-font-display);
  font-weight: 600;
  box-shadow: 0 4px 0 var(--lgh-teal-dark);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.wp-block-button.is-style-lgh-primary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.lgh-btn-primary:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lgh-teal-dark);
}

.wp-block-button.is-style-lgh-orange .wp-block-button__link,
.wp-block-button .wp-block-button__link.lgh-btn-orange {
  background: var(--lgh-orange);
  color: #fff;
  border-radius: 14px;
  padding: 0.85em 1.8em;
  font-family: var(--lgh-font-display);
  font-weight: 600;
  box-shadow: 0 4px 0 var(--lgh-orange-dark);
}

/* Section backgrounds — subtle paper feel */
.lgh-section-cream { background: var(--lgh-cream); }
.lgh-section-cream-deep { background: var(--lgh-cream-deep); }

/* Card style used in freebies + product grids */
.lgh-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.05);
}
.lgh-card .wp-block-image { margin: 0; }
.lgh-card .wp-block-image img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center center;
}

/* ---------- Products showcase — tall portrait cards, staggered ---------- */

.lgh-products-showcase {
  gap: 0.6rem !important;
  align-items: flex-start !important;
}

.lgh-products-showcase .wp-block-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Stagger — every other card drops down */
.lgh-products-showcase .wp-block-column:nth-child(even) {
  transform: translateY(3rem);
}

.lgh-product-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 1 / 2;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ddd; /* fallback when no image uploaded */
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lgh-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* The title's link stretches to cover the whole card, so clicking anywhere follows it */
.lgh-product-card .lgh-pc-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* Title sits at the top of the card, overlayed on the image */
.lgh-pc-title {
  position: absolute;
  top: 1.2rem;
  left: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  margin: 0;
  color: #fff !important;
  font-family: var(--lgh-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.lgh-pc-title a {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Image fills the entire card; title floats on top */
.lgh-pc-image {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.lgh-pc-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0 !important;
}

@media (max-width: 960px) {
  .lgh-products-showcase { flex-wrap: wrap !important; gap: 1rem !important; }
  .lgh-products-showcase .wp-block-column {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem);
  }
  .lgh-products-showcase .wp-block-column:nth-child(even) { transform: none; }
}

@media (max-width: 560px) {
  .lgh-products-showcase .wp-block-column { flex: 0 0 100% !important; max-width: 100%; }
}

/* Extra space under the staggered cards so the View All button clears the lower row */
.lgh-products-showcase + .wp-block-buttons,
.lgh-section-cream-deep .lgh-products-showcase + .wp-block-buttons {
  margin-top: 4.5rem !important;
}
@media (max-width: 960px) {
  .lgh-products-showcase + .wp-block-buttons { margin-top: 2rem !important; }
}

/* Card download/learn-more row under the image */
.lgh-download-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1em 0.9em;
  font-family: var(--lgh-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--lgh-ink);
  text-align: center;
}
.lgh-download-row a {
  color: inherit;
  text-decoration: none;
}
.lgh-download-row a:hover {
  color: var(--lgh-teal);
}

/* Feature row under hero (Made by Glass Artist etc.) */
.lgh-feature-row {
  padding: 1.4rem 1rem;
  background: var(--lgh-cream);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.lgh-feature-row .wp-block-columns { gap: 0 !important; }

/* Each column is an icon + text row, equally spaced across the page */
.lgh-feature-row .lgh-feature-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.9rem;
  position: relative;
  padding: 0.4rem 0.5rem;
  font-family: var(--lgh-font-display);
  font-weight: 500;
  color: var(--lgh-ink);
}

.lgh-feature-row .lgh-feature-item p { margin: 0; white-space: nowrap; }

/* Icon box sizing — keep icons tidy */
.lgh-feature-row .lgh-feature-item .wp-block-image {
  margin: 0;
  flex: 0 0 56px;
}
.lgh-feature-row .lgh-feature-item .wp-block-image img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* Thin vertical separator between items (hidden on the last one) */
.lgh-feature-row .lgh-feature-item + .lgh-feature-item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(0,0,0,0.12);
}

@media (max-width: 782px) {
  .lgh-feature-row .lgh-feature-item + .lgh-feature-item::before { display: none; }
  .lgh-feature-row .wp-block-columns { flex-direction: column; }
}

/* Section headings with decorative flanking dashes — single-line, inline layout */
.lgh-section-title {
  text-align: center;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 auto 1.5rem;
  position: relative;
  white-space: nowrap;
}
.lgh-section-title::before,
.lgh-section-title::after {
  content: "";
  display: inline-block;
  width: 3em;
  height: 2px;
  background: var(--lgh-orange);
  vertical-align: middle;
  margin: 0 0.8em;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .lgh-section-title { white-space: normal; }
  .lgh-section-title::before,
  .lgh-section-title::after { display: none; }
}

/* "Now Available at Perth Art Glass" — clickable banner button, left straight, right slanted */
.lgh-ribbon {
  display: inline-block;
  background: var(--lgh-orange);
  color: #fff !important;
  text-decoration: none;
  font-family: var(--lgh-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  padding: 1.1em 4.5em 1.1em 1.8em;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  filter: drop-shadow(0 4px 0 var(--lgh-orange-dark));
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.15s ease;
}
.lgh-ribbon:hover,
.lgh-ribbon:focus {
  background: var(--lgh-orange-dark);
  transform: translateX(4px);
  filter: drop-shadow(0 5px 0 #a83e1a);
  color: #fff !important;
  text-decoration: none;
}
.lgh-ribbon:active {
  transform: translateX(2px) translateY(2px);
  filter: drop-shadow(0 2px 0 #a83e1a);
}

/* Responsive tweaks */
@media (max-width: 782px) {
  .lgh-feature-row { justify-content: flex-start; }
}

/* ---------- Kadence overrides to match the mockup ---------- */

/* Hide Kadence's default page-title hero on every page, collapsing all its space */
.entry-hero-container-inner,
.entry-hero,
.page-title,
.kadence-title-bar,
.entry-header-wrap,
.entry-header,
.page-hero-section,
.entry-hero-layout-standard,
.entry-hero-layout-inline,
.entry-hero-layout-above,
#inner-wrap > .entry-hero {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Pull the first homepage section up to butt against the header, killing any remaining gap */
body.home .entry-content > .alignfull:first-child,
body.home .wp-site-blocks > .alignfull:first-child {
  margin-top: 0 !important;
}

body.home .site-main,
body.home #content,
body.home #primary,
body.home .content-container-style-unboxed { padding-top: 0 !important; margin-top: 0 !important; }

/* Make the header blend into the cream hero — no hard line, no drop shadow */
.site-header,
.site-header-inner-wrap,
.site-header-wrap,
.site-header-row-container,
.site-header-row-container-inner,
.site-header-main-section-wrap,
.site-main-header-wrap,
.site-header-upper-wrap,
.site-header-lower-wrap,
.site-top-header-wrap,
.site-middle-header-wrap,
.site-bottom-header-wrap,
.site-branding-container,
#masthead,
#masthead > *,
.header-wrap { background: var(--lgh-cream) !important; }

.site-header,
#masthead { border-bottom: 0 !important; box-shadow: none !important; }

/* Kill any gap between the header and the main content */
#masthead { margin-bottom: 0 !important; padding-bottom: 0 !important; }
body.home #content,
body.home #primary,
body.home .site-content { margin-top: 0 !important; padding-top: 0 !important; }

/* Hide the default "transparent header spacer" some Kadence layouts add */
.transparent-header-spacer { display: none !important; }

/* Logo sizing — let the decorative circles hang below the header line */
.site-branding,
.site-branding-container,
.custom-logo-link,
.site-logo { overflow: visible !important; }

.site-branding .custom-logo-link img,
.site-logo img {
  max-height: 150px !important;
  width: auto !important;
  transform: translateY(20px);
  position: relative;
  z-index: 5;
}

/* When a logo image is present, hide the text site title and the star accent */
.site-branding .custom-logo-link + .site-title,
.site-branding:has(.custom-logo-link) .site-title { display: none !important; }

/* Site title styling (until a real logo image is uploaded) */
.site-title a,
.site-branding .site-title a {
  font-family: var(--lgh-font-display) !important;
  font-weight: 700 !important;
  color: var(--lgh-teal) !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
}

/* Yellow star accent after the wordmark */
.site-branding .site-title::after {
  content: "★";
  color: var(--lgh-yellow);
  margin-left: 0.3em;
  font-size: 0.7em;
  vertical-align: top;
}

/* Primary menu typography — playful display font for nav links */
.main-navigation .menu > li > a,
.site-header-item-main-navigation .menu > li > a {
  font-family: var(--lgh-font-display) !important;
  font-weight: 600;
  color: var(--lgh-ink);
}

/* Menu item with class "menu-button-primary" renders as a green pill */
.main-navigation .menu > li.menu-button-primary > a,
.site-header-item-main-navigation .menu > li.menu-button-primary > a {
  background: var(--lgh-teal);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.55em 1.2em !important;
  box-shadow: 0 3px 0 var(--lgh-teal-dark);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.main-navigation .menu > li.menu-button-primary > a:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lgh-teal-dark);
}

/* Remove unnecessary space above the first section of the homepage */
body.home .site-content,
body.home .content-area,
body.home .site-main { padding-top: 0 !important; margin-top: 0 !important; }
body.home .site-main > article > .entry-content > :first-child { margin-top: 0 !important; }

/* Hide the white page-title / hero strip that Kadence draws on the homepage */
body.home .entry-hero-layout-standard,
body.home .entry-hero-layout-inline,
body.home .entry-hero-layout-above,
body.home #inner-wrap > .entry-hero,
body.home .page-hero-section { display: none !important; }

/* Strip default borders off images in homepage sections; keep the rounded corners */
.lgh-section-cream .wp-block-image img,
.lgh-section-cream-deep .wp-block-image img,
.lgh-card .wp-block-image img,
.wp-block-image.has-custom-border img {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure image blocks themselves don't paint a white backdrop */
.wp-block-image,
.wp-block-image figure { background: transparent !important; }

/* ---------- Hero layout tuning: bigger image, overlap with text ---------- */

/* The first cream section on the homepage IS the hero */
body.home .lgh-section-cream {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 0 !important;
  position: relative;
  overflow: visible;
}

/* Pull the image column much larger and let the photo spill over its column */
body.home .lgh-section-cream .wp-block-columns {
  align-items: center;
  gap: 0 !important;
}

body.home .lgh-section-cream .wp-block-column:first-child {
  flex-basis: 42% !important;
  position: relative;
  z-index: 2;
}

body.home .lgh-section-cream .wp-block-column:last-child {
  flex-basis: 58% !important;
  position: relative;
  margin-left: 0;
}

/* Blow the hero image up so it dominates the right side, spilling into the text column */
body.home .lgh-section-cream .wp-block-column:last-child .wp-block-image {
  margin: 0;
}
body.home .lgh-section-cream .wp-block-column:last-child .wp-block-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-left: 0;
  border-radius: 24px;
}

/* Keep each headline line on a single row */
body.home .lgh-section-cream h1 span {
  display: inline-block;
  white-space: nowrap;
}

/* Horizontal divider between headline and tagline */
body.home .lgh-section-cream h1 + p,
body.home .lgh-section-cream .wp-block-heading + .wp-block-paragraph {
  padding-top: 1rem;
  border-top: 2px solid rgba(0,0,0,0.1);
  margin-top: 1rem;
}

/* Tagline styling — bolder, dark blue */
body.home .lgh-section-cream .wp-block-column:first-child p {
  color: #1a2a4a;
  font-weight: 700;
}

/* Kill any stray white strips between full-width sections */
.entry-content > .wp-block-group.alignfull + .wp-block-group.alignfull {
  margin-top: 0 !important;
}
.entry-content { margin-top: 0 !important; padding-top: 0 !important; }

/* Hide Kadence's wrapper borders that can show as thin white strips */
html,
body,
body.home,
#wrapper,
#inner-wrap,
.site,
.site-container,
.site-content,
.content-container,
.site-main,
.site-main > article,
.site-main > article > .entry-content,
.wp-site-blocks { background: var(--lgh-cream) !important; }

/* Collapse outer padding and margins that create white strips on every page */
#wrapper,
#inner-wrap,
.site-container,
.site-content,
.content-container,
.site-main,
.site-main > article,
.site-main > article > .entry-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Force alignfull blocks to butt against each other */
.entry-content > .alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Hide the site footer everywhere */
#colophon,
.site-footer,
footer.site-footer,
.footer-widgets-wrap,
.footer-wrap,
.site-bottom-footer-wrap,
.site-middle-footer-wrap,
.site-top-footer-wrap { display: none !important; }

/* Kill Kadence's boxed-content white card on every page */
.entry.content-bg,
.entry-content-wrap,
.entry-content.single-content,
article.entry {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 782px) {
  body.home .lgh-section-cream .wp-block-column:first-child,
  body.home .lgh-section-cream .wp-block-column:last-child {
    flex-basis: 100% !important;
    margin-left: 0 !important;
  }
  body.home .lgh-section-cream .wp-block-column:last-child .wp-block-image img {
    width: 100%;
    margin-left: 0;
  }
  .lgh-ribbon {
    margin-left: calc(-50vw + 50%);
    padding-left: calc(50vw - 50% + 1rem);
  }
}