/*
Theme Name: MaterialWP
Theme URI: https://www.wickedgoodshots.com/
Author: Kevin Martel
Author URI: https://www.wickedgoodshots.com/
Description: A block theme (Full Site Editing) that looks like Material UI (MUI). Roboto typography, Material elevation, a sticky AppBar, Paper cards, and contained buttons with ripple. Built for photo galleries (FooGallery-friendly) — edit the header, hero and footer visually in the Site Editor.
Version: 1.2.2
Requires at least: 6.3
Tested up to: 6.6
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: materialwp
Tags: full-site-editing, block-patterns, photography, portfolio, blog, block-styles, wide-blocks, custom-colors, editor-style, threaded-comments, translation-ready
*/

/* =========================================================================
   MaterialWP — Design tokens (mirrors MUI v5/7 default light theme)
   Palette/typography also live in theme.json; this file adds the parts
   theme.json can't express: elevation, sticky AppBar, cards, ripple.
   ========================================================================= */
:root {
  --md-primary: #1976d2;
  --md-primary-dark: #1565c0;
  --md-primary-light: #42a5f5;
  --md-on-primary: #ffffff;
  --md-secondary: #9c27b0;
  --md-secondary-dark: #7b1fa2;

  --md-bg: #f5f5f5;
  --md-paper: #ffffff;
  --md-text: rgba(0, 0, 0, 0.87);
  --md-text-secondary: rgba(0, 0, 0, 0.6);
  --md-divider: rgba(0, 0, 0, 0.12);
  --md-action-hover: rgba(0, 0, 0, 0.04);
  --md-primary-hover: rgba(25, 118, 210, 0.04);
  --md-primary-selected: rgba(25, 118, 210, 0.08);

  --md-radius: 4px;
  --md-font: "Roboto", "Helvetica", "Arial", sans-serif;

  /* MUI elevation shadows */
  --md-elev1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  --md-elev2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
  --md-elev4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
  --md-elev8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
}

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

/* =========================================================================
   AppBar (parts/header.html → group.md-appbar)
   ========================================================================= */
.md-appbar {
  position: sticky; top: 0; z-index: 1100;
  box-shadow: var(--md-elev4);
}
.md-appbar .md-toolbar { min-height: 48px; }
.md-appbar a { color: var(--md-on-primary); text-decoration: none; }
.md-appbar a:hover { text-decoration: none; }
/* Force AppBar nav + title links white (beats global link colour / preset classes) */
.md-appbar .wp-block-site-title a,
.md-appbar .wp-block-navigation a:not(.wp-element-button),
.md-appbar .wp-block-navigation .wp-block-navigation-item__content { color: #ffffff !important; }
/* ...but the mobile hamburger overlay has a white background — keep those links dark & visible */
.md-appbar .wp-block-navigation__responsive-container.is-menu-open a,
.md-appbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--md-text) !important; }
.md-appbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { background-color: var(--md-action-hover); }
.md-appbar .wp-block-site-title { margin: 0; }
.md-appbar .wp-block-site-title a { font-weight: 500; }
.md-appbar .wp-block-site-title a:hover { opacity: 0.92; }

/* Navigation items → Material text buttons */
.md-appbar .wp-block-navigation .wp-block-navigation-item__content {
  padding: 8px 12px; border-radius: var(--md-radius); transition: background-color .2s;
}
.md-appbar .wp-block-navigation .wp-block-navigation-item__content:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
.md-appbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  background-color: rgba(255, 255, 255, 0.18);
}
/* Submenu popover = Material menu (elevation 8) */
.md-appbar .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--md-paper); color: var(--md-text);
  border: 0; border-radius: var(--md-radius); box-shadow: var(--md-elev8);
  padding: 8px 0;
}
.md-appbar .wp-block-navigation__submenu-container a { color: var(--md-text) !important; }
.md-appbar .wp-block-navigation__submenu-container a:hover { background: var(--md-action-hover); }

/* AppBar elevates a touch more once you scroll (set by material.js) */

