/* =====================================================
   METT & Co. Theme — Extra CSS
   Loaded on the frontend AND in the block editor
   ===================================================== */

/* ── Reset / Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: #c8a96e; color: #0a0a0a; }

html { scrollbar-color: #2a2a2a #0a0a0a; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: #444444; }

/* ── Typography ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'New Amsterdam', 'Impact', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #ffffff;
}
p, li, a, button, input, textarea, select {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #111111;
  border-bottom: 1px solid #1c1c1c;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
.site-brand .wp-block-site-title { margin: 0 !important; }
.site-brand .wp-block-site-title a {
  text-decoration: none;
  color: #ffffff;
  font-family: 'New Amsterdam', sans-serif;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-brand .wp-block-site-title a:hover { color: #c8a96e; }

.wp-block-site-logo img {
  display: block;
  max-height: 46px;
  width: auto;
  object-fit: contain;
}
.site-footer .wp-block-site-logo img { max-height: 50px; }

/* When a custom logo is uploaded, hide the text site title (logo replaces it).
   On the frontend WordPress only renders the logo element when one is actually
   uploaded, so nothing extra is needed for the empty state — the upload
   placeholder remains visible and clickable in the Site Editor. */
body.has-custom-logo .site-header .wp-block-site-title,
body.has-custom-logo .site-footer .wp-block-site-title { display: none !important; }

