/*
 * Axiom Theme — Main Stylesheet
 * Version: 1.0.0
 * Author:  EXEVE (https://exeve.global)
 *
 * Table of contents:
 *  0. Custom properties (design tokens)
 *  1. Reset & base
 *  2. Typography
 *  3. Layout & containers
 *  4. Header
 *  5. Navigation
 *  6. Page title bar
 *  7. Breadcrumbs
 *  8. Content area
 *  9. Post grid & cards
 * 10. Footer
 * 11. Utilities & helpers
 * 12. Dark mode
 * 13. WordPress core classes
 */

/* ─── 0. Custom Properties ────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --ax-orange:       #FE4C1C;
  --ax-crimson:      #D9302D;
  --ax-blue:         #1754F1;
  --ax-cyan:         #00C3FF;

  /* Tint palette */
  --ax-orange-tint:  #FFEBE6;
  --ax-blue-tint:    #EAF3FF;
  --ax-cyan-tint:    #E3F7FD;
  --ax-warm-tint:    #FFF3E9;

  /* Neutral scale */
  --ax-gray-50:      #F9F9F9;
  --ax-gray-100:     #F2F2F2;
  --ax-gray-200:     #E5E5E5;
  --ax-gray-300:     #D1D1D1;
  --ax-gray-400:     #A0A0A0;
  --ax-gray-500:     #737373;
  --ax-gray-600:     #525252;
  --ax-gray-700:     #404040;
  --ax-gray-800:     #262626;
  --ax-gray-900:     #141414;

  /* Semantic assignments */
  --ax-color-primary:      var(--ax-orange);
  --ax-color-primary-dark: var(--ax-crimson);
  --ax-color-secondary:    var(--ax-blue);
  --ax-color-accent:       var(--ax-cyan);
  --ax-color-text:         var(--ax-gray-800);
  --ax-color-text-muted:   var(--ax-gray-500);
  --ax-color-border:       var(--ax-gray-200);
  --ax-color-bg:           #ffffff;
  --ax-color-bg-alt:       var(--ax-gray-50);

  /* Typography */
  --ax-font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --ax-font-mono:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ax-font-size-base: 16px;
  --ax-line-height:    1.7;

  /* Type scale (Major Third: 1.250) */
  --ax-text-xs:  0.64rem;   /* 10.24px */
  --ax-text-sm:  0.8rem;    /* 12.8px  */
  --ax-text-base: 1rem;     /* 16px    */
  --ax-text-md:  1.25rem;   /* 20px    */
  --ax-text-lg:  1.563rem;  /* 25px    */
  --ax-text-xl:  1.953rem;  /* 31px    */
  --ax-text-2xl: 2.441rem;  /* 39px    */
  --ax-text-3xl: 3.052rem;  /* 49px    */

  /* Spacing scale */
  --ax-space-1:  0.25rem;
  --ax-space-2:  0.5rem;
  --ax-space-3:  0.75rem;
  --ax-space-4:  1rem;
  --ax-space-5:  1.25rem;
  --ax-space-6:  1.5rem;
  --ax-space-8:  2rem;
  --ax-space-10: 2.5rem;
  --ax-space-12: 3rem;
  --ax-space-16: 4rem;
  --ax-space-20: 5rem;
  --ax-space-24: 6rem;

  /* Layout */
  --ax-container-max: 1200px;
  --ax-container-px:  clamp(1rem, 4vw, 2rem);
  --ax-radius-sm:  4px;
  --ax-radius:     8px;
  --ax-radius-lg:  12px;
  --ax-radius-xl:  20px;

  /* Transitions */
  --ax-transition: 200ms ease;

  /* Header */
  --ax-header-height: 70px;
  --ax-header-bg:     #ffffff;
  --ax-header-border: var(--ax-color-border);
}

