/* ==========================================================================
   Haagen-Dazs Site CSS (site-wide)
   File: /assets/css/site.css
   ========================================================================== */

/* Google Font (fallback only) */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap");

@font-face {
  font-family: "HurmeGeometric";
  src: url("/assets/fonts/body/HurmeGeometricSans1-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HurmeGeometric";
  src: url("/assets/fonts/body/HurmeGeometricSans1-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HurmeGeometric";
  src: url("/assets/fonts/body/HurmeGeometricSans1-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dazs";
  src: url("/assets/fonts/brand/Dazs.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dazs Script";
  src: url("/assets/fonts/brand/Dazs_Script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --hd-burgundy: #650B32;
  --hd-gold: #D29937;
  --hd-gold-light: #F9E6C3;
  --hd-white: #FFFFFF;

  --hd-cream-bg: #fff8ea;
  --hd-card-bg: #ffffff;
  --hd-border-soft: 1px solid rgba(0,0,0,0.08);
  --hd-shadow-soft: 0 10px 30px rgba(0,0,0,0.08);

  --font-body: "HurmeGeometric", "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Unified light gold band */
  --band-gold-bg: rgba(249, 230, 195, 0.35);

  /* Container padding (site-wide, keeps mobile from feeling stretched) */
  --container-pad: 20px;
  --container-max: 1120px;
}

@media (max-width: 720px) { :root { --container-pad: 16px; } }
@media (max-width: 380px) { :root { --container-pad: 14px; } }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--hd-cream-bg);
  color: var(--hd-burgundy);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.band-gold {
  background: var(--band-gold-bg);
}

.band-gold.band-pad {
  padding: 22px 0 14px;
}

/* ==========================================================================
   Global UI overrides (site-wide)
   - Square cards + square form fields
   - Unified button style (matches your reference button)
   Edit these variables to tweak later.
   ========================================================================== */

:root {
  /* Corners */
  --hd-radius-card: 0px;
  --hd-radius-field: 0px;
  --hd-radius-button: 14px;

  /* Button colors (defaults) */
  --hd-btn-bg: var(--hd-burgundy);
  --hd-btn-border: var(--hd-burgundy);
  --hd-btn-text: var(--hd-white);
  --hd-btn-bg-hover: rgba(101, 11, 50, 0.92);
  --hd-btn-border-hover: rgba(101, 11, 50, 0.92);
}

/* Square cards (site-wide) */
.card,
.hd-card,
.panel,
.box,
.section-card,
.location-card,
.info-card,
.form-card,
.faq-card,
.tile,
.module,
.surface,
.elevated,
[class*='card'],
[class*='panel'] {
  border-radius: var(--hd-radius-card) !important;
}

/* If images are meant to be flush with square cards */
.card img,
.hd-card img,
.location-card img,
.info-card img {
  border-radius: 0 !important;
}

/* Square form fields (site-wide) */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='search'],
input[type='url'],
select,
textarea {
  border-radius: var(--hd-radius-field) !important;
}

/* Unified button style (matches your reference button)
   Applies to buttons, submit inputs, and anchor buttons.
*/
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
a.btn,
.btn,
.button,
.btn-pill,
.btn-primary,
.btn-secondary,
.btn-outline,
.chip
 {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--hd-radius-button) !important;
  background: var(--hd-btn-bg) !important;
  border: 0 !important;
  color: var(--hd-btn-text) !important;
  font-weight: 900;
  text-decoration: none;
  line-height: 1;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: var(--hd-shadow-soft) !important;
}

button:hover,
input[type='button']:hover,
input[type='submit']:hover,
input[type='reset']:hover,
a.btn:hover,
.btn:hover,
.button:hover,
.btn-pill:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.chip:hover {

  background: var(--hd-btn-bg-hover) !important;
}

button:focus,
input[type='button']:focus,
input[type='submit']:focus,
input[type='reset']:focus,
a.btn:focus,
.btn:focus,
.button:focus,
.chip:focus {

  outline: 3px solid rgba(101, 11, 50, 0.18);
  outline-offset: 2px;
}

button:disabled,
input[type='button']:disabled,
input[type='submit']:disabled,
input[type='reset']:disabled,
.btn.disabled,
.btn[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Remove rounding on any elements that were previously overly rounded */
.rounded,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: var(--hd-radius-card) !important;
}

/* Keep hamburger button from inheriting pill styling if you want it square.
   If you prefer the hamburger to remain as-is, leave this block.
*/
.hamburger,
.menu-toggle,
.hd-menu-toggle {
  border-radius: 14px !important;
}