/* =========================================================================
   Post card grid (templates use .md-post-grid + grid post-template)
   ========================================================================= */
.md-post-grid .wp-block-post-template { gap: 24px; margin: 0; }
.md-post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .md-post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .md-post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }

.md-post-grid .wp-block-post-template > li {
  background: var(--md-paper); border-radius: var(--md-radius);
  box-shadow: var(--md-elev1); overflow: hidden; padding: 0 0 16px;
  display: flex; flex-direction: column;
  transition: box-shadow .3s cubic-bezier(0.4,0,0.2,1);
}
.md-post-grid .wp-block-post-template > li:hover { box-shadow: var(--md-elev8); }

.md-post-grid .md-card__media { margin: 0 0 12px; overflow: hidden; }
.md-post-grid .md-card__media img { width: 100%; border-radius: 0; transition: transform .4s ease; }
.md-post-grid .wp-block-post-template > li:hover .md-card__media img { transform: scale(1.05); }

.md-post-grid .wp-block-post-date,
.md-post-grid .wp-block-post-title,
.md-post-grid .wp-block-post-excerpt { padding-inline: 16px; }
.md-post-grid .wp-block-post-date { margin-bottom: 4px; letter-spacing: 0.03333em; }
.md-post-grid .wp-block-post-title { margin: 0 0 6px; line-height: 1.4; }
.md-post-grid .wp-block-post-title a { color: var(--md-text); }
.md-post-grid .wp-block-post-title a:hover { color: var(--md-primary); text-decoration: none; }
.md-post-grid .wp-block-post-excerpt { color: var(--md-text-secondary); font-size: 0.875rem; margin-top: auto; }
.md-post-grid .wp-block-post-excerpt__more-link {
  display: inline-block; margin-top: 8px;
  text-transform: uppercase; font-size: 0.8125rem; font-weight: 500;
}

/* =========================================================================
   Hero (Cover block with .md-hero) — swap gradient for an image in the editor
   ========================================================================= */
.md-hero { border-radius: 0 0 var(--md-radius) var(--md-radius); }
/* Consistent cropped hero band across screen sizes (Cover only allows one min-height in the editor) */
.md-hero.wp-block-cover { min-height: 460px; }
.md-hero .wp-block-cover__image-background { object-fit: cover; object-position: center; }
@media (max-width: 781px) { .md-hero.wp-block-cover { min-height: 340px !important; } }
@media (max-width: 480px) { .md-hero.wp-block-cover { min-height: 260px !important; } }
.md-hero .wp-block-site-title a { color: #fff; }
.md-hero .wp-block-site-tagline a { color: rgba(255, 255, 255, 0.95); }
.md-hero .wp-block-site-tagline { color: rgba(255, 255, 255, 0.95); }
.md-hero .is-style-outline .wp-block-button__link {
  color: #fff; border-color: rgba(255, 255, 255, 0.7); box-shadow: none;
}
.md-hero .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* =========================================================================
   Buttons — Material contained / outlined (+ ripple via material.js)
   ========================================================================= */
.wp-block-button__link { position: relative; overflow: hidden; box-shadow: var(--md-elev2); }
.wp-block-button__link:hover { box-shadow: var(--md-elev4); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--md-primary);
  border: 1px solid rgba(25, 118, 210, 0.5); box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--md-primary-hover); border-color: var(--md-primary); }

.md-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: currentColor; opacity: 0.3; pointer-events: none;
  animation: md-ripple .6s linear;
}
@keyframes md-ripple { to { transform: scale(2.5); opacity: 0; } }

/* =========================================================================
   Article "Paper" (single.html / page.html)
   ========================================================================= */
.md-article {
  background: var(--md-paper); border-radius: var(--md-radius);
  box-shadow: var(--md-elev1); overflow: hidden; padding: 0;
}
.md-article__hero { margin: 0; }
.md-article__hero img { width: 100%; max-height: 480px; object-fit: cover; display: block; border-radius: 0; }
.md-article__inner { margin: 0; }
@media (max-width: 600px) { .md-article__inner { padding: 20px !important; } }
.md-article__meta { color: var(--md-text-secondary); font-size: 0.875rem; margin-bottom: 24px; }
.md-article__meta a { color: var(--md-text-secondary); }