/* ─── 1. Reset & base ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--ax-font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:    var(--ax-font-sans);
  font-size:      var(--ax-text-base);
  line-height:    var(--ax-line-height);
  color:          var(--ax-color-text);
  background:     var(--ax-color-bg);
  margin:         0;
  padding:        0;
  -webkit-font-smoothing: antialiased;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color:           var(--ax-color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ax-color-primary);
}

a:focus-visible {
  outline: 2px solid var(--ax-color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

p        { margin: 0 0 var(--ax-space-4); }
ul, ol   { margin: 0 0 var(--ax-space-4); padding-left: var(--ax-space-6); }
li       { margin-bottom: var(--ax-space-1); }
blockquote {
  margin: var(--ax-space-8) 0;
  padding: var(--ax-space-4) var(--ax-space-6);
  border-left: 4px solid var(--ax-color-primary);
  background: var(--ax-orange-tint);
  border-radius: 0 var(--ax-radius) var(--ax-radius) 0;
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--ax-color-border);
  margin: var(--ax-space-8) 0;
}

code, kbd, pre {
  font-family: var(--ax-font-mono);
  font-size:   0.875em;
}

pre {
  overflow-x: auto;
  padding:    var(--ax-space-4);
  background: var(--ax-gray-900);
  color:      #f8f8f2;
  border-radius: var(--ax-radius);
}

code {
  background:    var(--ax-gray-100);
  padding:       0.15em 0.35em;
  border-radius: var(--ax-radius-sm);
}

pre code {
  background: transparent;
  padding:    0;
}

/* ─── 2. Typography ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin:      0 0 var(--ax-space-4);
  font-weight: 700;
  line-height: 1.2;
  color:       var(--ax-gray-900);
}

h1 { font-size: var(--ax-text-3xl); }
h2 { font-size: var(--ax-text-2xl); }
h3 { font-size: var(--ax-text-xl);  }
h4 { font-size: var(--ax-text-lg);  }
h5 { font-size: var(--ax-text-md);  }
h6 { font-size: var(--ax-text-base); }

/* ─── 3. Layout & containers ─────────────────────────────────────────────── */
.axiom-container {
  max-width: var(--ax-container-max);
  margin:    0 auto;
  padding:   0 var(--ax-container-px);
}

.site { display: flex; flex-direction: column; min-height: 100vh; }
.axiom-main { flex: 1; padding: var(--ax-space-12) 0; }

/* Skip link */
.skip-link {
  position:   absolute;
  top:        -9999px;
  left:       var(--ax-space-4);
  z-index:    99999;
  padding:    var(--ax-space-2) var(--ax-space-4);
  background: var(--ax-color-primary);
  color:      #fff;
  font-weight: 600;
  border-radius: var(--ax-radius);
  text-decoration: none;
}
.skip-link:focus { top: var(--ax-space-4); }

