/* ==========================================================================
   Family Historian 8 theme — block-editor-facing styles.
   Brand tokens live in theme.json; this file covers structural/layout
   rules for the custom fh8-* classes used in templates/parts.
   ========================================================================== */

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

/* Base type size bumped up for readability (site's demographic skews
   older) -- percentage on the root scales every rem-based size site-wide
   (headings, buttons, cards...) while still respecting a visitor's own
   browser font-size/zoom preference, unlike a fixed px value would.
   The nav menu is deliberately excluded -- see the fixed-px override on
   .fh8-main-nav below, since rem there would otherwise scale with this. */
html {
  font-size: 100%;
}

/* WordPress inserts a default 24px margin-top between every top-level
   template block (header, hero, each section...) when theme.json doesn't
   set an explicit blockGap. Each of our sections already manages its own
   spacing via .fh8-section padding, so this default just adds unwanted
   extra whitespace on top of it (e.g. a visible gap between the
   announcement bar and the hero below it). Same category of bug as the
   grid-children spacing issue fixed earlier — flat-out disable it here. */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

.fh8-header {
  border-bottom: 4px solid var(--wp--preset--color--green);
}

.fh8-header-top {
  padding: 20px 0 6px;
  flex-wrap: wrap;
  gap: 14px;
}

.fh8-header-cta {
  align-items: center;
  gap: 20px;
}

.fh8-account-icon .wc-block-customer-account__link {
  color: var(--wp--preset--color--navy);
  padding: 0;
}

.fh8-account-icon .wc-block-customer-account__account-icon {
  width: 26px;
  height: 26px;
}

.fh8-account-icon .wc-block-customer-account__link:hover {
  color: var(--wp--preset--color--orange);
}

.fh8-cart-icon .wc-block-mini-cart__button {
  color: var(--wp--preset--color--navy);
  padding: 0;
}

.fh8-cart-icon .wc-block-mini-cart__icon {
  width: 26px;
  height: 26px;
}

.fh8-cart-icon .wc-block-mini-cart__button:hover {
  color: var(--wp--preset--color--orange);
}

.fh8-site-logo {
  display: block;
  text-decoration: none;
  line-height: 0;
}

/* The logo SVG carries the tagline too, so only its width is set here;
   height follows the SVG aspect ratio. */
.fh8-site-logo img {
  display: block;
  width: 404px;
  max-width: 100%;
  height: auto;
}

/* Menu styling matches the current live family-historian.co.uk nav bar
   (white background, black uppercase links, orange hover/current-page —
   from the site's Customizer "Additional CSS", which overrides the
   Storefront child theme's own stylesheet) — deliberately kept separate
   from the rest of the header, which follows the new brand mockup. */
nav.fh8-main-nav {
  background: #fff;
}

/* Desktop-only inset for the unfolded menu bar -- tablet/mobile hide this
   container in favour of the hamburger overlay (see media queries below),
   so this margin only ever shows above the tablet breakpoint. */
.fh8-main-nav .wp-block-navigation__responsive-container-content {
  margin-left: 24px;
}

/* Core's navigation block CSS sets color via a doubled-class selector
   (.wp-block-navigation-item__content.wp-block-navigation-item__content
   {color:inherit}) specifically to out-rank plain "a" overrides — match
   that specificity (our stylesheet loads after core's, so ties resolve
   in our favor) rather than fighting it with !important. */
.fh8-main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;
  /* Fixed px, not rem -- the menu is deliberately excluded from the
     site-wide base font-size bump above; rem would otherwise scale
     with the html { font-size } change. 15.2px matches the original
     .95rem at the old 16px root. */
  font-size: 15.2px;
  letter-spacing: .02em;
  color: #000;
  padding: 10px 16px;
}

.fh8-main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.fh8-main-nav .wp-block-navigation-item__content.is-current {
  color: #e38000;
}

.fh8-main-nav .wp-block-navigation__submenu-container {
  background: #fff;
  border: 1px solid var(--wp--preset--color--border-grey);
  min-width: 290px;
}

.fh8-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  /* Fixed px for the same reason as the top-level nav rule above. */
  font-size: 13.6px;
  padding: 10px 16px;
  color: #000;
  /* Keep each entry on one line; the dropdown then widens to fit its longest
     item (WordPress sets width:auto when it opens, so a width rule on the
     container itself doesn't stick). */
  white-space: nowrap;
}

.fh8-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--green);
  color: #000;
}

.fh8-announcement-bar {
  background: var(--wp--preset--color--orange);
  color: #fff;
  padding: 12px 24px;
}

