/* =============================================================================
   MEP World Group — Advanced Materials section
   Shared styles for the Graphite and Graphene & Graphene Oxide pages.

   Reproduces the existing site's design language (Raleway type, MEP cyan accent,
   dark slate sections, square cyan buttons with an arrow glyph) in a clean,
   namespaced, self-contained stylesheet — so the new pages match the original
   without loading the archived Divi/WordPress CSS bundle and its cruft.

   Everything is scoped under .mat-* to avoid collisions if these styles are
   ever loaded alongside the original theme.
   ========================================================================== */

:root {
  --mep-cyan:        #44c7f4;  /* primary brand accent (matches #top-menu, buttons) */
  --mep-cyan-hover:  #3288c9;  /* button hover */
  --mep-green:       #b6d957;  /* secondary accent used across the figures */
  --mep-dark:        #2a3a49;  /* header / footer / primary dark section */
  --mep-darker:      #202c37;  /* alternating darker section */
  --mep-ink:         #16212b;  /* deepest background */
  --mep-gray:        #5c5d60;
  --mep-text:        #e9eef2;  /* body text on dark */
  --mep-heading:     #ffffff;
  --mep-muted:       #9fb2bf;  /* secondary / caption text */
  --mep-border:      rgba(255, 255, 255, 0.10);

  --mat-maxw:        1180px;   /* figure / wide content width */
  --mat-textw:       820px;    /* comfortable reading measure */
  --mat-header-h:    72px;

  --mat-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- Base ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.mat-page {
  margin: 0;
  font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--mep-text);
  background: var(--mep-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mat-page a { color: var(--mep-cyan); text-decoration: none; }
.mat-page a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  color: var(--mep-heading);
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1em; }

/* Visually-hidden, still available to assistive tech */
.mat-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.mat-page .mat-skip {
  position: absolute;
  left: 8px; top: -48px;
  z-index: 1100;
  background: var(--mep-cyan);
  color: #06202c;
  padding: 10px 16px;
  border-radius: 2px;
  font-weight: 600;
  transition: top 0.2s var(--mat-ease);
}
.mat-skip:focus { top: 8px; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--mep-cyan);
  outline-offset: 2px;
}

/* ----- Layout -------------------------------------------------------------- */

.mat-container {
  width: 100%;
  max-width: var(--mat-maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.mat-section { padding: clamp(48px, 7vw, 96px) 0; }
.mat-section--dark   { background: var(--mep-dark); }
.mat-section--darker { background: var(--mep-darker); }
.mat-section--ink    { background: var(--mep-ink); }

.mat-prose { max-width: var(--mat-textw); }
.mat-prose--center { margin-inline: auto; text-align: center; }

.mat-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mep-cyan);
  margin-bottom: 0.75rem;
}

.mat-lead { font-size: 1.15rem; color: #f2f6f9; }

/* ----- Header / nav -------------------------------------------------------- */

.mat-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(42, 58, 73, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--mep-border);
}

.mat-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--mat-header-h);
  max-width: var(--mat-maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.mat-header__logo img { height: 34px; width: auto; }

.mat-nav { display: flex; align-items: center; gap: 4px; }

.mat-nav a {
  display: inline-block;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 2px;
}
.mat-nav a:hover { color: var(--mep-cyan); text-decoration: none; }
.mat-nav a[aria-current="page"] { color: var(--mep-cyan); }

.mat-nav__toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
}
.mat-nav__toggle svg { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .mat-nav__toggle { display: inline-flex; }
  .mat-nav {
    position: absolute;
    top: var(--mat-header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--mep-dark);
    border-bottom: 1px solid var(--mep-border);
    padding: 8px 16px 16px;
    display: none;
  }
  .mat-nav.is-open { display: flex; }
  .mat-nav a { padding: 12px 8px; }
}

/* ----- Buttons (mirrors .et_pb_button: square, cyan, arrow glyph) ----------- */

.mat-page .mat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 16px 32px;
  background: var(--mep-cyan);
  color: #06202c;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.3);
  transition: background-color 300ms ease, color 300ms ease, letter-spacing 300ms ease;
}
.mat-btn::after {
  content: "\2192";        /* → arrow, echoes the site's ETmodules "=" glyph */
  font-weight: 400;
  transition: margin-left 300ms ease;
}
.mat-btn:hover {
  background: var(--mep-cyan-hover);
  color: #fff;
  letter-spacing: 1.5px;
  text-decoration: none;
}
.mat-btn:hover::after { margin-left: 0.25em; }

.mat-page .mat-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: 1px solid var(--mep-cyan);
}
.mat-btn--ghost:hover { background: var(--mep-cyan); color: #06202c; }

.mat-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 1.75rem;
}
.mat-btn-row--center { justify-content: center; }

/* ----- Hero ---------------------------------------------------------------- */

.mat-hero {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(68, 199, 244, 0.10), transparent 55%),
    var(--mep-ink);
  padding: clamp(40px, 6vw, 80px) 0 0;
}
.mat-hero__text { max-width: 760px; }
.mat-hero h1 { margin-bottom: 0.35em; }
.mat-hero__sub {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--mep-cyan);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}
.mat-hero__figure { margin-top: clamp(32px, 5vw, 56px); }

