/*
 * WallartK — Site-wide typography system (2026-04-25 Claude direct)
 *
 * Families: Inter (UI/body) + EB Garamond (display serif)
 * Weights : 400 body / 500 nav/labels/meta / 600 strong/CTA + logo + footer heading
 * Size ladder: 11 · 12 · 13 · 14 · 16 · 18 · 24 · 32 · 48
 *
 * Scope split:
 *   - Site-wide (every page): topbar, logo, primary nav, CTA buttons, footer
 *   - Homepage-only (body.home prefix): hero widgets, section headings, product tiles on home grid
 * This file is enqueued on every page.
 */

:root {
  --wak-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --wak-serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* ============================================================
 * SITE-WIDE — applies on every page (home, shop, product, cart, checkout, blog, etc)
 * ============================================================ */

/* 1. Topbar — quieter, tighter */
.topbar-wrapper,
.top-bar,
.top-bar-left,
.top-bar-center,
.top-bar-right {
  font-family: var(--wak-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* 2. Logo */
.site-branding a,
.site-logo-link,
.custom-logo-link {
  font-weight: 600;
}

/* 3. Primary navigation — professional small-caps */
.main-navigation ul.menu > li > a,
.shoptimizer-primary-navigation .main-navigation a {
  font-family: var(--wak-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.85rem 0.95rem;
  white-space: nowrap;
  color: inherit;
}

.main-navigation ul.menu > li > a:hover {
  opacity: .72;
}

/* Force the nav row onto one line on desktop (now that we stripped 'Wall Art') */
@media (min-width: 1024px) {
  .shoptimizer-primary-navigation .main-navigation ul.menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.25rem;
  }
}

/* Dropdown sub-menu styling to match */
.main-navigation ul.menu ul.sub-menu a,
.main-navigation ul.menu ul.children a {
  font-family: var(--wak-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Secondary nav (utility icons) */
.secondary-navigation a {
  font-family: var(--wak-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* 4. Buttons / CTAs — one consistent style */
.elementor-button,
.button,
button[type="submit"],
.wp-block-button__link,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--wak-sans);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Keep normal button sizing on non-home pages (don't force 13px) */

/* 5. Footer — small-caps headings, body-case links */
footer h3,
footer .widget-title {
  font-family: var(--wak-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.875rem;
}

footer p,
footer li,
footer a {
  font-family: var(--wak-sans);
  font-weight: 400;
  line-height: 1.55;
}

footer .mc4wp-form label {
  font-family: var(--wak-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* 6. Search input */
.site-search input,
.widget_product_search input {
  font-family: var(--wak-sans);
  font-size: 14px;
  font-weight: 400;
}

/* 7. Headings — serif site-wide (brand consistency) */
h1, h2, h3,
.elementor-heading-title,
.woocommerce-products-header__title,
.entry-title,
.product_title {
  font-family: var(--wak-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 { line-height: 1.08; }
h2 { line-height: 1.15; }
h3 { line-height: 1.22; }

/* 8. Body text — Inter baseline */
body, p, li, input, button, select, textarea {
  font-family: var(--wak-sans);
}

/* ============================================================
 * HOMEPAGE-SPECIFIC — body.home prefix
 * ============================================================ */

body.home .elementor-widget-text-editor p,
body.home .entry-content p {
  font-family: var(--wak-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

body.home .elementor-widget-heading + .elementor-widget-text-editor p,
body.home h1 + p {
  font-size: 1.125rem;
  line-height: 1.5;
}

body.home .elementor-button,
body.home .button {
  font-size: 13px;
  padding: 14px 26px;
}

body.home h1,
body.home .elementor-heading-title h1 {
  line-height: 1.05;
  letter-spacing: -0.012em;
}

/* Homepage product tiles */
body.home .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.home .woocommerce ul.products li.product h2,
body.home .woocommerce ul.products li.product h3 {
  font-family: var(--wak-sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

body.home .woocommerce ul.products li.product .price {
  font-family: var(--wak-sans);
  font-size: 13px;
  font-weight: 500;
}

body.home .woocommerce ul.products li.product .posted_in {
  font-family: var(--wak-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
}

/* Strong / bold = 600 (not 700) — prevents the chunky block feel */
strong, b { font-weight: 600; }

/* ============================================================
 * HOMEPAGE VIDEO HERO — cap size for professional feel + CWV
 * (2026-04-25 Claude direct: video was 1410×793 filling the fold)
 * ============================================================ */
body.home .elementor-widget-video,
body.home .e-hosted-video,
body.home .elementor-widget-video video,
body.home .e-hosted-video video {
  max-height: 520px;
  object-fit: cover;
  object-position: center 40%;
}

body.home .elementor-widget-video .elementor-wrapper,
body.home .e-hosted-video .elementor-wrapper {
  max-height: 520px;
  overflow: hidden;
}

/* On narrower viewports, let it shrink further */
@media (max-width: 960px) {
  body.home .elementor-widget-video,
  body.home .e-hosted-video,
  body.home .elementor-widget-video video,
  body.home .e-hosted-video video {
    max-height: 340px;
  }
}

/* ============================================================
 * SEO-friendly section heading tweaks (visible copy stays, but we
 * make sure H2s read better typographically)
 * ============================================================ */

/* ============================================================
 * Video hero centering (2026-04-25)
 * Previous rule capped height but didn't center horizontally.
 * ============================================================ */
body.home .elementor-widget-video,
body.home .e-hosted-video {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-inline: auto !important;
}
body.home .elementor-widget-video video,
body.home .e-hosted-video video {
  margin: 0 auto !important;
  display: block !important;
}
body.home .elementor-widget-video .elementor-wrapper,
body.home .e-hosted-video .elementor-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}

/* ============================================================
 * Video hero — full container width, 480px tall with object-fit cover
 * (2026-04-25 v3: removes the white side-bands, no more constrained box)
 * ============================================================ */
body.home .elementor-widget-video,
body.home .e-hosted-video {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

body.home .elementor-widget-video video,
body.home .e-hosted-video video,
body.home .elementor-widget-video .elementor-wrapper,
body.home .e-hosted-video .elementor-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
}

body.home .elementor-widget-video video,
body.home .e-hosted-video video {
  height: 480px !important;
  object-fit: cover !important;
  object-position: center 50% !important;
  display: block !important;
}

@media (max-width: 960px) {
  body.home .elementor-widget-video video,
  body.home .e-hosted-video video {
    height: 320px !important;
  }
}

/* ============================================================
 * Hero paragraph — wider column to fit on one line on desktop
 * ============================================================ */
body.home .elementor-element-7d7f134 .elementor-widget-container {
  max-width: 820px;
  margin-inline: auto;
}
body.home .elementor-element-7d7f134 p {
  max-width: none !important;
}

/* ============================================================
 * Video hero full-bleed (2026-04-25 v4) — break out of e-con-inner cap
 * ============================================================ */
body.home .elementor-element-da276a0 > .e-con-inner,
body.home .elementor-element-da276a0 .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
}
body.home .elementor-element-da276a0 .elementor-widget-container {
  max-width: 100% !important;
  width: 100% !important;
}
body.home .elementor-element-da276a0 {
  padding: 0 !important;
}

/* H1 + paragraph containers — wide enough to fit single-line */
body.home .elementor-element-6608c4b > .e-con-inner,
body.home .elementor-element-6608c4b .e-con-inner {
  max-width: 1200px;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
body.home .elementor-element-a70757e .elementor-widget-container {
  max-width: 1100px;
  margin-inline: auto;
}
body.home .elementor-element-a70757e .elementor-heading-title {
  max-width: none !important;
}
body.home .elementor-element-7d7f134 .elementor-widget-container {
  max-width: 900px;
  margin-inline: auto;
}
body.home .elementor-element-7d7f134 p {
  max-width: none !important;
  white-space: normal;
}

/* ============================================================
 * Hero H1 — force wide container + balanced wrap (v5)
 * ============================================================ */
body.home .elementor-element-6608c4b,
body.home .elementor-element-6608c4b > .e-con-inner {
  max-width: 100% !important;
}
body.home .elementor-element-a70757e {
  width: 100% !important;
}
body.home .elementor-element-a70757e .elementor-widget-container {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: 1rem;
}
body.home .elementor-element-a70757e .elementor-heading-title {
  font-size: clamp(1.875rem, 3.2vw, 2.75rem) !important;  /* 30px → 44px */
  line-height: 1.1 !important;
  max-width: 1150px !important;
  margin-inline: auto !important;
  text-wrap: balance;
}
body.home .elementor-element-7d7f134 .elementor-widget-container {
  max-width: 1100px !important;
  margin-inline: auto !important;
}
body.home .elementor-element-7d7f134 p {
  text-wrap: balance;
}

/* ============================================================
 * Video hero — native quality, no stretch (2026-04-25 v6)
 * Video is 1280×960 natural. Stretching to 1920px blurred it.
 * Cap at native width; fill gutters with warm paper tone.
 * ============================================================ */
body.home .elementor-element-da276a0 {
  background-color: #F6F1EA !important;
  padding: 0 !important;
}
body.home .elementor-element-da276a0 > .e-con-inner,
body.home .elementor-element-da276a0 .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  background-color: #F6F1EA;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.home .elementor-element-da276a0 .elementor-widget-container {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body.home .elementor-element-da276a0 video,
body.home .e-hosted-video video {
  max-width: 1280px !important;   /* native width, no upscale */
  width: 100% !important;
  height: auto !important;         /* preserve aspect on natural scaling */
  max-height: 480px !important;
  object-fit: cover !important;
  object-position: center 50% !important;
  display: block !important;
  margin: 0 auto !important;
}
@media (max-width: 960px) {
  body.home .elementor-element-da276a0 video,
  body.home .e-hosted-video video {
    max-height: 320px !important;
  }
}


/* ============================================================
 * Featured-in section — cap Etsy logo size
 * ============================================================ */
body.home .elementor-element-3945546a img,
body.home .elementor-element-3945546a .elementor-widget-image img {
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
  max-width: 300px;
  opacity: 0.85;
}
body.home .elementor-element-3945546a .elementor-widget-image {
  text-align: center;
}

/* ============================================================
 * Homepage section headings — unify size (2026-04-25)
 * Browse by Subject / Our Latest / Featured in — all at 28px.
 * H1 (a70757e) excluded via :not().
 * ============================================================ */
body.home .elementor-widget-heading h2,
body.home .elementor-widget-heading h2.elementor-heading-title,
body.home .elementor-widget-heading h3,
body.home .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--wak-serif) !important;
  font-size: 1.75rem !important;         /* 28px */
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.008em !important;
}

/* Hero H1 keeps its larger hero-size (don't let the above override it) */
body.home .elementor-element-a70757e .elementor-heading-title {
  font-size: clamp(1.875rem, 3.2vw, 2.75rem) !important;
  line-height: 1.1 !important;
}

/* Featured-in → Etsy: tight "right above" spacing */
body.home .elementor-element-3945546a .elementor-heading-title {
  margin-bottom: 0.5rem !important;
}
body.home .elementor-element-3945546a .elementor-widget-image {
  margin-top: 0 !important;
}
body.home .elementor-element-3945546a .elementor-widget-spacer {
  display: none !important;  /* kill any spacer widget between heading and logo */
}

/* ============================================================
 * FINAL — homepage section headings normalized (authoritative)
 * ============================================================ */
body.home .elementor-widget-heading > .elementor-widget-container > h2.elementor-heading-title,
body.home .elementor-widget-heading > .elementor-widget-container > h3.elementor-heading-title,
body.home .elementor-widget-heading > .elementor-widget-container > .elementor-heading-title:not(h1) {
  font-family: var(--wak-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.008em !important;
  max-width: none !important;
}
/* Hero H1 keeps its larger size */
body.home .elementor-element-a70757e h1.elementor-heading-title,
body.home .elementor-element-a70757e .elementor-heading-title {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.1 !important;
}

/* Verified Reviews — testimonial H3s should read as body text, not section headings */


/* Verified Reviews testimonials — restore body size, higher specificity */
body.home .elementor-element-56fe7973 .elementor-widget-heading > .elementor-widget-container > h3.elementor-heading-title {
  font-size: 15px !important;
  font-family: var(--wak-sans) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: rgba(252, 250, 247, 0.9) !important;  /* warm-white on dark section */
}
/* Also make the section title + rating stars readable */
body.home .elementor-element-56fe7973 h2.elementor-heading-title {
  color: #FCFAF7 !important;
}
body.home .elementor-element-56fe7973 .elementor-widget-text-editor,
body.home .elementor-element-56fe7973 p {
  color: rgba(252, 250, 247, 0.85) !important;
}