/*
Theme Name: Mulberry Co Live 2026
Theme URI: https://mulberryco.local
Author: Mulberry Co
Description: Custom starter theme for the Mulberry Co website.
Version: 0.1.0
Text Domain: mulberryco
*/

:root {
  --mulberry-deep: #4b5a32;
  --mulberry-light: #91a56e;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--white); background: var(--mulberry-deep); }
a { color: inherit; text-decoration: none; }

/* Disable automatic and discretionary hyphenation throughout the site. */
body, body * {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.site-home { min-height: 100vh; }
.hero, .directory { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; }
.hero { background: var(--mulberry-deep); }
.hero__content { display: grid; gap: 3.4rem; justify-items: center; }
.hero__brand { margin: 0; font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; letter-spacing: .32em; padding-left: .32em; }
.hero__tagline { margin: 0; font-size: clamp(.8rem, 1.3vw, 1.1rem); line-height: 1.7; letter-spacing: .36em; font-weight: 400; }

.directory { background: var(--mulberry-light); }
.directory__content { width: min(100%, 48rem); display: grid; gap: 3rem; justify-items: center; }
.directory__logo { font-size: 1.3rem; letter-spacing: .08em; }
.directory__eyebrow { margin: 0; font-size: .5rem; letter-spacing: .38em; }
.directory__nav { display: grid; gap: 1rem; font-size: 1rem; letter-spacing: .16em; }
.directory__nav a { transition: opacity .2s ease; }
.directory__nav a:hover { opacity: .65; }
.directory__search { display: flex; width: min(100%, 13rem); border: 1px solid rgba(255,255,255,.8); }
.directory__search input { min-width: 0; flex: 1; border: 0; outline: 0; padding: .6rem .7rem; color: #fff; background: transparent; font: inherit; font-size: .75rem; letter-spacing: .08em; }
.directory__search input::placeholder { color: rgba(255,255,255,.65); }
.directory__search button { border: 0; padding: 0 .7rem; color: #fff; background: transparent; cursor: pointer; }
.directory__mark { width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; display: grid; place-items: center; font-size: .55rem; letter-spacing: .08em; }

@media (max-width: 600px) {
  .hero__content { gap: 2.5rem; }
  .hero__brand { font-size: 1.7rem; letter-spacing: .2em; padding-left: .2em; }
  .hero__tagline { letter-spacing: .22em; }
}