/* ----- Figures + lightbox trigger ------------------------------------------ */

.mat-figure {
  margin: 0 auto;
  max-width: var(--mat-maxw);
}
.mat-figure__frame {
  position: relative;
  border: 1px solid var(--mep-border);
  border-radius: 6px;
  overflow: hidden;
  background: #0d161d;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
}
.mat-figure__frame img { width: 100%; }

.mat-figure__expand {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: rgba(13, 22, 29, 0.78);
  border: 1px solid var(--mep-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background-color 200ms ease;
}
.mat-figure__frame:hover .mat-figure__expand,
.mat-figure__expand:focus-visible { opacity: 1; }
.mat-figure__expand:hover { background: var(--mep-cyan); color: #06202c; }
.mat-figure__expand svg { width: 20px; height: 20px; }

/* Touch devices: no hover, so keep the control visible */
@media (hover: none) {
  .mat-figure__expand { opacity: 1; }
}

/* Clickable hotspot over a CTA painted into a figure image. Positioned in
   percentages so it tracks the button as the image scales. */
.mat-figure__hotspot {
  position: absolute;
  display: block;
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 200ms ease, background-color 200ms ease;
}
.mat-figure__hotspot:hover,
.mat-figure__hotspot:focus-visible {
  outline-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.mat-figure figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--mep-muted);
  text-align: center;
  letter-spacing: 0.4px;
}
.mat-figure figcaption b { color: var(--mep-cyan); font-weight: 700; }

/* ----- Lightbox ------------------------------------------------------------ */

.mat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 48px);
  background: rgba(6, 12, 17, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--mat-ease), visibility 220ms;
}
.mat-lightbox.is-open { opacity: 1; visibility: visible; }
.mat-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  transform: scale(0.97);
  transition: transform 220ms var(--mat-ease);
}
.mat-lightbox.is-open .mat-lightbox__img { transform: scale(1); }
.mat-lightbox__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--mep-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.mat-lightbox__close:hover { background: var(--mep-cyan); color: #06202c; }
.mat-lightbox__close svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .mat-lightbox,
  .mat-lightbox__img { transition: none; }
}

/* ----- Stat callouts (echo Divi number counters) --------------------------- */

.mat-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 2rem 0 0;
}
.mat-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mep-border);
  border-left: 3px solid var(--mep-cyan);
  border-radius: 4px;
  padding: 24px 26px;
}
.mat-stat__num {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: 1px;
}
.mat-stat__num span { color: var(--mep-cyan); }
.mat-stat__label {
  margin-top: 0.5rem;
  color: var(--mep-muted);
  font-size: 0.95rem;
}

/* ----- Feature / spec lists ------------------------------------------------ */

.mat-grid {
  display: grid;
  gap: 22px;
  margin-top: 2rem;
}
.mat-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mat-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mep-border);
  border-radius: 6px;
  padding: 28px;
}
.mat-card h3 { margin-top: 0; }
.mat-card__accent { color: var(--mep-cyan); }

.mat-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.mat-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.6em;
}
.mat-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--mep-cyan);
  transform: rotate(45deg);
}
.mat-list--check li::before {
  content: "\2713";
  background: none;
  transform: none;
  top: 0;
  color: var(--mep-green);
  font-weight: 700;
}

/* ----- Technical library --------------------------------------------------- */

.mat-paper {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mep-border);
  border-radius: 6px;
  padding: 26px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.mat-paper:hover { border-color: var(--mep-cyan); transform: translateY(-3px); }
.mat-paper h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.mat-paper p { color: var(--mep-muted); flex: 1; }
.mat-paper__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.mat-paper__link::after { content: "\2192"; }  /* → request via email */

/* ----- CTA band ------------------------------------------------------------ */

.mat-cta {
  background:
    linear-gradient(180deg, rgba(68, 199, 244, 0.08), transparent),
    var(--mep-dark);
  text-align: center;
}
.mat-cta h2 { margin-bottom: 0.5rem; }

/* ----- Footer -------------------------------------------------------------- */

.mat-footer {
  background: var(--mep-dark);
  border-top: 1px solid var(--mep-border);
  padding: 48px 0 28px;
  font-size: 0.92rem;
  color: var(--mep-muted);
}
.mat-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: flex-start;
  justify-content: space-between;
}
.mat-footer img { height: 40px; width: auto; margin-bottom: 8px; }
.mat-footer a { color: var(--mep-text); }
.mat-footer__contact p { margin: 0 0 0.35em; }
.mat-footer__bottom {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--mep-border);
  font-size: 0.82rem;
}

/* ----- Scroll-reveal animation (progressive enhancement) ------------------- */

.mat-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--mat-ease), transform 700ms var(--mat-ease);
  will-change: opacity, transform;
}
.mat-reveal.is-visible { opacity: 1; transform: none; }

/* If JS is off, never hide content. The .js flag is set by materials.js. */
html:not(.js) .mat-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mat-reveal { opacity: 1; transform: none; transition: none; }
}