/*
 * utilities.css
 *
 * Layout utilities, grid helpers, buttons, cards.
 *
 * NOTE: CSS custom properties (design tokens) are defined exclusively in
 * custom.css which loads first. The duplicate :root block that previously
 * lived here has been removed — it was overriding custom.css values with
 * slightly different hex codes, causing inconsistent button colours sitewide.
 * Any component here that needs a colour should reference var(--op-*) from
 * custom.css.
 */

html {
  scroll-behavior: smooth;
}

h4 {
  margin-top: 0;
}

.text-white {
  color: #fff !important;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.g-row {
  display: grid;
  width: 100%;
}

.gap-0  { gap: 0; }
.gap-05 { gap: 0.5rem; }
.gap-1  { gap: 1rem; }
.gap-2  { gap: 2rem; }
.gap-3  { gap: 3rem; }
.gap-4  { gap: 4rem; }

.g-row.g-row-auto  { grid-template-columns: auto auto; }
.g-row.g-row-1     { grid-template-columns: repeat(1, 1fr); }
.g-row.g-row-11    { grid-template-columns: 1fr 1fr; }
.g-row.g-row-121   { grid-template-columns: 1fr 2fr 1fr; }
.g-row.g-row-1a1   { grid-template-columns: 1fr auto 1fr; }
.g-row.g-row-12    { grid-template-columns: 1fr 2fr; }
.g-row.g-row-13    { grid-template-columns: 1fr 3fr; }
.g-row.g-row-14    { grid-template-columns: 1fr 4fr; }
.g-row.g-row-15    { grid-template-columns: 1fr 5fr; }
.g-row.g-row-16    { grid-template-columns: 1fr 6fr; }
.g-row.g-row-17    { grid-template-columns: 1fr 7fr; }
.g-row.g-row-2     { grid-template-columns: repeat(2, 1fr); }
.g-row.g-row-21    { grid-template-columns: 2fr 1fr; }
.g-row.g-row-211   { grid-template-columns: 2fr 1fr 1fr; }
.g-row.g-row-23    { grid-template-columns: 2fr 3fr; }
.g-row.g-row-1011  { grid-template-columns: 10fr 1fr 1fr; }
.g-row.g-row-3     { grid-template-columns: repeat(3, 1fr); }
.g-row.g-row-31    { grid-template-columns: 3fr 1fr; }
.g-row.g-row-4     { grid-template-columns: repeat(4, 1fr); }
.g-row.g-row-4-auto{ grid-template-columns: repeat(4, auto); }
.g-row.g-row-48    { grid-template-columns: 4fr 8fr; }
.g-row.g-row-5     { grid-template-columns: repeat(5, 1fr); }
.g-row.g-row-51    { grid-template-columns: 5fr 1fr; }
.g-row.g-row-57    { grid-template-columns: 5fr 7fr; }
.g-row.g-row-64    { grid-template-columns: 6fr 4fr; }
.g-row.g-row-6     { grid-template-columns: repeat(6, 1fr); }

/* Responsive overrides */
@media (max-width: 999px) {
  .g-row.m-row-1 {
    grid-template-columns: 1fr;
  }
  .m-flex-col {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   Flex helpers
   ========================================================================== */

.flex-row    { display: flex; flex-direction: row; }
.flex-col    { display: flex; flex-direction: column; }
.f-wrap      { flex-wrap: wrap; }
.align-center  { align-items: center; }
.align-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.mb-0  { margin-bottom: 0; }
.d-flex { display: flex; }

/* ==========================================================================
   Spacing helpers
   ========================================================================== */

.u-margin-bottom       { margin-bottom: 1.5rem; }
.u-margin-bottom-small { margin-bottom: 0.75rem; }
.u-margin-bottom-large { margin-bottom: 3rem; }
.u-margin-bottom-none  { margin-bottom: 0 !important; }
.u-padding             { padding: 1rem; }
.u-padding-left-none   { padding-left: 0 !important; }
.u-padding-none        { padding: 0 !important; }
.u-text-center         { text-align: center; }
.u-text-upper          { text-transform: uppercase; }
.u-sans-serif          { font-family: 'Open Sans', sans-serif; }
.u-font-weight-light   { font-weight: 300; }
.u-font-color-tertiary { color: var(--op-light-gray); }
.u-1\/1                { width: 100%; }
.u-hidden\@tablet      { display: none; }

@media (min-width: 48em) {
  .u-hidden\@tablet { display: inline-flex; }
  .u-2\/3\@tablet.o-layout__item { width: 66.6666%; }
}

/* ==========================================================================
   Buttons — op-btn system
   ========================================================================== */

.op-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 0;
  line-height: 120%;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.op-btn:hover { color: #fff; }

.op-btn svg {
  transform: translateX(0px);
  transition: transform 250ms;
  font-style: normal;
}

.op-btn:hover svg           { transform: translateX(5px); }
.page-template-newsletter-page .newsletter-card-wrapper .op-btn:hover svg { transform: translate(0, 5px); }

.op-btn--sm { font-size: 1rem; }
.op-btn--md { font-size: 1.1rem; }
.op-btn--lg { font-size: 1.3rem; }
.op-btn--stretch { width: 100%; }

.op-btn--primary   { background: var(--op-green-300); }
.op-btn--secondary { background: var(--op-gray); }

.op-btn--line       { border: 2px solid rgba(255, 255, 255, 0.7) !important; }
.op-btn--line:hover { border: 2px solid #fff; }

.op-btn--link {
  gap: 4px;
  color: #0c0c0c;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
}
.op-btn--link:hover { color: #0c0c0c; }

/* WooCommerce place order button uses design tokens */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  padding: 1rem 2rem !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--op-green-300) !important;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.dsm-card {
  padding: 1.5rem;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
}

.dsm-card__border {
  border: 1px solid var(--op-green-300);
}

/* ==========================================================================
   Account blocks
   ========================================================================== */

.acc-block {
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.acc-block--highlight {
  border-left: 4px solid var(--op-green-400);
}

.acc-block-header {
  background: var(--op-green-50);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--op-dark-gray);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.acc-block-body {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--op-gray);
  flex: 1;
  line-height: 1.6;
}

.acc-block-footer {
  padding: 0.75rem 1.25rem 1.25rem;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.o-list-bare { list-style: none; padding: 0; margin: 0; }
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}