/*
Theme Name: 2024Custom01
Theme URI:
Author: The House of Masota
Author URI:
Description:
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: 2024custom01
Tags:
*/

/* =============================================================
 * The House of Masota — Header 07
 * Generous · Cream · Sage · Underline · Wishlist · Search input
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- 1 · Tokens --------------------------------------- */

.masota-header {
  --masota-bg: #faf6ec;
  --masota-fg: #1a1612;
  --masota-accent: #506558;
  --masota-hairline: rgba(26, 22, 18, 0.14);
  --masota-hairline-2: rgba(26, 22, 18, 0.22);
  --masota-muted: #8a7f6e;
  --masota-utility-bg: #1a1612;
  --masota-utility-fg: #e8dfc9;

  --masota-pad-y: 26px;
  --masota-pad-x: 40px;
  --masota-mark: 68px;
  --masota-wordmark: 30px;
  --masota-icon: 44px;
  --masota-nav-gap: 38px;
  --masota-brand-gap: 14px;
}

/* ---------- 2 · Layout --------------------------------------- */

.masota-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--masota-bg);
  color: var(--masota-fg);
  font-family: 'Outfit', system-ui, sans-serif;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.masota-utility {
  background: var(--masota-utility-bg);
  color: var(--masota-utility-fg);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 16px;
  line-height: 1;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
  max-height: 36px;
}

.masota-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: var(--masota-pad-y) var(--masota-pad-x);
  border-bottom: 1px solid var(--masota-hairline);
  transition: padding 0.25s ease;
}

.masota-header.is-scrolled .masota-utility {
  max-height: 0;
  padding-block: 0;
  opacity: 0;
}
.masota-header.is-scrolled {
  --masota-pad-y: 16px;
  --masota-mark: 52px;
  --masota-wordmark: 24px;
  --masota-icon: 38px;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.2);
}

/* ---------- 3 · Brand ---------------------------------------- */

.masota-header__brand {
  display: flex;
  align-items: center;
  gap: var(--masota-brand-gap);
  text-decoration: none;
  color: inherit;
}

.masota-header__mark {
  width: var(--masota-mark);
  height: var(--masota-mark);
  display: block;
  transition: width 0.25s ease, height 0.25s ease;
}

.masota-header__wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.masota-header__eyebrow {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(var(--masota-wordmark) * 0.32);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--masota-fg);
  white-space: nowrap;
  line-height: 1;
}

.masota-header__masota {
  font-family: 'Big Shoulders Display', Impact, sans-serif;
  font-weight: 800;
  font-size: var(--masota-wordmark);
  letter-spacing: 0.01em;
  line-height: 0.85;
  color: var(--masota-fg);
  text-transform: uppercase;
}

/* ---------- 4 · Navigation ----------------------------------- */

.masota-header__nav { justify-self: center; }

.masota-nav-list {
  display: flex;
  gap: var(--masota-nav-gap);
  margin: 0; padding: 0;
  list-style: none;
  flex-wrap: nowrap;
  align-items: center;
}

.masota-nav-item {
  position: relative;
}

.masota-nav-link {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.7);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.masota-nav-link:hover { color: var(--masota-fg); }

.masota-nav-link--arrow::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.masota-nav-item.masota-has-mega:hover .masota-nav-link--arrow::after {
  transform: rotate(180deg);
  opacity: 1;
}

.masota-nav-item .masota-nav-link.is-active,
.masota-nav-item .masota-nav-link[aria-current="page"] {
  color: var(--masota-fg);
  border-bottom-color: var(--masota-fg);
}

/* ---------- 5 · Mega dropdown -------------------------------- */

.masota-mega {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 200px;
  background: #faf6ec;
  border-top: 2px solid #506558;
  border-bottom: 1px solid rgba(26, 22, 18, 0.14);
  box-shadow: 0 16px 40px -8px rgba(26, 22, 18, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 200;
}

.masota-nav-item.masota-has-mega:hover .masota-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.masota-mega__inner {
  display: flex;
  gap: 0;
  padding: 28px 32px;
}

.masota-mega__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.masota-mega__col-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.45);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26, 22, 18, 0.1);
}

.masota-mega__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(26, 22, 18, 0.8);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.15s ease, padding-left 0.15s ease;
  white-space: nowrap;
}

.masota-mega__link:hover {
  color: #506558;
  padding-left: 4px;
}

/* ---------- 6 · Icon cluster --------------------------------- */

