/*
Theme Name: Micro Update
Theme URI: https://microupdate.co.uk
Description: A modern FSE block theme for Micro Update Ltd's blog. Built with Full Site Editing and theme.json for future-proof WordPress development.
Author: Micro Update Ltd
Author URI: https://microupdate.co.uk
Version: 2.22.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: microupdate-theme
Domain Path: /languages
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
Tags: block-theme, full-site-editing, custom-colors, custom-logo, editor-style, featured-images, theme-options, threaded-comments, translation-ready
*/

/*
 * Block Theme Custom Styles
 *
 * theme.json handles global tokens (colour, type, spacing).
 * This file adds only component-level rules and browser/plugin fixes
 * that theme.json cannot express.
 *
 * Structure:
 *   1. Fonts
 *   2. Accessibility utilities
 *   3. Header
 *   4. Navigation
 *   5. Post card component  ← all card rules in one place
 *   6. Post grid layout
 *   7. Featured post hero
 *   8. Section heading
 *   9. Single post article
 *  10. Footer
 *  11. Responsive
 */


/* ==========================================================================
   1. FONTS
   Self-hosting avoids a render-blocking Google CDN request and satisfies
   GDPR for a UK business. Inter is a variable font (covers 400–600);
   Poppins ships two static files for the two weights we use.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-800.woff2') format('woff2');
}


/* ==========================================================================
   2. ACCESSIBILITY UTILITIES
   ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: 999999;
  background: #0f172a;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 3px;
  transition: top 150ms ease;
}
.skip-link:focus {
  top: 6px;
}

.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

.wp-element-button:hover {
  transform: translateY(-2px);
}


/* ==========================================================================
   3. HEADER
   Frosted-glass treatment matching the static microupdate.co.uk site.
   !important needed to beat has-white-background-color (WordPress preset
   class) which carries its own background-color declaration.
   ========================================================================== */
.site-header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}


/* ==========================================================================
   4. NAVIGATION
   Specificity strategy: .site-header .wp-block-navigation-item__content
   (0,2,0) beats WordPress's :where() and single-class generated rules
   without !important, so the Site Editor can still override via block
   attributes / inline styles which sit above class rules in the cascade.
   ========================================================================== */
.site-header .wp-block-navigation-item__content {
  color: var(--wp--preset--color--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease;
}
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:focus {
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--accent);
}
/* Active page — aria-current="page" set by WordPress core on exact URL match */
.site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--accent);
  font-weight: 600;
}
/* Active: Articles link highlighted across all blog-context pages.
 * WordPress body classes are more reliable than aria-current for custom
 * navigation links — core only adds aria-current on an exact URL match,
 * missing single posts, archives, and search. The href="/" attribute
 * selector targets the Articles link specifically; body element adds
 * (0,0,1) so the combined specificity (0,4,1) wins cleanly. */
body.home     .site-header .wp-block-navigation-item__content[href="/"],
body.blog     .site-header .wp-block-navigation-item__content[href="/"],
body.single-post .site-header .wp-block-navigation-item__content[href="/"],
body.category .site-header .wp-block-navigation-item__content[href="/"],
body.tag      .site-header .wp-block-navigation-item__content[href="/"],
body.author   .site-header .wp-block-navigation-item__content[href="/"],
body.date     .site-header .wp-block-navigation-item__content[href="/"] {
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--accent);
  font-weight: 600;
}

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}


/* ==========================================================================
   5. POST CARD COMPONENT
   Templates carry only semantic block attributes (query IDs, term slugs,
   className hooks, isLink, level, excerptLength). Every visual rule lives
   here, scoped to .post-card, so appearance can be changed in one place.
   ========================================================================== */

/* 5a. Shell --------------------------------------------------------------- */
.post-card {
  position: relative;
  border: none !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.04);
  transition: box-shadow 200ms ease, transform 200ms ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.13), 0 0 0 1px rgba(26, 86, 219, 0.18);
}
/* Accent bar at the top edge */
.post-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wp--preset--color--primary);
  opacity: 0;
  transition: opacity 250ms ease;
  border-radius: 20px 20px 0 0;
}
.post-card:hover::before {
  opacity: 1;
}
/* Zero out the WordPress flow-layout margin that would add a gap between
   the image and the body when layout:default is used on the card group. */
.post-card > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 5b. Featured image ----------------------------------------------------- */
.post-card .wp-block-post-featured-image {
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.post-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* 5c. Body (inner content group) ----------------------------------------- */
.post-card .post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
}

/* 5d. Category pill ------------------------------------------------------- */
.post-card__category {
  margin: 0;
}
.post-card__category a {
  display: inline-block;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--primary) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  text-decoration: none !important;
}
.post-card__category a:hover {
  background: var(--wp--preset--color--accent-mid);
}