/* Alignments (Gutenberg) */
.alignleft   { float: left; margin: 0 var(--ax-space-6) var(--ax-space-4) 0; }
.alignright  { float: right; margin: 0 0 var(--ax-space-4) var(--ax-space-6); }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignwide   { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull   { max-width: 100%; margin-left: calc(-1 * var(--ax-container-px)); margin-right: calc(-1 * var(--ax-container-px)); }

/* ─── 4. Header ──────────────────────────────────────────────────────────── */
.axiom-header {
  background:    var(--ax-header-bg);
  border-bottom: 1px solid var(--ax-header-border);
  height:        var(--ax-header-height);
  display:       flex;
  align-items:   center;
  position:      relative;
  z-index:       100;
  transition:    height var(--ax-transition),
                 background var(--ax-transition),
                 box-shadow var(--ax-transition);
}

.axiom-header--sticky {
  position: sticky;
  top: 0;
}

.axiom-header--scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.axiom-header--shrink.axiom-header--scrolled {
  height: 54px;
}

/* Fix #1: Auto-hide — slides header out upward, snaps back on scroll-up */
.axiom-header--hidden {
  transform:  translateY( -100% );
  box-shadow: none;
}

/* Only animate the transform when sticky is active (otherwise no transform to animate) */
.axiom-header--sticky {
  transition: height        var(--ax-transition),
              background    var(--ax-transition),
              box-shadow    var(--ax-transition),
              transform     300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.axiom-header--transparent-hero.axiom-template-has-hero:not(.axiom-header--scrolled) {
  background:    transparent;
  border-bottom: none;
  position:      absolute;
  width:         100%;
}

/* Default layout */
.axiom-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
}

/* Logo */
.axiom-header__logo { display: flex; align-items: center; }
.axiom-header__logo .custom-logo { height: 40px; width: auto; }

.axiom-header__site-name {
  font-size:       var(--ax-text-lg);
  font-weight:     700;
  color:           var(--ax-gray-900);
  text-decoration: none;
  letter-spacing:  -0.02em;
}
.axiom-header__site-name:hover { color: var(--ax-color-primary); }

.axiom-header__tagline {
  display:    block;
  font-size:  var(--ax-text-xs);
  color:      var(--ax-color-text-muted);
  margin-top: 2px;
}

/* Centered header */
.axiom-header--centered .axiom-container {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding-top:    var(--ax-space-3);
  padding-bottom: var(--ax-space-3);
}
.axiom-header__logo--center { justify-content: center; }

/* ─── 5. Navigation ──────────────────────────────────────────────────────── */
.axiom-nav__list {
  display:    flex;
  align-items: center;
  gap:        var(--ax-space-1);
  list-style: none;
  margin:     0;
  padding:    0;
}

.axiom-nav__list a {
  display:     block;
  padding:     var(--ax-space-2) var(--ax-space-3);
  font-size:   var(--ax-text-sm);
  font-weight: 500;
  color:       var(--ax-gray-700);
  text-decoration: none;
  border-radius: var(--ax-radius);
  transition:  color var(--ax-transition), background var(--ax-transition);
}

.axiom-nav__list a:hover,
.axiom-nav__list .current-menu-item > a,
.axiom-nav__list .current-page-ancestor > a {
  color:      var(--ax-color-primary);
  background: var(--ax-orange-tint);
}

/* Sub-menus */
.axiom-nav__list .menu-item-has-children { position: relative; }

.axiom-nav__list .sub-menu {
  position:   absolute;
  top:        calc(100% + 8px);
  left:       0;
  min-width:  200px;
  background: var(--ax-color-bg);
  border:     1px solid var(--ax-color-border);
  border-radius: var(--ax-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  opacity:    0;
  visibility: hidden;
  transform:  translateY(-6px);
  transition: opacity var(--ax-transition), transform var(--ax-transition), visibility var(--ax-transition);
  z-index:    200;
  list-style: none;
  margin:     0;
  padding:    var(--ax-space-2);
  flex-direction: column;
}

.axiom-nav__list .menu-item-has-children:hover > .sub-menu,
.axiom-nav__list .menu-item-has-children:focus-within > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.axiom-nav__list .sub-menu a {
  border-radius: var(--ax-radius-sm);
  white-space: nowrap;
}

/* Mobile nav toggle */
.axiom-nav-toggle {
  display:    none;
  flex-direction: column;
  justify-content: space-between;
  width:      28px;
  height:     20px;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
}

.axiom-nav-toggle__bar {
  display:      block;
  width:        100%;
  height:       2px;
  background:   var(--ax-gray-700);
  border-radius: 2px;
  transition:   transform var(--ax-transition), opacity var(--ax-transition);
}

.axiom-nav-toggle[aria-expanded="true"] .axiom-nav-toggle__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.axiom-nav-toggle[aria-expanded="true"] .axiom-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.axiom-nav-toggle[aria-expanded="true"] .axiom-nav-toggle__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Centered nav */
.axiom-nav__list--centered { justify-content: center; }

/* ─── 6. Page title bar ──────────────────────────────────────────────────── */
.axiom-page-title-bar {
  background:  var(--ax-gray-50);
  padding:     var(--ax-space-10) 0;
  border-bottom: 1px solid var(--ax-color-border);
}

.axiom-page-title-bar--has-image {
  position:   relative;
  color:      #fff;
  border-bottom: none;
}

.axiom-page-title-bar--has-image::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
}

.axiom-page-title-bar--has-image .axiom-page-title-bar__inner { position: relative; z-index: 1; }
.axiom-page-title-bar--has-image .axiom-page-title-bar__title { color: #fff; }

.axiom-page-title-bar__title {
  margin:      0;
  font-size:   clamp(var(--ax-text-xl), 3vw, var(--ax-text-2xl));
  font-weight: 700;
  color:       var(--ax-gray-900);
}

.axiom-page-title-bar--align-center .axiom-page-title-bar__inner { text-align: center; }

.axiom-page-title-bar__subtitle {
  font-size:  var(--ax-text-md);
  color:      var(--ax-color-text-muted);
  margin-top: var(--ax-space-3);
  margin-bottom: 0;
}

/* ─── 7. Breadcrumbs ─────────────────────────────────────────────────────── */
.breadcrumb {
  margin-bottom: var(--ax-space-4);
}

.breadcrumb__list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--ax-space-1);
  list-style:  none;
  margin:      0;
  padding:     0;
  font-size:   var(--ax-text-sm);
  /* Default: left-aligned */
  justify-content: flex-start;
}

/* Fix #5: Inherit alignment from the title bar alignment modifier */
.axiom-page-title-bar--align-center .breadcrumb__list {
  justify-content: center;
}

.axiom-page-title-bar--align-right .breadcrumb__list {
  justify-content: flex-end;
}

.axiom-page-title-bar__breadcrumbs {
  /* Ensure the wrapper doesn't constrain the list alignment */
  display: flex;
  flex-direction: column;
}

.axiom-page-title-bar--align-center .axiom-page-title-bar__breadcrumbs {
  align-items: center;
}

.axiom-page-title-bar--align-right .axiom-page-title-bar__breadcrumbs {
  align-items: flex-end;
}

.breadcrumb__link {
  color:           var(--ax-color-text-muted);
  text-decoration: none;
  transition:      color var(--ax-transition);
}

.breadcrumb__link:hover { color: var(--ax-color-primary); }

.breadcrumb__sep {
  color:   var(--ax-gray-300);
  margin:  0 var(--ax-space-1);
  font-size: 0.75em;
}

.breadcrumb__current { color: var(--ax-gray-700); }

/* ─── 8. Content area ────────────────────────────────────────────────────── */
.axiom-article__meta {
  display:   flex;
  flex-wrap: wrap;
  align-items: center;
  gap:       var(--ax-space-2);
  font-size: var(--ax-text-sm);
  color:     var(--ax-color-text-muted);
  margin-bottom: var(--ax-space-6);
  padding-bottom: var(--ax-space-6);
  border-bottom: 1px solid var(--ax-color-border);
}

.axiom-article__sep { color: var(--ax-gray-300); }

.axiom-article__content h2 { margin-top: var(--ax-space-10); }
.axiom-article__content h3 { margin-top: var(--ax-space-8);  }
.axiom-article__content h4 { margin-top: var(--ax-space-6);  }

/* ─── 9. Post grid & cards ───────────────────────────────────────────────── */
.axiom-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ax-space-8);
  margin-bottom: var(--ax-space-12);
}

.axiom-post-card {
  background:    var(--ax-color-bg);
  border:        1px solid var(--ax-color-border);
  border-radius: var(--ax-radius-lg);
  overflow:      hidden;
  transition:    transform var(--ax-transition), box-shadow var(--ax-transition);
}

.axiom-post-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.axiom-post-card__thumb img {
  width:       100%;
  height:      220px;
  object-fit:  cover;
  display:     block;
  transition:  transform 400ms ease;
}

.axiom-post-card:hover .axiom-post-card__thumb img { transform: scale(1.03); }

.axiom-post-card__body { padding: var(--ax-space-5); }

.axiom-post-card__title {
  font-size:   var(--ax-text-md);
  margin:      0 0 var(--ax-space-2);
  font-weight: 700;
  line-height: 1.3;
}

.axiom-post-card__title a {
  color:           inherit;
  text-decoration: none;
}
.axiom-post-card__title a:hover { color: var(--ax-color-primary); }

.axiom-post-card__meta {
  font-size: var(--ax-text-sm);
  color:     var(--ax-color-text-muted);
  margin-bottom: var(--ax-space-3);
  display:   flex;
  gap:       var(--ax-space-2);
}

.axiom-post-card__sep { color: var(--ax-gray-300); }

.axiom-post-card__excerpt {
  font-size: var(--ax-text-sm);
  color:     var(--ax-color-text-muted);
  line-height: 1.6;
}

.axiom-post-card__excerpt p { margin: 0; }

/* ─── 10. Footer ─────────────────────────────────────────────────────────── */
.axiom-footer {
  background:  var(--ax-gray-900);
  color:       var(--ax-gray-400);
  margin-top:  auto;
}

.axiom-footer__widgets {
  padding:       var(--ax-space-16) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.axiom-footer__widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ax-space-10);
}

.axiom-footer .widget__title {
  font-size:     var(--ax-text-sm);
  font-weight:   600;
  color:         #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--ax-space-4);
}

.axiom-footer a { color: var(--ax-gray-400); text-decoration: none; }
.axiom-footer a:hover { color: var(--ax-color-primary); }