/* Post content niceties (blockquote / code / tables styled via theme.json) */
.md-content > *:first-child { margin-top: 0; }
.md-content img { border-radius: var(--md-radius); }
.md-content table th, .md-content table td { border-bottom: 1px solid var(--md-divider); padding: 12px 16px; }
.md-content pre, .md-content .wp-block-code { box-shadow: var(--md-elev1); }
.md-content .foogallery { margin: 24px 0; }
.md-content .foogallery .fg-item.fg-type-image, .md-content .fg-image { border-radius: var(--md-radius); }

/* Tags → Material chips */
.md-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.md-tags a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 16px; background: rgba(0, 0, 0, 0.08); color: var(--md-text);
  font-size: 0.8125rem; text-decoration: none; transition: background-color .2s;
}
.md-tags a:hover { background: rgba(0, 0, 0, 0.14); text-decoration: none; }

/* Post navigation links */
.wp-block-post-navigation-link a { color: var(--md-primary); font-weight: 500; }

/* =========================================================================
   Query pagination → Material page buttons
   ========================================================================= */
.wp-block-query-pagination { gap: 8px; margin-top: 40px; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--md-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-paper); box-shadow: var(--md-elev1); color: var(--md-text);
  text-decoration: none; font-weight: 500; transition: background-color .2s;
}
.wp-block-query-pagination a:hover { background: var(--md-action-hover); }
.wp-block-query-pagination .page-numbers.current { background: var(--md-primary); color: #fff; }

/* =========================================================================
   Comments "Paper"
   ========================================================================= */
.md-comments {
  background: var(--md-paper); border-radius: var(--md-radius);
  box-shadow: var(--md-elev1); padding: 24px 32px;
}
@media (max-width: 600px) { .md-comments { padding: 20px; } }
.md-comments .wp-block-comment-template { list-style: none; padding: 0; }
.md-comments .wp-block-comment-template > li { padding: 16px 0; border-bottom: 1px solid var(--md-divider); }
.md-comments .wp-block-avatar img { border-radius: 50%; }
.md-comments .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]),
.md-comments .wp-block-post-comments-form textarea {
  border: 1px solid rgba(0,0,0,0.23); border-radius: var(--md-radius); padding: 12px 14px; width: 100%;
}

/* =========================================================================
   Footer (parts/footer.html → group.md-footer)
   ========================================================================= */
.md-footer { position: relative; margin-top: 0; }
.md-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--md-primary) 0%, var(--md-secondary) 100%);
}
.md-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color .2s; }
.md-footer a:hover { color: #fff; text-decoration: none; }
.md-footer .wp-block-site-title a { color: #fff; }
.md-footer .wp-block-site-title a:hover { color: #fff; }
.md-footer h3, .md-footer .wp-block-heading {
  text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85;
}
/* Footer link lists (Navigation + Page List) as tidy stacked links */
.md-footer .wp-block-navigation .wp-block-navigation-item__content { padding: 4px 0; }
.md-footer .wp-block-page-list { list-style: none; margin: 0; padding: 0; }
.md-footer .wp-block-page-list li { margin: 0; }
.md-footer .wp-block-page-list a { display: inline-block; padding: 4px 0; font-size: 0.95rem; }
.md-footer .wp-block-social-links { margin-top: 8px; }
.md-footer .wp-block-separator { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.12); }

/* =========================================================================
   Custom block styles (registered in functions.php)
   ========================================================================= */
.wp-block-group.is-style-md-card {
  background: var(--md-paper); border-radius: var(--md-radius);
  box-shadow: var(--md-elev1); padding: 24px;
}
.wp-block-image.is-style-md-rounded img { border-radius: var(--md-radius); }

/* Query title / headings spacing */
.wp-block-query-title { margin-bottom: 24px; }