/*
 * Harry Morley Toolkit — shared tokens.
 *
 * Values read off the live site so a toolkit section sits beside a Woodmart
 * section without a seam: Urbanist 900 headings, Poppins body, the gold accent,
 * and the theme's pill button with its circular arrow badge.
 *
 * Overridable from Settings → Harry Morley, and per widget in Elementor.
 */

:root {
  --hm-gold: #C1AB6D;
  --hm-gold-dark: #9C844A;
  --hm-gold-tint: #F7F3E9;
  --hm-ink: #242424;
  --hm-ink-soft: #5C5C56;
  --hm-body: #767676;
  --hm-panel: #F5F5F5;
  --hm-line: #E8E6E0;
  --hm-hair: #D8D5CC;
  --hm-paper: #FFFFFF;

  --hm-display: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --hm-text: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --hm-radius: 4px;
  --hm-pill: 40px;
  --hm-section: clamp(60px, 8vw, 110px);
}

/*
 * Specificity rules for the whole toolkit — read before adding a selector.
 *
 * 1. The reset below is wrapped in :where(), so it weighs exactly one class
 *    (.hmt) whatever it targets. Any component rule written after it wins by
 *    source order alone. Before this, `.hmt a` (0,1,1) outranked every
 *    `.hmt-btn--*` colour (0,1,0) and turned all button text grey.
 * 2. Anything that renders an <a>, <button> or form control is contested by
 *    the theme and plugins — Elementor's `.elementor a {box-shadow:none}`
 *    (0,1,1), Woodmart's `:is(.btn,.button,button,[type=submit])` (0,1,0) and
 *    Gravity Forms' theme framework (0,4,0). Those rules are prefixed with
 *    `.hmt ` to reach (0,2,0) or more, and set every property the theme sets.
 * 3. Plain layout (divs, spans, grids) is not contested and stays one class.
 */

/* Reset only inside toolkit sections, so nothing leaks into theme markup. */
.hmt { box-sizing: border-box; color: var(--hm-body); font-family: var(--hm-text); line-height: 1.65; }
.hmt :where(*, *::before, *::after) { box-sizing: inherit; }
.hmt :where(img) { max-width: 100%; display: block; }
.hmt :where(h1, h2, h3, h4) {
  font-family: var(--hm-display);
  font-weight: 900;
  color: var(--hm-ink);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.hmt :where(p) { margin: 0; }
.hmt :where(a) { color: inherit; }
.hmt :where(:focus-visible) { outline: 2px solid var(--hm-gold); outline-offset: 3px; }

/* Section shell */
.hmt-sec { padding-block: var(--hm-section); }
/*
 * Matches the theme's own content width (Woodmart site_custom_width = 1350), so
 * a toolkit section lines up with the header, the pre-footer and everything
 * else on the page instead of sitting in a narrower column of its own.
 *
 * width:100% is load-bearing. Inside a grid or flex parent — the hero is a grid
 * — `margin-inline:auto` beats the default `stretch` and the box collapses to
 * shrink-to-fit, which had the hero rendering 733px wide in a 1440px window.
 */
.hmt-wrap {
  width: 100%;
  max-width: 1350px;
  margin-inline: auto;
  padding-inline: 15px;
}
.hmt-narrow { max-width: 820px; }

/* Section heading block — the intro paragraph, never the eyebrow above it. */
.hmt-head { max-width: 700px; margin-bottom: clamp(34px, 5vw, 54px); }
.hmt-head h2 { font-size: clamp(2rem, 4.8vw, 3.2rem); margin: 14px 0 16px; }
.hmt-head p:not(.hmt-label) { font-size: 17px; font-weight: 300; color: var(--hm-ink-soft); }

/* Eyebrow */
.hmt .hmt-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-gold-dark);
}

/*
 * Buttons — the theme's pill with its circular arrow badge.
 *
 * One component for every call to action in every section. Set a variant with
 * hmt-btn--primary | --line | --glass | --dark; each variant only changes the
 * four custom properties, so a new variant is four lines.
 */
.hmt .hmt-btn {
  --hm-btn-bg: var(--hm-gold);
  --hm-btn-bg-hover: var(--hm-gold-dark);
  --hm-btn-fg: #fff;
  --hm-btn-ring: transparent;
  --hm-btn-ring-hover: transparent;
  --hm-btn-ico: rgba(255, 255, 255, 0.22);

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: auto;
  height: auto;
  min-height: 54px;
  margin: 0;
  padding: 9px 9px 9px 26px;
  border: 0;
  border-radius: var(--hm-pill);
  background: var(--hm-btn-bg);
  color: var(--hm-btn-fg);
  box-shadow: inset 0 0 0 1px var(--hm-btn-ring);
  cursor: pointer;
  font-family: var(--hm-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.hmt .hmt-btn:hover,
.hmt .hmt-btn:focus-visible {
  background: var(--hm-btn-bg-hover);
  color: var(--hm-btn-fg);
  box-shadow: inset 0 0 0 1px var(--hm-btn-ring-hover);
  text-decoration: none;
}
.hmt .hmt-btn__ico {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hm-btn-ico);
  color: inherit;
}
.hmt .hmt-btn__ico svg { width: 14px; height: 14px; }

.hmt .hmt-btn--line {
  --hm-btn-bg: transparent;
  --hm-btn-bg-hover: transparent;
  --hm-btn-fg: var(--hm-ink);
  --hm-btn-ring: var(--hm-hair);
  --hm-btn-ring-hover: var(--hm-ink);
  --hm-btn-ico: rgba(0, 0, 0, 0.05);
}
.hmt .hmt-btn--glass {
  --hm-btn-bg: rgba(255, 255, 255, 0.12);
  --hm-btn-bg-hover: rgba(255, 255, 255, 0.24);
  --hm-btn-fg: #fff;
  --hm-btn-ring: rgba(255, 255, 255, 0.34);
  --hm-btn-ring-hover: rgba(255, 255, 255, 0.6);
  --hm-btn-ico: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hmt .hmt-btn--dark {
  --hm-btn-bg: var(--hm-ink);
  --hm-btn-bg-hover: #000;
  --hm-btn-fg: #fff;
  --hm-btn-ico: rgba(255, 255, 255, 0.16);
}
.hmt .hmt-btn--block { display: flex; width: 100%; }

.hmt-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/*
 * Framed band — the rounded hairline box round a gallery, logo row or any
 * non-toolkit widget. Add `hmt-frame` under Advanced → CSS Classes on the
 * Elementor container instead of setting border, radius, padding and width by
 * hand on each page.
 */
.e-con.hmt-frame,
.hmt-frame {
  width: 100%;
  max-width: 1350px;
  margin: clamp(40px, 5vw, 60px) auto;
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 30px;
  background: var(--hm-paper);
}
.e-con.hmt-frame > .e-con-inner { padding: 0; }

/* Theme-independent visually-hidden text for the star rating. */
.hmt .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Editor-only notice for a section that hides itself on the live page */
.hmt-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  border: 1px dashed var(--hm-hair);
  background: var(--hm-gold-tint);
  font-family: var(--hm-text);
  font-size: 13px;
  color: var(--hm-ink-soft);
}
.hmt-hint strong { font-family: var(--hm-display); font-size: 15px; color: var(--hm-ink); }

@media (max-width: 600px) {
  .hmt-wrap { padding-inline: 20px; }
}