/* =========================================================
   IZZCOZY SHARED SITE STYLES
   Used by every page: colors, shell, header, navigation,
   shared headings, footer, mobile menu, and gallery hero.
   ========================================================= */

:root {
  --linen: #f8f5f1;
  --sage: #b7c8b5;
  --rose: #e7cfcb;
  --berry: #7b7a58;
  --accent: #e7cfcb;
  --charcoal: #6F5A52;
  --paper: #fffefa;
  --border: #dfd7cf;
  --muted: #756e70;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--charcoal);
  background: var(--linen);
  font-family: "Quicksand", Arial, sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid #3e83bd;
  outline-offset: 3px;
}

.site-shell {
  min-height: 100vh;
}

.site-header {
  min-height: 68px;
  padding: 12px clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "Dancing Script", cursive;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.wordmark-name {
  color: var(--berry);
}

.wordmark-dot {
  color: #e09888;
}

.site-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--berry);
  font-size: 14px;
  font-weight: 700;
}

.studio-quick-link {
  margin-left: auto;
  color: #7b7a58;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.studio-quick-link:hover {
  color: #d59b82;
}

.main-nav {
  padding: 16px clamp(18px, 4vw, 55px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
  overflow-x: auto;
  background: var(--sage);
  border-bottom: 1px solid #aabca8;
  scrollbar-width: none;
}

.main-nav a {
  flex: 0 0 auto;
  position: relative;
  color: var(--charcoal);
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--linen);
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--linen);
  border-radius: 2px;
}

.menu-toggle {
  width: 100%;
  padding: 10px 10px 10px 20px;
  display: none;
  color: #ffffff;
  background: #b7c8b5;
  border: 0;
  font-size: 1.9rem;
  text-align: left;
  cursor: pointer;
}

.page-heading {
  max-width: 1280px;
  margin: 0 auto;
  padding: 35px clamp(20px, 4vw, 64px) 22px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--berry);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.page-heading > p:last-child {
  margin: 11px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.breadcrumb {
  margin: 0 0 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.breadcrumb a {
  color: var(--berry);
}

.breadcrumb b {
  color: var(--charcoal);
  font-weight: 600;
}

/* Shared by Studio galleries, category pages, and tools pages. */
.gallery-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 24px 48px;
  text-align: center;
}

.gallery-hero h1 {
  max-width: 800px;
  margin: 0 auto;
}

.gallery-hero > p:last-child {
  max-width: 740px;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

footer {
  margin-top: auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  color: #ffffff;
  background: #b7c8b5;
  border-top: none;
  text-align: center;
}

footer p {
  margin: 0;
}

footer b {
  color: var(--berry);
}

footer .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

footer .social-icons a {
  margin: 0;
  color: #ffffff;
  text-decoration: none;
}

footer .social-icons a:hover {
  color: #e7cfcb;
}

/* Keep placeholders hidden until real advertisements are added. */
.ad-slot,
.ad-space,
.ad-placeholder {
  display: none !important;
}

#share-button {
  display: none;
}

@media (max-width: 800px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    flex-direction: column;
  }

  .main-nav.show {
    display: flex;
  }
}

@media (max-width: 620px) {
  .site-header > div span {
    display: none;
  }

  .page-heading {
    padding-top: 27px;
  }

  .main-nav {
    justify-content: flex-start;
  }

  .gallery-hero {
    padding-top: 42px;
  }

  footer {
    flex-direction: column;
  }
}