/* SMACtober Pantry Picks (/page/smactober-pantry-picks) - static rebuild (shared header/footer with the other digiweb.smac.ph clones) */

/* The original declares each file as its own family with no weight descriptor;
   kept the same so the browser's weight rendering matches. */
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/NunitoSans-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans Bold";
  src: url("assets/fonts/NunitoSans-Bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  --font: "Nunito Sans", sans-serif;
  --font-bold: "Nunito Sans Bold", sans-serif;
  --text: #282828;
  --muted: #6c757d;
  --link: #00589d;
  --blue: #007bff;
  --nav-active: #468dd8;
  --nav-text: #242424;
  --footer-link: #585858;
  --light: #f8f9fa;
  --border: #dee2e6;
  --red: #dc3545;
  --dark: #343a40;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 75px 0 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
}

h1, h2, h3, h4, h5, p, figure { margin: 0; }
img { vertical-align: middle; border-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 400; }
button { font: inherit; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  height: 76px;
  padding: 5px 16px 0;
  background: #fff;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 71px;
}
.topbar__brand { display: flex; align-items: center; }
.topbar__brand img { display: block; }
.menu-toggle { display: none; }

.menu { display: flex; align-items: center; flex: 1; height: 100%; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.menu__main { height: 100%; margin-right: auto !important; }
.menu__main > li { height: 100%; position: relative; }
.menu__main > li > a,
.menu__main .dropdown-toggle {
  display: block;
  height: 100%;
  margin: 0 16px;
  padding: 22.4px 11.2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--nav-text);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.menu__main > li > a:hover { text-decoration: none; color: var(--nav-active); }
.menu__main > li > a.is-active,
.menu__main .dropdown-toggle.is-active { color: var(--nav-active); border-bottom-color: #156bd5; }
.dropdown-toggle svg { margin-left: 10px; vertical-align: 0; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 16px;
  min-width: 15rem;
  padding: 8px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  z-index: 10;
}
.has-dropdown.is-open .dropdown { display: block; }
.dropdown a { display: block; padding: .5rem 1.5rem; color: #212529; font-weight: 400; }
.dropdown a:hover { background: var(--light); text-decoration: none; }

.menu__account { margin-left: auto; }
@media (min-width: 1200px) {
  .menu .menu__account { align-items: flex-start; margin-top: -1px; }
}
.link-btn {
  display: inline-block;
  margin: 8px 8px 0 4px;
  padding: 6px 12px;
  color: var(--blue);
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 4px;
}
.link-btn--reg { margin-bottom: 4px; }
.login-btn {
  display: inline-block;
  margin: 4px;
  padding: 8px 48px;
  color: #fff;
  font-weight: 400;
  background: var(--link);
  border: 1px solid transparent;
  border-radius: 160px;
}
.login-btn:hover { text-decoration: none; filter: brightness(1.1); }

.search { position: relative; width: 37px; height: 38px; }
.search input {
  width: 100%; height: 100%;
  padding: 6px 25px 6px 12px;
  font: inherit; font-weight: 400;
  color: #495057;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.search input::placeholder { color: transparent; }
.search input:focus {
  position: absolute; right: 0; width: 220px;
  border: 1px solid #ced4da; background: #fff; cursor: text; outline: 0;
}
.search input:focus::placeholder { color: #6c757d; }
.search__icon { position: absolute; right: 8px; top: 10px; pointer-events: none; color: var(--text); }


/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 48px 0; margin-top: 0; }
.footer--spaced { margin-top: 48px; }
.footer__grid { display: flex; margin: 0 -15px; }
.footer__grid > * { padding: 0 15px; }
.footer__brand { width: 33.3333%; order: 1; }
.footer__brand p { margin-bottom: 16px; }
.footer__apps { margin-top: 24px; }
.footer__apps a:first-child { margin-right: 4px; }
.footer__copy { margin-top: 24px; }
.muted { color: var(--muted); }
small { font-size: 14.4px; font-weight: 400; }
.footer__col { width: 16.6667%; order: 2; }
.footer__title { font-family: var(--font-bold); font-weight: 700; }
.footer__col nav { display: flex; flex-direction: column; margin-bottom: 24px; }
.footer__col nav a { padding: 6px 0; color: var(--footer-link); }
.social { display: flex; align-items: center; height: 32px; margin-top: 48px; padding-top: 24px; box-sizing: content-box; color: var(--dark); }
.social a { color: var(--dark); display: block; line-height: 0; }
.social a:first-child { margin-right: 16px; }


/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .container { max-width: 960px; }
  .topbar .container { max-width: 960px; padding: 0; }
  .menu-toggle {
    display: block;
    margin-right: 8px;
    padding: 4px 0;
    border: 0; background: none; cursor: pointer;
  }
  .menu {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 16px 16px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
  }
  .menu.is-open { display: flex; }
  .menu ul { flex-direction: column; align-items: stretch; height: auto; }
  .menu__main > li > a, .menu__main .dropdown-toggle { margin: 0; padding: 12px 0; text-align: left; width: 100%; }
  .dropdown { position: static; border: 0; }
  .menu__account { margin-left: 0; }
  .search { width: 100%; margin-top: 8px; }
  .search input { border: 1px solid #ced4da; cursor: text; }
}

@media (max-width: 991.98px) {
  .container { max-width: 720px; }
}

@media (max-width: 767.98px) {
  .container { max-width: 540px; }
  body { margin-top: 60px; }
  .topbar { height: 64px; }
  .topbar__inner { height: 55px; }
  .menu { top: 64px; }
  .footer { text-align: center; }
  .footer__grid { flex-wrap: wrap; }
  .footer__col { width: 50%; }
  .footer__col--help { margin-bottom: 48px; }
  .social { margin-top: 0; padding-top: 0; justify-content: center; }
  .footer__brand { width: 100%; order: 5; padding-top: 2px; }
}

@media (max-width: 575.98px) {
  .container { max-width: none; }
  /* Live has no container max-width below 576px; without this the fixed top bar centres a 960px box
     when the wide offer table makes Chromium's mobile layout viewport wider than the screen. */
  .topbar .container { max-width: none; }
}


/* ---------- Promo page (/page/<slug>) ---------- */
main { min-height: 400px; }

/* Banner: a background image on live (#header, min-height 269px, cover). */
.promo__banner {
  min-height: 269px;
  background: url("assets/img/banner-mobile.jpg") no-repeat center center / cover;
}
@media (min-width: 768px) {
  .promo__banner { background-image: url("assets/img/banner.jpg"); }
}

.promo__content { padding-top: 48px; }
.promo__title {
  margin-bottom: 8px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}
.promo__body p { margin-bottom: 16px; }
.promo__body ul { margin: 0 0 16px; padding-left: 40px; }

/* Offer table, pasted from Word on live: fixed 1062px wide (wider than a phone, so the
   page scrolls sideways there, as on live), 3px black cell borders, 1px cell padding,
   column widths from the live inline styles. The Duration column and the head row are centred. */
.offers {
  width: 1062px;
  border-collapse: collapse;
}
.offers td { padding: 1px; border: 3px solid #000; }
.offers td:nth-child(1) { width: 734.271px; }
.offers td:nth-child(2) { width: 326.729px; text-align: center; }
.offers__head td { text-align: center; }

/* Closing banner: shown at its natural 1083px width on live, never scaled down. */
.promo__cta { max-width: none; }

@media (max-width: 767.98px) {
  .promo__content { padding-top: 24px; text-align: center; }
  .promo__body { padding: 0 24px; }
}
/* The live CSS shrinks h2 to 1.6rem at <=400px. */
@media (max-width: 400px) {
  .promo__title { font-size: 25.6px; }
}