/* Acreways Living — Main CSS */

/* ── Base resets ── */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  padding-top: 80px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

section {
  display: block;
}

/* ── Content grid width system (1500px max) ── */
.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1500px;
  --breakout-max-width: 85ch;
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
  width: 100%;
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid> :not(.breakout, .full-width) {
  grid-column: content;
  width: 100%;
  padding-inline: 0;
}

.content-grid>.breakout {
  grid-column: breakout;
}

.content-grid>.full-width {
  grid-column: full-width;
}

/* ── Overflow guard ── */
.aw-about__photo-col,
.aw-about__text-col,
.aw-commit__photo,
.aw-commit__right,
.aw-journey__media,
.aw-journey__steps,
.aw-contact__map,
.aw-contact__info,
.aw-faq__col {
  min-width: 0;
}

/* ── Uniform section vertical spacing ── */
:root {
  --section-pad-y: 3.75rem;
  /* 60px */

  /* Typography tokens */
  --label-size: 14px;
  --label-weight: 700;
  --label-spacing: 0.1em;
  --label-color: #daa520;
  --heading-size: 28px;
  --heading-size-lg: 34px;
  --heading-weight: 700;
  --heading-lh: 1.3;
  --heading-color: #0f2b4c;
  --body-size: 16px;
  --body-lh: 1.6;
  --body-color: #374151;
}

.aw-about,
.aw-commit,
.aw-pillars,
.aw-testimonials,
.aw-gallery,
.aw-faq,
.aw-contact,
.aw-journey__wrap {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* ── Touch targets (excludes carousel dots) ── */
a,
button:not(.aw-testimonials__dot):not(.aw-faq__question) {
  min-height: 24px;
  min-width: 24px;
}

/* ── Focus styles ── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════
   GLOBAL BUTTON SYSTEM
   ═══════════════════════════════════════ */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  background: var(--gold-grad);
  border: none;
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 8px 8px 8px 22px;
  cursor: pointer;
  text-decoration: none;
  align-self: flex-start;
  transition: box-shadow 0.3s;
}

/* Navy fill sweep on hover */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #0f2b4c;
  z-index: 1;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0f2b4c;
  width: 0;
  transition: width 0.45s;
  z-index: 0;
  border-radius: 0 0.75rem 0.75rem 0;
}

.btn-primary:hover::after {
  width: 100%;
}

.btn-primary:hover {
  box-shadow: 0 10px 22px rgba(15, 43, 76, 0.35);
}

/* Label */
.btn-primary .btn-label {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* Circle icon */
.btn-primary .btn-circle {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f2b4c;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  transition: background 0.35s;
}

.btn-primary:hover .btn-circle {
  background: var(--gold-grad);
}

.btn-primary .btn-circle svg {
  width: 15px;
  height: 15px;
  stroke: #ffffff;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.35s;
}

.btn-primary:hover .btn-circle svg {
  transform: rotate(45deg);
}