/* 5e. Post title ---------------------------------------------------------- */
.post-card .wp-block-post-title {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0.5rem 0 0;
}
.post-card .wp-block-post-title a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.post-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primary);
}

/* 5f. Excerpt ------------------------------------------------------------- */
.post-card .wp-block-post-excerpt {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--wp--preset--color--text-muted);
  margin: 0.5rem 0 1rem;
}
.post-card .wp-block-post-excerpt p {
  margin: 0;
}

/* 5g. Meta row (author + date) ------------------------------------------- */
/* margin-top: auto pushes the meta+button group to the card bottom,
   aligning Read More buttons across all cards in a row.
   The 1rem margin-bottom on the excerpt above guarantees minimum spacing. */
.post-card .post-card__meta {
  margin-top: auto;
  gap: 0.5rem;
}
.post-card .post-card__meta .wp-block-post-author-name,
.post-card .post-card__meta .wp-block-post-date {
  font-size: 0.78rem;
  color: var(--wp--preset--color--text-muted);
}
.post-card .post-card__meta .wp-block-post-author-name::after {
  content: "·";
  margin-left: 0.5rem;
  color: var(--wp--preset--color--text-muted);
}

/* 5h. Read More button ---------------------------------------------------- */
.post-card__read-more.wp-block-read-more {
  display: inline-block;
  color: var(--wp--preset--color--primary) !important;
  background-color: transparent;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: 6px;
  padding: 0.5rem 1.125rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 150ms ease, color 150ms ease;
}
.post-card__read-more.wp-block-read-more:hover,
.post-card__read-more.wp-block-read-more:focus {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
}


/* ==========================================================================
   6. POST GRID LAYOUT
   core/post-template "grid" layout uses auto-fill with a minimum column
   width, which can't express fixed column counts per breakpoint. Override
   the generated grid-template-columns directly.
   ========================================================================== */
.post-grid.wp-block-post-template {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1024px) {
  .post-grid.wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 599px) {
  .post-grid.wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   7. FEATURED POST HERO
   ========================================================================== */
.featured-post__card {
  box-shadow: 0 4px 32px rgba(15, 23, 42, 0.11), 0 0 0 1px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.featured-post__card .wp-block-columns {
  align-items: stretch !important;
  gap: 0 !important;
  flex-wrap: nowrap;
  margin-bottom: 0;
}
/* Right column: relative container so the image fills it absolutely */
.featured-post__card .wp-block-column:last-child {
  position: relative;
  padding: 0 !important;
  min-height: 320px;
}
.featured-post__card .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  overflow: hidden;
}
.featured-post__card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

.featured-post__label {
  display: inline-block !important;
  background: var(--wp--preset--color--primary);
  color: #fff !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin: 0 0 0.75rem !important;
}
/* Featured card category pill inherits base .post-card__category style;
   these rules only adjust size for the larger context. */
.featured-post__card .post-card__category a {
  font-size: 0.72rem;
  padding: 0.25rem 0.75rem;
}
/* Featured title: larger than the card grid titles */
.featured-post__card .wp-block-post-title {
  font-size: clamp(1.6rem, 2.5vw, 2.25rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
}


/* ==========================================================================
   8. SECTION HEADING
   Underline accent below the "Latest Articles" label.
   ========================================================================== */
.section-heading {
  padding-bottom: 0.875rem;
  position: relative;
}
.section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--wp--preset--color--primary);
  border-radius: 9999px;
}


/* ==========================================================================
   9. SINGLE POST ARTICLE
   White card floating above the page background.
   ========================================================================== */
.article {
  background: var(--wp--preset--color--white);
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07);
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
/* WooCommerce's block-theme compatibility CSS ships:
 *   .has-text-color { color: var(--wp--preset--color--text) !important; }
 * which forces dark text on every element with a custom text colour,
 * including our white and muted footer text. Counter with higher-specificity
 * !important — this is the one deliberate exception, not a habit. */
.site-footer .has-white-color {
  color: var(--wp--preset--color--white) !important;
}
.site-footer .has-footer-muted-color {
  color: var(--wp--preset--color--footer-muted) !important;
}
.site-footer .has-footer-subtle-color {
  color: var(--wp--preset--color--footer-subtle) !important;
}

/* Footer link colour comes from elements.link.color in theme.json (accent-mid,
   ~12.6:1 on navy). WordPress wraps its global link rule in :where() (zero
   specificity), so this plain (0,1,1) selector wins without !important. */
.site-footer a {
  text-decoration: none;
  transition: color 150ms ease;
}
.site-footer a:hover,
.site-footer a:focus {
  color: #ffffff;
  text-decoration: underline;
}


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .featured-post__card .wp-block-columns {
    flex-direction: column;
  }
  .featured-post__card .wp-block-column:last-child {
    min-height: 240px;
  }
  .article {
    padding: 1.75rem 1.25rem;
    border-radius: 12px;
  }
}