/*
Theme Name: Microscopy News
Theme URI: https://microscopynews.com
Author: Microscopy News
Description: A custom block theme for Microscopy News — an editorial science publication. Fraunces + Inter typography on a warm, earthy palette. Built as a full-site-editing block theme.
Version: 1.3.5
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mnews
*/

/* Block themes are styled via theme.json. This file carries the theme header
   and a few progressive-enhancement rules the editor UI can't express. */

/* Wordmark lockup — used in header/footer template parts */
.mn-wordmark { line-height: .9; text-decoration: none; display: inline-block; }
.mn-wordmark .mn-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 640;
  letter-spacing: -0.012em;
  color: var(--wp--preset--color--ink);
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
}
.mn-wordmark .mn-tag {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--wp--preset--color--clay);
  font-size: 0.62rem;
  margin-top: 0.4rem;
  display: block;
}
.mn-wordmark:hover .mn-name { color: var(--wp--preset--color--ink); }

/* Inline single-line lockup for the footer */
.mn-wordmark-inline {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.mn-wordmark-inline .mn-tag {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.55em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wp--preset--color--clay);
  margin-left: 0.4em;
  vertical-align: 1px;
}

/* ROCA-style phone launcher (front page) */
.mn-masthead { text-align: center; padding: 24px 0 8px; }
.mn-mh-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--wp--preset--color--clay); margin-bottom: 22px;
}
.mn-mh-badge span {
  font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 38px;
  color: var(--wp--preset--color--paper); line-height: 1; margin-top: -3px;
}
.mn-mh-name { line-height: .86; }
.mn-mh-name .n {
  font-family: "Fraunces", Georgia, serif; font-weight: 640;
  font-size: clamp(40px, 8vw, 64px); letter-spacing: -.015em;
  color: var(--wp--preset--color--ink); display: block;
}
.mn-mh-name .t {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(12px, 2.5vw, 15px); letter-spacing: .34em; text-transform: uppercase;
  color: var(--wp--preset--color--clay); margin-top: 12px; display: block;
}
.mn-tagline {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 340;
  font-size: clamp(18px, 2.6vw, 23px); color: var(--wp--preset--color--ink-soft); margin-top: 26px;
}
.mn-phones {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 34px;
  padding: 48px 0 8px;
}
.mn-tile {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; width: 230px; transition: transform .2s ease;
}
.mn-tile:hover { transform: translateY(-6px); }
.mn-tile-badge { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; }
.mn-tile-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto;
}
.mn-tile-mark svg { width: 20px; height: 20px; display: block; }
.mn-tile-plat {
  display: inline-block; vertical-align: middle;
  font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 15px;
  color: var(--wp--preset--color--ink);
}
.mn-phone {
  width: 100%; height: auto;
  filter: drop-shadow(0 12px 30px rgba(43,38,34,.14)); border-radius: 42px;
}
.mn-tile-label {
  margin-top: 20px; font-family: "Inter", system-ui, sans-serif; font-weight: 600;
  font-size: 14px; color: var(--wp--preset--color--clay-deep);
  border-bottom: 1px solid var(--wp--preset--color--sand); padding-bottom: 2px;
}
.mn-tile:hover .mn-tile-label { border-color: var(--wp--preset--color--clay); }
.mn-palette-rule {
  width: 100%; height: 8px; margin: 0 auto;
  background: linear-gradient(90deg,
    var(--wp--preset--color--clay) 0 20%,
    var(--wp--preset--color--ochre) 20% 40%,
    var(--wp--preset--color--olive) 40% 60%,
    var(--wp--preset--color--sage) 60% 80%,
    var(--wp--preset--color--umber) 80% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .mn-tile { transition: none; }
  .mn-tile:hover { transform: none; }
}

/* Category / kicker eyebrow */
.mn-kicker {
  font-family: "Inter", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wp--preset--color--clay);
}

/* Article card hover lift */
.mn-card { transition: transform .18s ease, box-shadow .18s ease; }
.mn-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43,38,34,.08); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mn-card { transition: none; }
  .mn-card:hover { transform: none; }
}

/* Keyboard focus visibility */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 2px;
}