.masota-header__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.masota-header__icon {
  position: relative;
  width: var(--masota-icon);
  height: var(--masota-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--masota-fg);
  border-radius: 4px;
  cursor: pointer;
  transition: width 0.25s ease, height 0.25s ease, background 0.15s ease;
  text-decoration: none;
}
.masota-header__icon:hover { background: rgba(26, 22, 18, 0.06); }
.masota-header__icon svg { width: 50%; height: 50%; }

.masota-header__badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 17px; height: 17px;
  padding: 0 5px;
  background: var(--masota-accent);
  color: #fff;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.masota-header__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: rgba(26, 22, 18, 0.04);
  border: 1px solid var(--masota-hairline);
  border-radius: 999px;
  color: var(--masota-muted);
  font-size: 13px;
  min-width: 240px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.masota-header__search:focus-within {
  border-color: var(--masota-accent);
  background: #fff;
  color: var(--masota-fg);
}
.masota-header__search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
}
.masota-header__search svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- 7 · Hamburger ------------------------------------ */

.masota-header__menu-toggle {
  display: none;
  width: var(--masota-icon);
  height: var(--masota-icon);
  border: 1px solid var(--masota-hairline-2);
  background: transparent;
  color: var(--masota-fg);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
}

/* ---------- 8 · Responsive ----------------------------------- */

@media (max-width: 1024px) {
  .masota-header {
    --masota-pad-x: 24px;
    --masota-pad-y: 20px;
    --masota-mark: 52px;
    --masota-wordmark: 22px;
    --masota-icon: 40px;
  }
  .masota-header__nav,
  .masota-header__search { display: none; }
  .masota-header__bar { grid-template-columns: auto 1fr auto; }
  .masota-header__menu-toggle { display: inline-flex; }
}

@media (max-width: 600px) {
  .masota-header { --masota-pad-x: 16px; }
  .masota-header__eyebrow { font-size: 8px; }
  .masota-header__masota { font-size: 20px; }
  .masota-utility { font-size: 9.5px; letter-spacing: 0.18em; }
  .masota-header__icon[data-tool="wishlist"] { display: none; }
}


/* =============================================================
 * The House of Masota — Footer (Heritage Wide)
 * ============================================================= */

.masota-footer {
  --mf-bg: #e8dfc9;
  --mf-fg: #1a1612;
  --mf-accent: #506558;
  --mf-hairline: rgba(26, 22, 18, 0.18);
  --mf-muted: rgba(26, 22, 18, 0.65);

  background: var(--mf-bg);
  color: var(--mf-fg);
  border-top: 1px solid var(--mf-hairline);
  font-family: 'Outfit', system-ui, sans-serif;
}

.masota-footer__top {
  padding: 64px 56px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

.masota-footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
}

.masota-footer__mark { width: 56px; height: 56px; display: block; }

.masota-footer__wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.masota-footer__eyebrow {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.masota-footer__masota {
  font-family: 'Big Shoulders Display', Impact, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.85;
}

.masota-footer__tagline {
  margin: 0 0 22px;
  max-width: 360px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mf-fg);
  opacity: 0.7;
}

.masota-footer__col-title {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mf-fg);
  opacity: 0.55;
  margin-bottom: 18px;
}

.masota-footer__col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}

.masota-footer__col a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mf-fg);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.masota-footer__col a:hover { opacity: 1; }

.masota-footer__newsletter {
  display: flex;
  align-items: center;
  background: rgba(26, 22, 18, 0.04);
  border: 1px solid var(--mf-hairline);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  gap: 8px;
  max-width: 420px;
}

.masota-footer__newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--mf-fg);
  font: inherit;
  font-size: 14px;
  height: 44px;
}

.masota-footer__newsletter button {
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  background: var(--mf-accent);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.masota-footer__newsletter button:hover { filter: brightness(1.05); }

.masota-footer__bottom {
  border-top: 1px solid var(--mf-hairline);
  padding: 20px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.masota-footer__legal {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--mf-muted);
}
.masota-footer__legal a { color: inherit; text-decoration: none; }
.masota-footer__legal a:hover { color: var(--mf-fg); }

.masota-footer__socials { display: flex; gap: 8px; }

.masota-footer__social {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--mf-fg);
  border: 1px solid var(--mf-hairline);
  text-decoration: none;
  transition: background 0.15s ease;
}
.masota-footer__social:hover { background: rgba(26, 22, 18, 0.06); }
.masota-footer__social svg { width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .masota-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 56px 32px 32px;
  }
  .masota-footer__brand-block { grid-column: 1 / -1; }
  .masota-footer__bottom { padding: 20px 32px; }
}

@media (max-width: 600px) {
  .masota-footer__top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 24px 32px;
  }
  .masota-footer__bottom {
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}