/* Enjoy More Freebies This Super Month (/page/enjoy-more-freebies-this-super-month) - 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; }
}


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

/* Banner: a background image on live (#header, min-height 269px, cover).
   Desktop only: the live mobile image never loads (unquoted url() with brackets),
   so below 768px the banner is an empty white band, as on live. */
.promo__banner {
  min-height: 269px;
  background: 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; }

/* Promo table, pasted from Word on live: fixed 787px (live inline width), 3px black cell
   borders, 1px cell padding, the cell paragraphs keep their 16px bottom margin. On phones
   it is wider than the screen and the page scrolls sideways, as on live. */
.freebies { width: 787px; border-collapse: collapse; }
.freebies td { padding: 1px; border: 3px solid #000; }
.freebies col:nth-child(1) { width: 617.156px; }
.freebies col:nth-child(2) { width: 168.844px; }

@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; }
}