/* ── Navigation ─────────────────────────────────────── */
.wp-block-navigation .wp-block-navigation__container {
  gap: 2.25rem !important;
  flex-wrap: nowrap;
}
.wp-block-navigation .wp-block-navigation-item__content {
  color: #cccccc;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.22s ease;
  padding: 0.3rem 0;
  position: relative;
  white-space: nowrap;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: #c8a96e;
  transition: width 0.28s ease, left 0.28s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
  width: 100%;
  left: 0;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: #ffffff; }

.wp-block-navigation__responsive-container.is-menu-open { background-color: #111111; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { fill: #ffffff; }

/* ── Cover Hero ─────────────────────────────────────── */
.wp-block-cover { background-color: #0a0a0a; }
.wp-block-cover__image-background { object-fit: cover; object-position: center; }
.wp-block-cover video.wp-block-cover__video-background { object-fit: cover; }

/* Full-screen heroes: cap the dim overlay so a background image, GIF, or
   video stays clearly visible behind the headline. Applies whether the
   page content uses dim 30, 55, or anywhere in between. */
.wp-block-cover.alignfull .wp-block-cover__background.has-background-dim {
  opacity: 0.4 !important;
}

/* Case Study project meta strip — defensively flat. No rounded corners,
   no box-shadows, no leftover "halo" shapes from earlier iterations. */
.cmg-case-meta,
.cmg-case-meta *,
.cmg-case-meta .wp-block-column,
.cmg-case-meta .wp-block-column * {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Section transitions are clean, straight horizontal edges — no curves between sections.
   The .cmg-curve-from-hero class is left as an inert hook in the page markup
   in case curves are ever wanted back later. */

/* Hero covers render clean — no decorative overlays on top of the image/video */

/* ── Buttons ────────────────────────────────────────── */
.wp-block-button__link, .wp-element-button {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 !important;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  cursor: pointer;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: #ffffff; border: 1px solid #ffffff;
}
/* !important needed — inline color/background on the buttons would otherwise win */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #ffffff !important; color: #0a0a0a !important;
}
.wp-block-button.is-style-gold .wp-block-button__link {
  background: transparent; color: #c8a96e; border: 1px solid #c8a96e;
}
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background: #c8a96e !important; color: #0a0a0a !important; border-color: #c8a96e !important;
}

/* ── Client Category Cards ──────────────────────────── */
.cmg-client-card {
  background-color: #1e1e1e;
  border: 1px solid #272727;
  border-radius: 6px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cmg-client-card:hover {
  border-color: #c8a96e;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.cmg-client-card .wp-block-list,
.cmg-client-list {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.cmg-client-card .wp-block-list li,
.cmg-client-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #cccccc;
  padding: 0.48rem 0;
  border-bottom: 1px solid #2a2a2a;
  line-height: 1.4;
}
.cmg-client-card .wp-block-list li:last-child,
.cmg-client-list li:last-child { border-bottom: none; }

/* ── Client Portrait ────────────────────────────────── */
.cmg-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  display: block;
  background-color: #1a1a1a;
}

/* ── Fun Facts Grid ─────────────────────────────────── */
.cmg-fun-facts-section .cmg-fun-facts-grid { align-items: stretch !important; }
.cmg-fun-fact-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #1a1a1a;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cmg-fun-fact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* ── Official Website — Simple eyebrow + button ─────── */
.cmg-official-link {
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 2rem;
}
.cmg-official-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8a96e;
  margin: 0 0 1.25rem;
}
.cmg-official-button {
  display: inline-block;
  padding: 1rem 2.75rem;
  border: 1px solid #c8a96e;
  border-radius: 4px;
  color: #c8a96e;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.22s ease, color 0.22s ease;
}
.cmg-official-button:hover {
  background: #c8a96e;
  color: #0a0a0a;
}
/* Hide leftover meta paragraph styling */
.cmg-official-meta {
  display: none !important;
  color: #777777 !important;
  margin: 0 !important;
}

/* ── News / Article Cards (image on top, text below) ── */
.cmg-news-grid { align-items: stretch !important; }
.cmg-news-grid .wp-block-column { display: flex; flex-direction: column; }

.cmg-news-card .cmg-news-card-inner {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #252525;
  border-radius: 6px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cmg-news-card .cmg-news-card-inner:hover {
  border-color: #c8a96e;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.cmg-news-card .wp-block-image { flex-shrink: 0; margin: 0 !important; overflow: hidden; }
.cmg-news-card .wp-block-image img {
  width: 100%; height: 210px; object-fit: cover; object-position: center;
  display: block; transition: transform 0.4s ease; background-color: #1a1a1a;
}
.cmg-news-card .cmg-news-card-inner:hover .wp-block-image img { transform: scale(1.05); }
.cmg-news-card .cmg-news-card-body { flex: 1; display: flex !important; flex-direction: column; }
.cmg-news-card .cmg-news-card-body > .wp-block-buttons { margin-top: auto !important; }
.cmg-news-btn .wp-block-button__link {
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  color: #888888 !important;
  border: 1px solid #393939 !important;
  background: transparent !important;
  padding: 0.5rem 1rem !important;
}
.cmg-news-btn .wp-block-button__link:hover {
  color: #ffffff !important; border-color: #ffffff !important;
}

/* ── Case Study Cover Cards (image background + text overlay) ── */
.cmg-case-studies-grid .wp-block-columns { align-items: stretch; }
.cmg-case-studies-grid .wp-block-column { display: flex; flex-direction: column; }
.cmg-case-card-cover {
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border: 1px solid #252525;
  border-radius: 8px;
  background-color: #1a1a1a;
}
.cmg-case-card-cover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  border-color: #c8a96e;
}
.cmg-case-card-cover .wp-block-cover__image-background {
  transition: transform 0.55s ease;
}
.cmg-case-card-cover:hover .wp-block-cover__image-background {
  transform: scale(1.05);
}
/* Gradient overlay on bottom for legibility */
.cmg-case-card-cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.cmg-case-card-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.cmg-case-card-cover .cmg-case-link a {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.cmg-case-card-cover:hover .cmg-case-link a {
  color: #c8a96e !important;
  border-bottom-color: #c8a96e;
}

/* ── What We Do — Accordion ─────────────────────────── */
.cmg-what-we-do .cmg-accordion summary {
  font-family: 'New Amsterdam', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 3rem;
  transition: color 0.22s ease;
}
.cmg-what-we-do .cmg-accordion summary::-webkit-details-marker { display: none; }
.cmg-what-we-do .cmg-accordion summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #c8a96e;
  transition: transform 0.28s ease, color 0.22s ease;
  line-height: 1;
}
.cmg-what-we-do .cmg-accordion[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: #ffffff;
}
.cmg-what-we-do .cmg-accordion summary:hover { color: #c8a96e; }
.cmg-what-we-do .cmg-accordion[open] summary { color: #c8a96e; }

/* ── Pull Quote ─────────────────────────────────────── */
.cmg-pullquote {
  border-left: 3px solid #c8a96e;
  padding: 0.5rem 0 0.5rem 2rem;
  margin: 3rem 0;
}
.cmg-pullquote blockquote { margin: 0; padding: 0; border: none; }
.cmg-pullquote blockquote p {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.55rem;
  line-height: 1.4;
  font-style: italic;
  color: #ffffff;
  margin: 0;
}
.cmg-pullquote blockquote cite {
  display: block;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #888888;
  font-style: normal;
}

/* ── Contact Form ───────────────────────────────────── */
.cmg-form { width: 100%; }
.cmg-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cmg-form .cmg-form-row { margin-bottom: 1.4rem; }
.cmg-form .cmg-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 600px) {
  .cmg-form .cmg-form-grid-2 { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
  .cmg-form .cmg-form-grid-2 + .cmg-form-grid-2,
  .cmg-form .cmg-form-grid-2 + .cmg-form-row { margin-top: 1.4rem; }
}
.cmg-form label { display: block; width: 100%; }
.cmg-form label > span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8a96e;
  margin-bottom: 0.55rem;
}
.cmg-form label > span em {
  color: #c8a96e;
  font-style: normal;
  margin-left: 0.15rem;
}
.cmg-form input[type="text"],
.cmg-form input[type="email"],
.cmg-form input[type="tel"],
.cmg-form textarea,
.cmg-form select {
  display: block;
  width: 100%;
  padding: 0.95rem 1.05rem;
  background-color: #161616;
  border: 1px solid #2a2a2a;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: border-color 0.22s ease, background-color 0.22s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cmg-form input:focus,
.cmg-form textarea:focus,
.cmg-form select:focus {
  outline: none;
  border-color: #c8a96e;
  background-color: #1a1a1a;
}
.cmg-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.cmg-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c8a96e' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.cmg-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.cmg-form-submit {
  display: inline-block;
  padding: 1rem 3rem;
  background: transparent;
  color: #c8a96e;
  border: 1px solid #c8a96e;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}
.cmg-form-submit:hover { background: #c8a96e; color: #0a0a0a; }
.cmg-form-hint {
  font-size: 0.72rem;
  color: #555555;
  letter-spacing: 0.04em;
}
.cmg-form-hint em { color: #c8a96e; font-style: normal; margin: 0 0.15rem; }

.cmg-form-message {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  border-left-width: 3px;
  border-left-style: solid;
}
.cmg-form-message a { color: inherit; text-decoration: underline; }
.cmg-form-success {
  background-color: rgba(200, 169, 110, 0.08);
  border-left-color: #c8a96e;
  color: #d6bd87;
}
.cmg-form-error {
  background-color: rgba(180, 70, 70, 0.08);
  border-left-color: #b44646;
  color: #d68888;
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer-grid {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  gap: 3rem;
}
.footer-col-brand { flex: 1 1 240px; max-width: 320px; }
.footer-col-office { flex: 1 1 180px; }
.footer-col-links { flex: 1 1 180px; }

.cmg-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.cmg-footer-links li { line-height: 1.4; }
.cmg-footer-links a {
  color: #888888;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: color 0.22s ease;
}
.cmg-footer-links a:hover { color: #ffffff; }

/* ── Social Icons ───────────────────────────────────── */
.wp-block-social-links .wp-social-link {
  background-color: transparent !important;
  border: 1px solid #2e2e2e;
  border-radius: 0 !important;
  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  transition: border-color 0.22s ease, background-color 0.22s ease;
}
.wp-block-social-links .wp-social-link:hover {
  background-color: #c8a96e !important;
  border-color: #c8a96e;
}
.wp-block-social-links .wp-social-link svg { fill: #ffffff; }

/* ── Post / Page Content ────────────────────────────── */
.wp-block-post-content > p {
  color: #cccccc;
  font-size: 1rem;
  line-height: 1.9;
  margin: 0 0 1.4rem;
}
.wp-block-post-content > h2,
.wp-block-post-content > h3 {
  color: #ffffff;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.wp-block-post-content > p > a { color: #c8a96e; text-decoration: underline; text-underline-offset: 3px; }
.wp-block-post-content > p > a:hover { color: #ffffff; }

/* ── Separator ──────────────────────────────────────── */
hr.wp-block-separator { border: none; opacity: 1; }
hr.wp-block-separator.is-style-wide { border-top: 1px solid #1e1e1e; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 781px) {
  .wp-block-columns.is-not-stacked-on-mobile { flex-direction: column !important; }
  .wp-block-column { flex-basis: 100% !important; width: 100% !important; }

  .wp-block-cover { min-height: 65vh !important; }

  .cmg-news-grid,
  .cmg-case-studies-grid .wp-block-columns,
  .cmg-fun-facts-grid,
  .cmg-results-stats { flex-direction: column !important; }

  .cmg-case-card-cover { min-height: 280px !important; }

  .cmg-stats-row .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .cmg-stats-row .wp-block-column {
    border-right: none !important;
    border-bottom: 1px solid #2a2a2a;
  }
  .cmg-stats-row .wp-block-column:nth-child(odd) { border-right: 1px solid #2a2a2a !important; }

  .cmg-case-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .cmg-case-meta .wp-block-column {
    border-right: 1px solid #1c1c1c !important;
    border-bottom: 1px solid #1c1c1c;
    padding: 1.25rem !important;
  }
  .cmg-case-meta .wp-block-column:nth-child(2n) { border-right: none !important; }
  .cmg-case-meta .wp-block-column:last-child { border-bottom: none; }

  .cmg-fun-facts-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem !important;
  }
  .cmg-fun-facts-grid .wp-block-column { width: 100% !important; }

  .site-header-inner {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    gap: 1rem !important;
  }
  .site-brand .wp-block-site-title a { font-size: 1.15rem !important; }
  .wp-block-site-logo img { max-height: 38px !important; }

  .cmg-form-grid-2 { grid-template-columns: 1fr !important; }
  .cmg-form-submit { width: 100%; padding: 1rem 1.5rem; }

  .site-footer-grid { gap: 2.5rem; }
  .footer-col-brand,
  .footer-col-office,
  .footer-col-links { flex: 1 1 100%; max-width: 100%; }

  .cmg-official-domain { font-size: 1.85rem !important; }
}

@media (max-width: 480px) {
  .cmg-stats-row .wp-block-columns,
  .cmg-fun-facts-grid { grid-template-columns: 1fr !important; }
  .cmg-stats-row .wp-block-column,
  .cmg-stats-row .wp-block-column:nth-child(odd) { border-right: none !important; }
  .cmg-case-meta { grid-template-columns: 1fr !important; }
  .cmg-case-meta .wp-block-column { border-right: none !important; }

  .cmg-case-card-cover { min-height: 240px !important; }
  .cmg-case-card-cover .cmg-case-title { font-size: 1.5rem !important; }
}

/* ── Block Editor — dark canvas ─────────────────────── */
.editor-styles-wrapper { background-color: #0a0a0a !important; color: #ffffff !important; }
.editor-styles-wrapper p, .editor-styles-wrapper li { color: #cccccc; }