/*
Theme Name: Bukit Gading
Description: Tema blok untuk Bukit Gading Residence.
Version: 1.0.1
Text Domain: bukit-gading
*/

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("./fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bgr-ink: #1e3228;
  --bgr-green: #244c3b;
  --bgr-muted: #526055;
  --bgr-cream: #f7f4ea;
  --bgr-line: #dddccf;
  --bgr-padding: clamp(20px, 5vw, 76px);
}

html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #a05c39; outline-offset: 4px; }
:where(.bgr-layout, .bgr-header, .bgr-footer) :where(h1, h2, h3, p, figure, .wp-block-columns) { margin: 0; }
.bgr-container { width: min(100% - 2 * var(--bgr-padding), 1280px); margin-inline: auto; }
.bgr-header { border-bottom: 1px solid var(--bgr-line); }
.bgr-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.bgr-wordmark a { display: inline-flex; flex-direction: column; gap: 4px; color: var(--bgr-ink); text-decoration: none; }
.bgr-wordmark strong { font: 400 30px/.82 "Instrument Serif", Georgia, serif; }
.bgr-wordmark small { font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .22em; font-weight: 700; }
.bgr-header .wp-block-navigation { font-size: 14px; font-weight: 600; }
.bgr-header .wp-block-navigation__container { gap: clamp(18px, 3vw, 42px); }
.bgr-header .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 4px; }
.bgr-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bgr-green); }
.bgr-layout h1, .bgr-layout h2 { color: var(--bgr-ink); font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.025em; }
.bgr-layout h1 { font-size: clamp(60px, 7.5vw, 118px); line-height: .86; }
.bgr-layout h2 { font-size: clamp(44px, 5vw, 76px); line-height: .95; }
.bgr-layout .bgr-copy, .bgr-footer .bgr-copy { color: var(--bgr-muted); max-width: 48ch; }
.bgr-layout .bgr-copy { font-size: 17px; }
.bgr-hero { padding-block: clamp(44px, 7.5vw, 118px) clamp(30px, 5vw, 70px); }
.bgr-hero-grid, .bgr-location-grid { gap: clamp(30px, 5.5vw, 90px) !important; }
.bgr-hero-copy, .bgr-location-copy { display: grid; justify-items: start; align-content: center; gap: 22px; }
.bgr-layout .wp-block-buttons { gap: 12px; }
.bgr-hero-copy .wp-block-buttons { margin-top: 6px; }
.bgr-layout .wp-block-button__link, .bgr-header .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--bgr-green);
  border-radius: 5px;
  background: var(--bgr-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}
.bgr-layout .wp-block-button__link:hover, .bgr-header .wp-block-button__link:hover { background: #19382b; border-color: #19382b; }
.bgr-layout .bgr-outline .wp-block-button__link { background: transparent; color: var(--bgr-green); }
.bgr-layout .bgr-outline .wp-block-button__link:hover { background: #e8ebdf; }
.bgr-hero-photo img, .bgr-gate-photo img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 12px; }
.bgr-hero-photo img { aspect-ratio: 1.36; object-position: 54% 50%; }
.bgr-gate-photo img { aspect-ratio: 1.72; }
.bgr-layout figure figcaption { margin: 10px 0 0; font-size: 12px; text-align: left; color: var(--bgr-muted); }
.bgr-facts { border-block: 1px solid var(--bgr-line); gap: 0 !important; }
.bgr-facts .wp-block-column { padding: 19px 22px; }
.bgr-facts .wp-block-column + .wp-block-column { border-left: 1px solid var(--bgr-line); }
.bgr-facts strong { display: block; font: 400 clamp(30px, 3.2vw, 48px)/1 "Instrument Serif", Georgia, serif; }
.bgr-facts .wp-block-column p { font-size: 13px; color: var(--bgr-muted); }
.bgr-section { padding-block: clamp(62px, 8.2vw, 120px); scroll-margin-top: 24px; }
.bgr-house-grid { gap: clamp(32px, 7vw, 112px) !important; }
.bgr-house-copy { display: grid; align-content: start; gap: 20px; }
.bgr-specs { display: grid; gap: 9px; padding-left: 18px; color: var(--bgr-muted); }
.bgr-plan-photo { padding: clamp(16px, 3vw, 30px); background: #fffdf7; border: 1px solid var(--bgr-line); border-radius: 12px; }
.bgr-plan-photo a { display: flex; justify-content: center; }
.bgr-plan-photo img { display: block; width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.bgr-layout .bgr-plan-photo figcaption { text-align: center; }
.bgr-location { background: #e9ede3; }
.bgr-contact { background: #244c3b; color: #f7f4ea; }
.bgr-contact .bgr-label { color: #c9d9bb; }
.bgr-contact h2, .bgr-contact .bgr-copy { color: inherit; }
.bgr-contact-inner { display: grid; gap: 20px; justify-items: start; }
.bgr-contact .wp-block-button__link { background: #f7f4ea; color: var(--bgr-green); border-color: #f7f4ea; }
.bgr-contact .wp-block-button__link:hover { background: #dce6d4; border-color: #dce6d4; }
.bgr-contact .bgr-outline .wp-block-button__link { color: #f7f4ea; border-color: #a1b7a6; }
.bgr-contact .bgr-outline .wp-block-button__link:hover { color: var(--bgr-green); }
.bgr-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-block: 25px; }
.bgr-footer .bgr-copy { font-size: 13px; }
.bgr-footer a { color: var(--bgr-green); text-underline-offset: 3px; }
.bgr-page { padding-block: 54px; }
.bgr-page h1 { margin-block: 0 24px; }

@media (max-width: 781px) {
  .bgr-hero { padding-top: 44px; }
  .bgr-hero-copy { gap: 18px; }
  .bgr-hero-photo img { aspect-ratio: 1.62; }
  .bgr-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bgr-facts .wp-block-column { padding: 15px 8px; }
  .bgr-facts .wp-block-column p { font-size: 12px; }
  .bgr-facts strong { font-size: clamp(26px, 6vw, 34px); }
  .bgr-location .bgr-location-copy { order: -1; }
}

@media (max-width: 620px) {
  .bgr-header-inner { min-height: 64px; gap: 12px; }
  .bgr-header .wp-block-buttons { display: none; }
  .bgr-header .wp-block-navigation__responsive-container-open { display: flex; }
  .bgr-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .bgr-header .wp-block-navigation__responsive-container.is-menu-open { padding: 26px; }
  .bgr-layout h1 { font-size: clamp(57px, 11vw, 70px); }
  .bgr-layout .bgr-copy { font-size: 16px; }
  .bgr-contact .wp-block-buttons { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }