/*
Theme Name: Fixopedia
Theme URI: https://example.com/fixopedia
Author: Fixopedia
Author URI: https://example.com
Description: A full site editing block theme for DIY auto-repair content and affiliate sites. Diagnose fault codes, warning lights, and repair guides with a red-accent, dark-navy, clean-white design system.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fixopedia
Tags: blog, entertainment, food-and-drink, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Base
   ========================================================================== */
:root{
  --fx-header-h: 92px;
}
html{ overflow-x:hidden; }
img{ height:auto; max-width:100%; }
a{ text-decoration:none; }
:focus-visible{
  outline: 3px solid var(--wp--preset--color--blue);
  outline-offset: 2px;
}

/* ==========================================================================
   Utility bar
   ========================================================================== */
.fx-utility-bar{
  background: var(--wp--preset--color--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-block: 6px;
}
.fx-utility-bar,
.fx-utility-bar a{
  color: #9aa0ac;
  font-size: 12px;
}
.fx-utility-bar a:hover{ color:#fff; }
.fx-utility-bar .wp-block-navigation__container{ gap: 0; }
.fx-utility-bar .wp-block-navigation-item a{ font-size:12px; padding: 2px 10px; }

/* ==========================================================================
   Site header
   ========================================================================== */
.fx-header{
  background: var(--wp--preset--color--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--wp--preset--color--red);
  padding-block: 14px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.fx-header .wp-block-navigation__responsive-container-open,
.fx-header .wp-block-navigation__responsive-container-close{
  color: #fff;
}
.fx-header .wp-block-navigation__responsive-container-open svg,
.fx-header .wp-block-navigation__responsive-container-close svg{
  fill: #fff;
  stroke: #fff;
}
.fx-header .wp-block-navigation__responsive-container.is-menu-open{
  background: var(--wp--preset--color--navy);
}
.fx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.fx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content{
  color: #fff;
}
.fx-logo{
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .5px;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fx-logo .fx-logo-mark{
  color: var(--wp--preset--color--red);
  display: inline-flex;
}
.fx-header nav.wp-block-navigation{ --wp--style--block-gap: 0; }
.fx-header .wp-block-navigation-item > a,
.fx-header .wp-block-navigation-submenu > .wp-block-navigation-item__content{
  color: #c7c9ca;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 10px 14px;
}
.fx-header .wp-block-navigation-item > a:hover,
.fx-header .wp-block-navigation-item.current-menu-item > a{
  color: #fff;
}
.fx-header .wp-block-navigation__submenu-container{
  background: var(--wp--preset--color--navy-soft);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 6px;
}
.fx-header .wp-block-navigation__submenu-container a{
  color: #c7c9ca !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.fx-header .wp-block-navigation__submenu-container a:hover{ color:#fff !important; }
.fx-header-search a{
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 8px 10px !important;
  display: inline-flex;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link{
  padding: 12px 22px;
  font-size: 14px;
}
.wp-block-button.is-style-amazon .wp-block-button__link{
  background: var(--wp--preset--color--amazon);
  color: #14161c;
}
.wp-block-button.is-style-amazon .wp-block-button__link:hover{ background:#e88a00; }

/* ==========================================================================
   Hero
   ========================================================================== */
.fx-hero{
  background:
    radial-gradient(70% 130% at 92% -10%, rgba(220,38,38,.20) 0%, rgba(220,38,38,0) 60%),
    radial-gradient(70% 120% at 4% 115%, rgba(37,99,235,.16) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(155deg, #21252f 0%, var(--wp--preset--color--navy) 55%);
  padding-block: var(--wp--preset--spacing--xl);
  color: #fff;
  position: relative;
}
.fx-hero h1{ color:#fff; font-size: var(--wp--preset--font-size--huge); max-width: 720px; }
.fx-hero p.fx-hero-sub{ color:#b7bac1; max-width: 560px; font-size: var(--wp--preset--font-size--intro); }
.fx-search-form{
  display:flex;
  gap: 10px;
  max-width: 640px;
  margin-top: var(--wp--preset--spacing--md);
}
.fx-search-form input[type="search"]{
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--wp--preset--font-family--body);
}
.fx-search-form button{
  background: var(--wp--preset--color--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 26px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  cursor: pointer;
}
.fx-search-form button:hover{ background: var(--wp--preset--color--red-dark); }
.fx-popular-row{
  margin-top: var(--wp--preset--spacing--sm);
  font-size: 13px;
  color: #9aa0ac;
  display:flex;
  flex-wrap:wrap;
  gap: 4px 6px;
  align-items:center;
}
.fx-popular-row a{ color:#d8dade; }
.fx-popular-row a:hover{ color:#fff; }

/* ==========================================================================
   Vehicle strip
   ========================================================================== */
.fx-vehicle-strip{ background: var(--wp--preset--color--white); padding-block: var(--wp--preset--spacing--lg); }
.fx-vehicle-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wp--preset--spacing--sm);
}
.fx-vehicle-card{
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  padding: 18px 12px;
  text-align:center;
  background: var(--wp--preset--color--bg);
  transition: border-color .15s, transform .15s;
  display:flex;
  flex-direction:column;
  height:100%;
}
.fx-vehicle-card p:last-child{ margin-top:auto; margin-bottom:0; }
.fx-vehicle-card:hover{ border-color: var(--wp--preset--color--red); transform: translateY(-2px); }
.fx-vehicle-card .fx-vehicle-name{
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
}
.fx-vehicle-card a.fx-vehicle-link{ font-size:12px; font-weight:600; color: var(--wp--preset--color--red); display:inline-block; margin-top:6px; }

/* ==========================================================================
   Section headings
   ========================================================================== */
.fx-section{ padding-block: var(--wp--preset--spacing--lg); }
.fx-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--wp--preset--spacing--sm); margin-bottom: var(--wp--preset--spacing--md); }
.fx-section-head h2{ margin:0; }
.fx-section-head .fx-view-all{ font-size:13px; font-weight:700; white-space:nowrap; }

/* ==========================================================================
   Category cards (pattern: fixopedia/category-cards)
   ========================================================================== */
.fx-category-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wp--preset--spacing--sm);
}
.fx-category-card{
  background:#fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  padding: 22px 16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  height:100%;
}
.fx-category-card p:last-child{ margin-top:auto; }
.fx-category-card .fx-cat-icon{
  width:44px; height:44px; margin: 0 auto 12px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.fx-category-card .fx-cat-icon svg{ width:22px; height:22px; }
.fx-category-card.fx-cat-red .fx-cat-icon{ background:#fde8e8; color: var(--wp--preset--color--red); }
.fx-category-card.fx-cat-amber .fx-cat-icon{ background:#fef3e0; color: var(--wp--preset--color--amber); }
.fx-category-card.fx-cat-green .fx-cat-icon{ background:#e3f6e9; color: var(--wp--preset--color--green); }
.fx-category-card.fx-cat-blue .fx-cat-icon{ background:#e4ecfd; color: var(--wp--preset--color--blue); }
.fx-category-card.fx-cat-purple .fx-cat-icon{ background:#efe6fb; color:#7c3aed; }
.fx-category-card h3{ font-size:15px; margin: 4px 0; }
.fx-category-card p{ font-size:13px; color: var(--wp--preset--color--ink-soft); margin:0 0 10px; }
.fx-category-card a.fx-cat-link{ font-size:13px; font-weight:700; color: var(--wp--preset--color--red); }

/* ==========================================================================
   Popular codes row
   ========================================================================== */
.fx-codes-row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wp--preset--spacing--sm);
}
.fx-code-card{
  background:#fff;
  border:1px solid var(--wp--preset--color--line);
  border-radius:10px;
  padding: 18px 16px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.fx-code-card .fx-code-name{
  font-family: var(--wp--preset--font-family--display);
  font-weight:700;
  color: var(--wp--preset--color--red);
  font-size: 17px;
}
.fx-code-card p{ font-size:12.5px; color: var(--wp--preset--color--ink-soft); margin: 6px 0 10px; }
.fx-code-card p:last-child{ margin-top:auto; margin-bottom:0; }
.fx-code-card a{ font-size:12.5px; font-weight:700; }

/* ==========================================================================
   Latest articles / archive & index cards
   ========================================================================== */
.fx-article-card{
  background:#fff;
  border:1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  overflow: hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}
.fx-article-card .wp-block-post-featured-image{ margin:0; }
.fx-article-card .wp-block-post-featured-image img{ display:block; aspect-ratio: 4/3; object-fit:cover; }
.fx-article-card .fx-card-body{
  padding: 14px 16px 18px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.fx-article-card .wp-block-post-terms{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.fx-article-card .wp-block-post-title{ font-size:16px; margin: 8px 0 6px; line-height:1.35; }
.fx-article-card .wp-block-post-title a{ color: var(--wp--preset--color--ink); }
.fx-article-card .wp-block-post-excerpt{ font-size:13px; color: var(--wp--preset--color--ink-soft); }
.fx-article-card .fx-card-meta{ font-size:11.5px; color: var(--wp--preset--color--ink-soft); margin-top:auto; padding-top:10px; }

/* ==========================================================================
   Trust / feature strip
   ========================================================================== */
.fx-trust-strip{ background: var(--wp--preset--color--navy); padding-block: var(--wp--preset--spacing--lg); color:#fff; }
.fx-trust-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--md); }
.fx-trust-item{ display:flex; gap:12px; align-items:flex-start; }
.fx-trust-item svg{ flex-shrink:0; width:26px; height:26px; color: var(--wp--preset--color--red); margin-top:2px; }
.fx-trust-item h3{ font-size:14px; color:#fff; margin:0 0 4px; }
.fx-trust-item p{ font-size:12.5px; color:#a9acae; margin:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.fx-footer{
  background: var(--wp--preset--color--navy);
  color:#a9acae;
  padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  border-top: 3px solid var(--wp--preset--color--red);
}
.fx-footer a{ color:#a9acae; font-size:13.5px; }
.fx-footer a:hover{ color:#fff; }

.fx-footer-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--wp--preset--spacing--md);
  padding-bottom: var(--wp--preset--spacing--md);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fx-footer-logo{ margin-bottom: 14px; }
.fx-footer-logo .fx-logo-mark{ color: var(--wp--preset--color--red); display:inline-flex; }
.fx-footer-logo .wp-block-site-title{ margin:0; }
.fx-footer-logo .wp-block-site-title,
.fx-footer-logo .wp-block-site-title a{
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
}
.fx-footer .fx-disclosure{ font-size:12.5px; max-width:340px; line-height:1.7; margin:0; }

.fx-footer-col h4{ color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:1px; margin:0 0 14px; }
.fx-footer .wp-block-navigation-item a{ padding: 5px 0; font-size:13px; }

.fx-footer-bottom{
  margin-top: var(--wp--preset--spacing--md);
  font-size:12px;
  color:#7d8087;
}
.fx-footer-bottom p{ margin:0; }

/* ==========================================================================
   Single post: breadcrumb, badge, meta, TOC
   ========================================================================== */
.fx-breadcrumb{ font-size:12.5px; color: var(--wp--preset--color--ink-soft); }
.fx-breadcrumb a{ color: var(--wp--preset--color--ink-soft); }
.fx-breadcrumb a:hover{ color: var(--wp--preset--color--red); }
.fx-cat-badge{
  display:inline-block;
  background: var(--wp--preset--color--red);
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:4px;
}
.fx-cat-badge,
.fx-cat-badge a{ color:#fff !important; }
.fx-cat-badge .wp-block-post-terms{ display:inline; }
.fx-post-meta{ font-size:13px; color: var(--wp--preset--color--ink-soft); }
.fx-post-meta .wp-block-post-author-name{ font-weight:600; color: var(--wp--preset--color--ink); }

.fx-toc{
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  padding: 20px 22px;
}
.fx-toc h2{ font-size:15px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.5px; }
.fx-toc ol{ margin:0; padding-left:18px; columns: 2; column-gap: 24px; }
.fx-toc li{ font-size:14px; margin-bottom:6px; break-inside: avoid; }
.fx-toc a{ color: var(--wp--preset--color--ink); }
.fx-toc a:hover{ color: var(--wp--preset--color--red); }

.fx-featured-img img{ border-radius:10px; display:block; aspect-ratio:16/9; object-fit:cover; }
.fx-post-content h2{ scroll-margin-top: calc(var(--fx-header-h) + 20px); }

.fx-text-center{ text-align:center; }
.fx-text-center .fx-search-form{ margin-inline:auto; }

.fx-single-layout{ align-items:flex-start; }
.fx-sidebar{ position: sticky; top: calc(var(--fx-header-h) + 16px); }
.fx-sidebar-box{
  background:#fff;
  border:1px solid var(--wp--preset--color--line);
  border-radius:10px;
  padding:18px;
  margin-bottom: var(--wp--preset--spacing--sm);
}
.fx-sidebar-box h3{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; margin:0 0 12px; }
.fx-sidebar-search .wp-block-search__inside-wrapper{
  border:1px solid var(--wp--preset--color--line); border-radius:6px; overflow:hidden;
}
.fx-sidebar-search .wp-block-search__input{ border:none; padding:10px 12px; font-size:13px; }
.fx-sidebar-search .wp-block-search__button{
  background: var(--wp--preset--color--red); color:#fff; border:none; padding:0 14px; font-size:12px; font-weight:700; cursor:pointer;
}
.fx-sidebar-search .wp-block-search__button:hover{ background: var(--wp--preset--color--red-dark); }
.fx-tool-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--wp--preset--color--line); }
.fx-tool-item:last-child{ border-bottom:none; }
.fx-tool-thumb{
  width:56px; height:56px; border-radius:6px; background: var(--wp--preset--color--bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#9aa0ac;
}
.fx-tool-thumb svg{ width:26px; height:26px; }
.fx-tool-name{ font-size:13px; font-weight:600; line-height:1.3; }
.fx-tool-rating{ font-size:11.5px; color: var(--wp--preset--color--amber); margin-top:3px; }
.fx-tool-price{ font-size:13px; font-weight:700; margin-top:3px; }
.fx-tool-item .wp-block-button__link{ font-size:11px; padding:6px 10px; margin-top:6px; }
.fx-disclosure-mini{ font-size:11px; color:#9aa0ac; margin-top:8px; }

.fx-popular-codes-list a{
  display:flex; justify-content:space-between;
  padding:8px 0; font-size:13.5px; border-bottom:1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink);
}
.fx-popular-codes-list a:last-child{ border-bottom:none; }
.fx-popular-codes-list a:hover{ color: var(--wp--preset--color--red); }

.fx-cta-card{
  background: var(--wp--preset--color--navy);
  border-radius:10px;
  padding:20px;
  color:#fff;
}
.fx-cta-card h3{ color:#fff; font-size:15px; margin:0 0 6px; }
.fx-cta-card p{ font-size:12.5px; color:#b7bac1; margin:0 0 12px; }

/* ==========================================================================
   Component library: info / warning / pro-tip boxes
   ========================================================================== */
.fx-callout{
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
  border-left: 4px solid;
}
.fx-callout p:last-child{ margin-bottom:0; }
.fx-callout-label{
  display:flex; align-items:center; gap:8px;
  font-family: var(--wp--preset--font-family--display);
  font-weight:600;
  font-size:14px;
  margin-bottom:6px;
}
.fx-callout-label svg{ width:18px; height:18px; flex-shrink:0; }
.fx-callout.is-info{ background: var(--wp--preset--color--blue-bg); border-color: var(--wp--preset--color--blue); }
.fx-callout.is-info .fx-callout-label{ color: var(--wp--preset--color--blue); }
.fx-callout.is-warning{ background: var(--wp--preset--color--warning-bg); border-color: var(--wp--preset--color--red); }
.fx-callout.is-warning .fx-callout-label{ color: var(--wp--preset--color--red); }
.fx-callout.is-pro-tip{ background: var(--wp--preset--color--amber-bg); border-color: var(--wp--preset--color--amber); }
.fx-callout.is-pro-tip .fx-callout-label{ color: var(--wp--preset--color--amber); }

/* ==========================================================================
   Component library: comparison table
   ========================================================================== */
.wp-block-table.fx-compare-table{ font-size:14px; margin:1.5rem 0; }
.wp-block-table.fx-compare-table table{ width:100%; border-collapse:collapse; }
.wp-block-table.fx-compare-table th{
  background: var(--wp--preset--color--navy); color:#fff;
  text-align:left; padding:10px 14px; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px;
}
.wp-block-table.fx-compare-table td{ padding:10px 14px; border-bottom:1px solid var(--wp--preset--color--line); }
.wp-block-table.fx-compare-table tbody tr:nth-child(even) td{ background: var(--wp--preset--color--bg); }

/* ==========================================================================
   Component library: product review card
   ========================================================================== */
.fx-review-card{
  display:grid; grid-template-columns: 180px 1fr; gap: 24px;
  background:#fff; border:1px solid var(--wp--preset--color--line); border-radius:10px; padding:20px;
  margin: 1.5rem 0;
}
.fx-review-thumb{
  background: var(--wp--preset--color--bg); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#9aa0ac; aspect-ratio:1/1;
}
.fx-review-thumb svg{ width:52px; height:52px; }
.fx-review-badge{
  display:inline-block; background: var(--wp--preset--color--green); color:#fff;
  font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-bottom:8px;
}
.fx-review-title{ font-size:19px; margin:0 0 6px; }
.fx-review-rating{ color: var(--wp--preset--color--amber); font-size:14px; font-weight:600; }
.fx-review-rating span{ color: var(--wp--preset--color--ink-soft); font-weight:400; font-size:13px; }
.fx-review-card ul{ margin:12px 0; padding-left:18px; font-size:13.5px; }
.fx-review-price{ font-size:22px; font-weight:700; margin: 10px 0 12px; }

/* ==========================================================================
   Component library: FAQ accordion (native details/summary)
   ========================================================================== */
.fx-faq .wp-block-details{
  background:#fff; border:1px solid var(--wp--preset--color--line); border-radius:8px;
  padding: 14px 18px; margin-bottom:10px;
}
.fx-faq .wp-block-details summary{
  cursor:pointer; font-weight:600; font-size:15px; list-style:none; position:relative; padding-right:28px;
}
.fx-faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.fx-faq .wp-block-details summary::after{
  content:"+"; position:absolute; right:0; top:0; font-size:20px; color: var(--wp--preset--color--red); font-weight:400;
}
.fx-faq .wp-block-details[open] summary::after{ content:"\2212"; }
.fx-faq .wp-block-details p{ margin-top:10px; font-size:14px; color: var(--wp--preset--color--ink-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .fx-vehicle-grid,
  .fx-category-grid,
  .fx-codes-row{ grid-template-columns: repeat(2, 1fr); }
  .fx-trust-grid{ grid-template-columns: repeat(2, 1fr); }
  .fx-toc ol{ columns: 1; }
  .fx-review-card{ grid-template-columns: 1fr; }
  .fx-single-layout{ flex-direction: column; }
  .fx-sidebar{ position:static; width:100% !important; }
  .fx-footer-grid{ grid-template-columns: 1fr 1fr; }
  .fx-footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .fx-vehicle-grid,
  .fx-category-grid,
  .fx-codes-row,
  .fx-trust-grid{ grid-template-columns: 1fr 1fr; }
  .fx-search-form{ flex-direction:column; }
  .fx-hero h1{ font-size: 1.9rem; }
  .fx-footer-grid{ grid-template-columns: 1fr; }
  .fx-footer-bottom{ flex-direction:column; gap:6px; }
}