/* Hoot site-wide design tokens — link this from every page */
:root {
  --hoot-max-w: 1180px;   /* container width used by header, footer, all sections */
  --hoot-pad-x: 32px;     /* horizontal section padding (desktop) */
  --hoot-pad-x-mob: 16px; /* horizontal section padding (mobile ≤640px) */
  --hoot-brand: #EE6C4D;
  --hoot-green: #2B6140;
  --hoot-cream: #FDF6EC;
  --hoot-text:  #2A2018;
}

/* Shared base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--hoot-cream); }

/* Container helper — add class="hoot-wrap" to any max-width div */
.hoot-wrap {
  max-width: var(--hoot-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hoot-pad-x);
  padding-right: var(--hoot-pad-x);
}
@media (max-width: 640px) {
  .hoot-wrap {
    padding-left: var(--hoot-pad-x-mob);
    padding-right: var(--hoot-pad-x-mob);
  }
}

/* Hide scrollbar utility */
.hoot-hidescroll { scrollbar-width: none; -ms-overflow-style: none; }
.hoot-hidescroll::-webkit-scrollbar { display: none; }

/* Card hover */
.hoot-card { transition: border-color .15s; }
.hoot-card:hover { border-color: #EE6C4D !important; }

/* Button hovers */
.hoot-btn-primary:hover  { background: #d4583a !important; }
.hoot-btn-outline:hover  { background: #2B6140 !important; color: #fff !important; }
.hoot-btn-cta:hover      { background: #d4583a !important; }
.hoot-btn-free:hover     { background: #FDF6EC !important; }
.hoot-strip-cta:hover    { background: #d4583a !important; }

/* Nav / header */
.h-nav a:hover          { color: #EE6C4D !important; }
.hoot-header-cta:hover  { background: #d4583a !important; }
.hoot-social-btn:hover  { background: #EE6C4D !important; }

/* Responsive: tablet */
@media (max-width: 900px) {
  .foot-grid  { grid-template-columns: 1fr 1fr !important; }
  .hoot-grid  { grid-template-columns: 1fr 1fr !important; }
}

/* Responsive: mobile */
@media (max-width: 640px) {
  .h-inner { padding: 12px 16px !important; }
  .h-nav   { display: none !important; }
  .foot-grid  { grid-template-columns: 1fr !important; }
  .hoot-grid  { grid-template-columns: 1fr !important; }
  .hoot-help-strip { flex-direction: column !important; text-align: center; }
  .hoot-help-strip a { align-self: center; }
}