.fh8-announcement-bar p,
.fh8-announcement-bar a {
  color: #fff;
  margin: 0;
}

/* Buttons */
.wp-block-button.is-style-fh8-green .wp-block-button__link {
  background: var(--wp--preset--color--green);
  color: #fff;
}
.wp-block-button.is-style-fh8-green .wp-block-button__link:hover {
  background: #7ab332;
}

.wp-block-button.is-style-fh8-navy .wp-block-button__link {
  background: var(--wp--preset--color--navy);
  color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid currentColor;
}

.fh8-hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff;
  border-color: #fff;
}
.fh8-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff;
  color: var(--wp--preset--color--navy);
}

/* Soft shadow keeps the white hero text readable over the light photo */
.fh8-hero .wp-block-cover__inner-container h1,
.fh8-hero .wp-block-cover__inner-container p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* Keep the lower-left of the photo (trunk and ferns) in view as the hero crops */
.fh8-hero .wp-block-cover__image-background {
  object-position: left bottom;
}

/* Desktop/tablet: keep the hero text and buttons in the right 60% so the
   trunk on the left of the photo stays clear. Full width on mobile. */
@media (min-width: 783px) {
  .fh8-hero .wp-block-cover__inner-container {
    width: 60%;
    margin-left: auto;
    margin-right: 0;
  }
}

/* Sections */
.fh8-section {
  padding: 64px 24px;
}

.fh8-intro-heading {
  margin-bottom: 48px;
}

/* Kept as an h2 rather than promoted to h1 -- the hero heading above it
   is already this page's h1, and a second h1 would muddy the page's
   heading hierarchy for SEO/screen readers. Sized up via CSS instead to
   get the more prominent look, reusing the "x-large" size already
   defined in theme.json rather than inventing a new one-off value. */
.fh8-intro-heading h2 {
  font-size: var(--wp--preset--font-size--x-large);
}

.fh8-section-alt {
  background: var(--wp--preset--color--bg-alt);
}

.fh8-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fh8-feature-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 18px;
  color: var(--wp--preset--color--navy-soft);
}

.fh8-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wp--preset--color--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Reviews */
.fh8-review-card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--border-grey);
  border-radius: 10px;
  padding: 32px !important;
}

.fh8-badge-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #fff;
}

.fh8-badge-icon.orange { background: var(--wp--preset--color--orange); }
.fh8-badge-icon.green { background: var(--wp--preset--color--green); }

.fh8-badge-icon .material-symbols-outlined {
  font-size: 28px;
  color: #fff;
  /* Material Symbols glyphs sit high within their own line box (their
     ink has little to no true descender), so flexbox centering the box
     itself still leaves the visible icon looking too high. Nudged down
     empirically (measured via canvas text metrics + visual check) to
     center the actual glyph ink rather than its box. */
  transform: translateY(5px);
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.fh8-source {
  color: #9a9fae;
  font-size: .9rem;
}

/* FAQ (core/details block) */
.fh8-faq-item {
  border: 1px solid var(--wp--preset--color--border-grey);
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 14px;
}

.fh8-faq-item summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--wp--preset--color--navy);
}

/* CTA banner */
.fh8-cta-banner .wp-block-cover__inner-container p {
  color: var(--wp--preset--color--navy-soft);
}

/* Footer */
.fh8-footer {
  background: var(--wp--preset--color--navy);
  color: rgba(255, 255, 255, .75);
  padding: 40px 24px;
  font-size: .875rem;
}

.fh8-footer a {
  color: #fff;
}

/* ==========================================================================
   Pricing page
   ========================================================================== */

/* Top-level FH8 / All Products tabs */
.fh8-page-subnav {
  border-top: 1px solid var(--wp--preset--color--border-grey);
}

.fh8-page-subnav ul {
  display: flex;
  gap: 40px;
  justify-content: center;
  padding: 22px 24px;
  margin: 0;
  list-style: none;
}

.fh8-page-subnav a {
  font-size: 1.05rem;
  color: var(--wp--preset--color--navy-soft);
  padding-bottom: 20px;
  border-bottom: 3px solid transparent;
}

