/* ==============================
   MAA Brand Style Guide (Digital)
   Based on MAA Brand Guidelines – May 2022
   ============================== */

/* ---------- BRAND COLORS ---------- */
:root {
  --maa-orange: #D04716;       /* Accessible orange for CTAs, icons, and accents */
  --maa-dark-blue: #050F32;    /* Primary headline color */
  --maa-medium-gray: #6F716F;  /* Primary body text */
  --maa-light-gray: #E2DFDC;   /* Light background or border */
  --maa-white: #FFFFFF;    /* Neutral background */
  --maa-white: #FFFFFF;        /* Base white */
}

/* ---------- TYPOGRAPHY ---------- */
/* Web fonts should load Suisse Works and Suisse Int’l.
   If unavailable, fallbacks use Georgia and Helvetica Neue. */

@font-face {
  font-family: 'Suisse Works';
  src: url('../fonts/SuisseWorks-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Suisse Int’l';
  src: url('../fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Suisse Int’l';
  src: url('../fonts/SuisseIntl-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Suisse Int’l';
  src: url('../fonts/SuisseIntl-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

/* ---------- TEXT STYLES ---------- */
body {
  font-family: 'Suisse Int’l', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: var(--maa-medium-gray);
  background-color: var(--maa-off-white);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Headlines */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Suisse Works', Georgia, serif;
  color: var(--maa-dark-blue);
  margin-top: 0;
}

/* Body text */
p, li {
  font-family: 'Suisse Int’l', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: var(--maa-medium-gray);
  line-height: 1.7;
}

/* Emphasis */
strong, b {
  font-weight: 600;
}

/* Links and CTAs */
a {
  color: var(--maa-orange);
  text-decoration: none;
  font-weight: 400;
}
a:hover, a:focus {
  text-decoration: underline;
  color: var(--maa-dark-blue);
}

/* Buttons */
.button, button {
  background-color: var(--maa-orange);
  color: var(--maa-white);
  font-family: 'Suisse Int’l', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.button:hover, button:hover {
  background-color: var(--maa-dark-blue);
}

/* Background variations */
.bg-dark {
  background-color: var(--maa-dark-blue);
  color: var(--maa-white);
}
.bg-light {
  background-color: var(--maa-off-white);
  color: var(--maa-medium-gray);
}

/* Accessibility tip: maintain minimum 4.5:1 contrast ratio */

/* ---------- PRODUCT CARD TEXT CENTERING ---------- */

/* Wrap text block in flex column (if not already) */
.card-text-wrapper,
.product-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center within flex container if needed */
    align-items: center;    /* horizontal center */
    text-align: center;     /* center multi-line text */
    width: 100%;
}

/* ---------- TITLE ---------- */
.product-title,
.card-title,
.product h3 {
    font-family: 'Suisse Works', Georgia, serif;
    color: var(--maa-dark-blue);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    text-align: center;     /* ensures multi-line titles are centered */
}

/* ---------- SUBTITLE / DESCRIPTION ---------- */
.product-description,
.card-subtitle,
.product p {
    font-family: 'Suisse Int’l', Arial, sans-serif;
    color: var(--maa-medium-gray);
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 1rem;
    text-align: center;     /* center multi-line subtitles */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* optional: limit to 3 lines */
    -webkit-box-orient: vertical;
    flex-grow: 1;             /* pushes button to bottom if using flex layout */
}

/* ---------- BUTTON ---------- */
.product .btn,
.product a.button,
.product button {
    align-self: center;      /* horizontally center button */
    margin-top: auto;        /* keep button at bottom of card */
}

/* --- THEME OVERRIDES --- */
#headerContainer {
    padding: 0 !important;
    max-width: none !Important;
    background: #0b1332;
}

.logo-space, .search-box {
  padding: 16px;
}

.nav--user, search-box {
    padding-right: 16px;
}

.search-box, .nav--site {
    background: #ffffff;
}

header.header--site .cart-indicator a:link, header.header--site a.btnGoLogin {
    color: #fff !important;
}

.nav-list a, h2, .slide__message p {
    color: #0b1332 !important;
}

.nav-list a:hover,
.product__ordering button {
    color: #cf4a27 !important;
}

@media (min-width: 425px) {
     header.header--site .nav--site .nav-list li {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 1024px) {
    header.header--site .logo-space {
        padding: 16px 16px 0 !important;
    }

    header.header--site .nav--site,
    header.header--site .search-box {
        padding: 8px 16px !important
    }
}

.container {
  max-width: none !important;
}

.slide__contents a.button {
    background: #cf4a27 !important;
    border-color: #cf4a27 !important;
}

.category-display--homepage .category figcaption a:link,
.category-display--homepage .category figcaption a:visited,
.product__name a,
.product__details li,
h1, h2 {
    color: #0b1332;
}

.product__details *,
.product__details,
.form .datum label {
    color: #0b1332 !important;
}

.category-display--homepage .category figcaption {
    margin: 0.75rem auto;
}