.axiom-footer__bar {
  padding: var(--ax-space-5) 0;
}

.axiom-footer__bar-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--ax-space-4);
}

.axiom-footer__copyright {
  font-size: var(--ax-text-sm);
  color:     var(--ax-gray-500);
}

.axiom-footer__nav-list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--ax-space-4);
  list-style: none;
  margin:     0;
  padding:    0;
}

.axiom-footer__nav-list a {
  font-size: var(--ax-text-sm);
}

/* Minimal footer */
.axiom-footer--minimal { padding: var(--ax-space-5) 0; }
.axiom-footer--minimal .axiom-footer__bar-inner { justify-content: center; }

/* ─── 11. Utilities ──────────────────────────────────────────────────────── */
.screen-reader-text {
  clip:     rect(1px, 1px, 1px, 1px);
  position: absolute;
  height:   1px;
  width:    1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Buttons */
.wp-element-button,
.wp-block-button__link {
  background:     var(--ax-color-primary);
  color:          #fff;
  border:         none;
  padding:        var(--ax-space-3) var(--ax-space-6);
  border-radius:  var(--ax-radius);
  font-weight:    600;
  font-size:      var(--ax-text-sm);
  cursor:         pointer;
  display:        inline-flex;
  align-items:    center;
  gap:            var(--ax-space-2);
  text-decoration: none;
  transition:     background var(--ax-transition), transform var(--ax-transition);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--ax-color-primary-dark);
  transform:  translateY(-1px);
  color:      #fff;
}

/* Pagination */
.page-numbers {
  display:        inline-flex;
  gap:            var(--ax-space-2);
  flex-wrap:      wrap;
  list-style:     none;
  margin:         var(--ax-space-8) 0 0;
  padding:        0;
  justify-content: center;
  width:          100%;
}

.page-numbers a,
.page-numbers span {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          40px;
  height:         40px;
  border:         1px solid var(--ax-color-border);
  border-radius:  var(--ax-radius);
  font-size:      var(--ax-text-sm);
  font-weight:    500;
  text-decoration: none;
  color:          var(--ax-gray-700);
  transition:     all var(--ax-transition);
}

.page-numbers .current {
  background: var(--ax-color-primary);
  border-color: var(--ax-color-primary);
  color: #fff;
}

.page-numbers a:hover { border-color: var(--ax-color-primary); color: var(--ax-color-primary); }

/* No results */
.axiom-no-results {
  text-align: center;
  padding:    var(--ax-space-20) 0;
  max-width:  480px;
  margin:     0 auto;
}

/* ─── 12. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --ax-header-height: 60px;
  }

  .axiom-nav-toggle { display: flex; }

  .axiom-nav--primary {
    display:    none;
    position:   absolute;
    top:        var(--ax-header-height);
    left:       0;
    right:      0;
    background: var(--ax-color-bg);
    border-bottom: 1px solid var(--ax-color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding:    var(--ax-space-4);
    z-index:    99;
  }

  .axiom-nav--primary.is-open { display: block; }

  .axiom-nav__list {
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
  }

  .axiom-nav__list a {
    padding:   var(--ax-space-3) var(--ax-space-4);
    font-size: var(--ax-text-base);
  }

  .axiom-nav__list .sub-menu {
    position:   static;
    opacity:    1;
    visibility: visible;
    transform:  none;
    box-shadow: none;
    border:     none;
    border-left: 2px solid var(--ax-color-primary);
    border-radius: 0;
    background: var(--ax-orange-tint);
    margin-left: var(--ax-space-4);
    margin-top:  var(--ax-space-2);
    padding:     var(--ax-space-2);
  }

  .axiom-post-grid { grid-template-columns: 1fr; }

  h1 { font-size: var(--ax-text-2xl); }
  h2 { font-size: var(--ax-text-xl);  }

  .axiom-footer__widget-grid { grid-template-columns: 1fr; gap: var(--ax-space-8); }
  .axiom-footer__bar-inner   { flex-direction: column; text-align: center; }
  .axiom-footer__nav-list    { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── 13. WordPress core classes ─────────────────────────────────────────── */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--ax-text-sm); color: var(--ax-color-text-muted); text-align: center; margin-top: var(--ax-space-2); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ax-space-4); }
.gallery-item img { width: 100%; height: auto; border-radius: var(--ax-radius); }
.sticky {}
.bypostauthor {}