.fh8-page-subnav li.current a {
  color: var(--wp--preset--color--orange);
  font-weight: 700;
  border-color: var(--wp--preset--color--orange);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.fh8-pricing-intro,
.fh8-products-intro {
  text-align: center;
  max-width: 640px;
  margin: 64px auto 40px;
  padding: 0 24px;
}

.fh8-pricing-intro h1 {
  font-size: 2.25rem;
}

.fh8-pricing-intro p,
.fh8-products-intro p {
  color: var(--wp--preset--color--navy-soft);
}

.fh8-feature-list strong.new-tag {
  color: var(--wp--preset--color--green);
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .4px;
}

.fh8-svg-feature-list a {
  color: var(--wp--preset--color--orange);
  text-decoration: underline;
}

/* Individual / Education / Business pill toggle */
.fh8-tier-toggle-wrap {
  text-align: center;
  padding: 0 24px;
}

.fh8-tier-toggle {
  display: inline-flex;
  background: var(--wp--preset--color--bg-alt);
  border-radius: 999px;
  padding: 6px;
  margin: 0 auto 56px;
  gap: 4px;
}

.fh8-tier-toggle button {
  border: none;
  background: transparent;
  padding: 12px 32px;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: .95rem;
  color: var(--wp--preset--color--navy);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.fh8-tier-toggle button.active {
  background: var(--wp--preset--color--navy);
  color: #fff;
}

/* Price cards (fh8/price-card block — markup owned by the plugin, styling by the theme) */
.fh8-pricing-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.fh8-pricing-grid.active {
  display: grid;
}

.fh8-pricing-grid > *,
.fh8-products-grid > * {
  margin-block-start: 0;
  max-width: none;
  margin-inline: 0;
}

.fh8-price-card {
  border: 1px solid var(--wp--preset--color--border-grey);
  border-radius: 10px;
  padding: 40px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.fh8-price-card--featured {
  border: 2px solid var(--wp--preset--color--orange);
}

.fh8-price-card--error {
  border: 2px dashed #cf2e2e;
  color: #cf2e2e;
  font-size: .9rem;
  padding: 16px;
}

.fh8-price-card__badge {
  position: absolute;
  top: -1px;
  right: 32px;
  transform: translateY(-50%);
  background: var(--wp--preset--color--orange);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
}

.fh8-price-card__price {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
  margin-bottom: 24px;
}

.fh8-price-card__price .woocommerce-Price-amount {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

.fh8-price-card__period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--wp--preset--color--navy-soft);
}

.fh8-price-card__desc {
  color: var(--wp--preset--color--navy-soft);
  flex-grow: 1;
}

.fh8-price-card__fine-print {
  font-size: .85rem;
  margin-bottom: 24px;
}

.fh8-price-card__fine-print a {
  color: var(--wp--preset--color--orange);
  text-decoration: underline;
}

/* Education/Business "from" quote card (fh8/tier-quote-card block) — single
   centered card instead of the 3-up Individual grid. */
.fh8-pricing-grid--quote {
  grid-template-columns: 1fr;
  max-width: 500px;
}

.fh8-tier-quote-card {
  border: 1px solid var(--wp--preset--color--border-grey);
  border-radius: 10px;
  padding: 40px 32px;
  text-align: center;
  background: #fff;
}

.fh8-tier-quote-card__price {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
  margin-bottom: 24px;
}

.fh8-tier-quote-card__price .woocommerce-Price-amount {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

.fh8-tier-quote-card__price-prefix {
  font-size: 1rem;
  font-weight: 400;
  color: var(--wp--preset--color--navy-soft);
}

.fh8-tier-quote-card__price-suffix {
  font-size: 1rem;
  font-weight: 400;
  color: var(--wp--preset--color--navy-soft);
}

.fh8-tier-quote-card__desc {
  color: var(--wp--preset--color--navy-soft);
  margin-bottom: 24px;
}

/* Buttons used by the price-card / product-card blocks */
.fh8-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fh8-btn-block {
  width: 100%;
}

.fh8-btn-navy {
  background: var(--wp--preset--color--navy);
  color: #fff;
}
.fh8-btn-navy:hover {
  background: #2b3040;
  color: #fff;
}

.fh8-btn-orange {
  background: var(--wp--preset--color--orange);
  color: #fff;
}
.fh8-btn-orange:hover {
  background: #cc7420;
  color: #fff;
}

.fh8-btn-disabled {
  background: var(--wp--preset--color--bg-alt);
  color: var(--wp--preset--color--navy-soft);
  cursor: not-allowed;
}

/* All Products grid (fh8/product-card block) */
.fh8-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.fh8-product-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fh8-product-card .fh8-product-card__thumb {
  display: block;
  background: var(--wp--preset--color--bg-alt) center / cover no-repeat;
  border-radius: 6px;
  /* A5 (ISO 216), portrait — matches box-art/cover-style product images
     (e.g. the Free Edition graphic, generated by WordPress at 212x300,
     which is already this ratio) instead of cropping them to a square. */
  aspect-ratio: 148 / 210;
  margin-bottom: 20px;
}

/* Shop page (archive-product.html) product grid: the WooCommerce Product
   Image block defaults to filling its grid column (~350-400px here), which
   makes product photos too large -- cap and center them instead. */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img {
  display: block;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

.fh8-product-card h3 {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  margin: 0 0 .5em;
}

.fh8-product-card .fh8-product-card__price {
  text-align: center;
  font-weight: 700;
  margin: 0;
}

/* Non-Windows notice (fh8/non-windows-notice block) — hidden until view.js
   confirms the visitor isn't on Windows, so it never flashes for the
   majority of visitors. Always visible in the editor (see index.js). */
.fh8-non-windows-notice {
  display: none;
  border-left: 4px solid var(--wp--preset--color--orange);
  background: #fdf3e9;
  color: var(--wp--preset--color--navy);
  padding: 16px 20px;
  border-radius: 6px;
  margin: 0 0 24px;
}

.fh8-non-windows-notice--visible,
/* This stylesheet also loads inside the block editor (add_editor_style), so
   without this override the block would be hidden there too and impossible
   to click into and edit. */
.editor-styles-wrapper .fh8-non-windows-notice {
  display: block;
}

.fh8-non-windows-notice p:last-child {
  margin-bottom: 0;
}

.fh8-non-windows-notice__editor-flag {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--orange);
  margin: 0 0 8px;
}

@media (max-width: 782px) {
  .fh8-hero .wp-block-cover__image-background {
    content: url("../img/hero-photo-mobile.jpg");
  }

  .fh8-header-top {
    padding: 20px 20px 6px;
  }

  .fh8-main-nav .wp-block-navigation__responsive-container-open {
    margin-left: 20px;
  }

  .fh8-section {
    padding: 56px 20px;
  }

  .fh8-pricing-grid,
  .fh8-products-grid {
    grid-template-columns: 1fr;
  }

  .fh8-page-subnav ul {
    gap: 24px;
  }

  .fh8-tier-toggle {
    display: flex;
    width: calc(100% - 48px);
    margin-left: 24px;
    margin-right: 24px;
  }
  .fh8-tier-toggle button {
    flex: 1;
    padding: 12px 8px;
  }

  .fh8-pricing-intro h1 {
    font-size: 1.75rem;
  }
}

/* Tablet range: same edge-padding fix as phone, plus force the nav into its
   folded/hamburger state -- core's Navigation block only auto-folds when its
   items don't fit their available width (a JS-measured, not breakpoint-based,
   decision), and our items still fit at these widths, so left unforced it
   would render the full unfolded bar here. */
@media (min-width: 783px) and (max-width: 1024px) {
  .fh8-header-top {
    padding: 20px 20px 6px;
  }

  .fh8-main-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    margin-left: 20px;
  }

  .fh8-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* Small desktops: the header content is capped at 1200px, so between the
   tablet range above and ~1240px the logo and cart/account icons would sit
   flush against the screen edges. Above 1240px the page margin does it. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .fh8-header-top {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Download Monitor: hide the download count and button meta. */
.dlm-download-count-value,
.dlm-button-meta {
  display: none;
}

/* Classic-editor image alignment. Older pages (e.g. /reviews) mark images
   with WordPress's alignleft / alignright / aligncenter classes, often inside
   headings or links, where the block layout's own alignment rules (which only
   match direct children) don't reach. */
.wp-block-post-content img.alignright {
  float: right;
  margin: 0 0 1em 1.5em;
}

.wp-block-post-content img.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}

.wp-block-post-content img.aligncenter {
  display: block;
  margin: 0 auto 1em;
}

/* Tables: light grey borders between rows and columns, with room around the
   cell text. Targets the table block's markup; the block's own colour classes
   (e.g. has-cyan-bluish-gray-border-color) aren't in this theme's palette. */
.wp-block-table table,
.wp-block-table table.has-border-color {
  border-collapse: collapse;
  border-color: var(--wp--preset--color--border-grey);
}

.wp-block-table td,
.wp-block-table th {
  padding: 0.75em 1em;
  border: 1px solid var(--wp--preset--color--border-grey);
}

/* Space above and below table blocks so they don't sit hard against the
   surrounding paragraphs. */
.wp-block-post-content .wp-block-table {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}