/*
Theme Name: Inspiro Child
Theme URI: https://afiqx77.com
Description: Child theme for Inspiro — modern premium redesign for afiqx77.
Author: afiqx77
Template: inspiro
Version: 1.0.0
Text Domain: inspiro-child
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Base & typography
   3.  Layout containers
   4.  Header / navigation
   5.  Support dropdown
   6.  Buttons
   7.  Cards & sections
   8.  Homepage hero
   9.  Blog / posts / archive
   10. Forms
   11. Footer
   12. Utilities
   13. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS
   ========================================================================== */
:root{
  --ax-bg:#0e1116;
  --ax-bg-2:#141922;
  --ax-surface:#1a2029;
  --ax-surface-2:#212936;
  --ax-border:rgba(255,255,255,.08);
  --ax-border-strong:rgba(255,255,255,.14);
  --ax-text:#eef2f7;
  --ax-text-muted:#9aa7b8;
  --ax-text-dim:#6b7789;
  --ax-accent:#14c8b4;
  --ax-accent-2:#0ea5e9;
  --ax-accent-soft:rgba(20,200,180,.14);
  --ax-radius:16px;
  --ax-radius-sm:10px;
  --ax-radius-lg:24px;
  --ax-shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --ax-shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --ax-maxw:1200px;
  --ax-gutter:clamp(18px,4vw,48px);
  --ax-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ax-ease:cubic-bezier(.22,.61,.36,1);
}

/* 2. BASE & TYPOGRAPHY
   ========================================================================== */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--ax-bg)!important;
  color:var(--ax-text)!important;
  font-family:var(--ax-font)!important;
  font-size:16.5px!important;
  line-height:1.7!important;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 600px at 12% -10%,rgba(20,200,180,.10),transparent 60%),
    radial-gradient(900px 500px at 92% 0%,rgba(14,165,233,.08),transparent 55%),
    var(--ax-bg);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ax-font)!important;
  color:var(--ax-text)!important;
  font-weight:750!important;
  line-height:1.18!important;
  letter-spacing:-.022em!important;
  margin-top:0;
}
h1{font-size:clamp(2.1rem,5vw,3.4rem)!important;}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)!important;margin-bottom:.5em!important;}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)!important;}
h4{font-size:1.12rem!important;}
p{color:var(--ax-text-muted);margin-bottom:1.15em;}
a{color:var(--ax-accent);text-decoration:none;transition:color .2s var(--ax-ease);}
a:hover{color:#3ee0cd;}
img{max-width:100%;height:auto;}
::selection{background:var(--ax-accent);color:#04201d;}
:focus-visible{outline:2px solid var(--ax-accent);outline-offset:3px;border-radius:6px;}

/* 3. LAYOUT CONTAINERS
   ========================================================================== */
.wrap,.site-content .wrap,.container{
  max-width:var(--ax-maxw)!important;
  margin-inline:auto!important;
  padding-inline:var(--ax-gutter)!important;
}
.site-content{padding-block:clamp(28px,5vw,64px);}
section{padding-block:clamp(30px,5vw,72px);}
.entry-content{max-width:76ch;}
.entry-content>*+*{margin-top:1.1em;}

/* 4. HEADER / NAVIGATION
   ========================================================================== */
.site-header,.navbar,.main-header,#masthead{
  background:rgba(14,17,22,.82)!important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--ax-border)!important;
  position:sticky;top:0;z-index:999;
  transition:box-shadow .3s var(--ax-ease),background .3s var(--ax-ease);
}
.site-header.is-scrolled{box-shadow:var(--ax-shadow);background:rgba(14,17,22,.95)!important;}
.site-title,.site-title a,.custom-logo-link{color:var(--ax-text)!important;font-weight:800!important;letter-spacing:-.02em!important;}
.site-description{color:var(--ax-text-dim)!important;font-size:.82rem!important;letter-spacing:.14em;text-transform:uppercase;}
.navbar-brand{font-weight:800!important;}

/* primary nav */
.main-navigation a,.navbar-nav>li>a,.primary-menu>li>a{
  color:var(--ax-text-muted)!important;
  font-weight:600!important;
  font-size:.95rem!important;
  padding:10px 14px!important;
  border-radius:var(--ax-radius-sm);
  position:relative;
  transition:color .2s var(--ax-ease),background .2s var(--ax-ease);
}
.main-navigation a:hover,.navbar-nav>li>a:hover,.primary-menu>li>a:hover{
  color:var(--ax-text)!important;background:rgba(255,255,255,.05);
}
.main-navigation .current-menu-item>a,.navbar-nav>.active>a,.primary-menu>.current-menu-item>a{
  color:var(--ax-accent)!important;
}
.main-navigation .current-menu-item>a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--ax-accent);
}

/* 5. SUPPORT DROPDOWN (visual only — destinations untouched)
   ========================================================================== */
.main-navigation .sub-menu,.navbar-nav .dropdown-menu,.primary-menu .sub-menu{
  background:var(--ax-surface)!important;
  border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius)!important;
  box-shadow:var(--ax-shadow-lg)!important;
  padding:8px!important;
  min-width:260px;
  margin-top:10px!important;
}
.main-navigation .sub-menu li a,.navbar-nav .dropdown-menu li a{
  border-radius:var(--ax-radius-sm);
  padding:10px 14px!important;
  color:var(--ax-text-muted)!important;
  font-weight:500!important;
  display:block;
}
.main-navigation .sub-menu li a:hover,.navbar-nav .dropdown-menu li a:hover{
  background:var(--ax-accent-soft)!important;color:var(--ax-accent)!important;
}
.menu-item-has-children>a::after{opacity:.6;}

/* 6. BUTTONS
   ========================================================================== */
button,.button,.btn,input[type=submit],input[type=button],
.wp-block-button__link,.elementor-button{
  font-family:var(--ax-font)!important;
  font-weight:650!important;
  font-size:.95rem!important;
  border-radius:var(--ax-radius-sm)!important;
  padding:13px 26px!important;
  border:1px solid transparent!important;
  cursor:pointer;
  transition:transform .18s var(--ax-ease),box-shadow .25s var(--ax-ease),background .2s var(--ax-ease),border-color .2s var(--ax-ease);
  text-decoration:none!important;
  display:inline-flex;align-items:center;gap:9px;
}
.button-primary,.btn-primary,.wp-block-button__link,input[type=submit],.elementor-button{
  background:linear-gradient(135deg,var(--ax-accent) 0%,#0ea79a 100%)!important;
  color:#04201d!important;
  box-shadow:0 8px 24px -10px rgba(20,200,180,.7);
}
.button-primary:hover,.btn-primary:hover,.wp-block-button__link:hover,input[type=submit]:hover,.elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(20,200,180,.85);
  color:#04201d!important;
}
.button-secondary,.btn-outline{
  background:transparent!important;border:1px solid var(--ax-border-strong)!important;color:var(--ax-text)!important;
}
.button-secondary:hover,.btn-outline:hover{background:rgba(255,255,255,.06)!important;border-color:var(--ax-accent)!important;}

/* 7. CARDS & SECTIONS
   ========================================================================== */
.entry-card,.post-card,article.post,.blog-post,.card{
  background:var(--ax-surface)!important;
  border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius)!important;
  box-shadow:var(--ax-shadow);
  transition:transform .28s var(--ax-ease),box-shadow .28s var(--ax-ease),border-color .28s var(--ax-ease);
  overflow:hidden;
}
.entry-card:hover,.post-card:hover,article.post:hover,.card:hover{
  transform:translateY(-5px);
  border-color:var(--ax-border-strong)!important;
  box-shadow:var(--ax-shadow-lg);
}
.entry-title a,.post-title a{color:var(--ax-text)!important;}
.entry-title a:hover,.post-title a:hover{color:var(--ax-accent)!important;}
.entry-meta,.post-meta{color:var(--ax-text-dim)!important;font-size:.85rem!important;}
.entry-summary,.entry-content{color:var(--ax-text-muted);}
blockquote{
  border-left:3px solid var(--ax-accent);background:var(--ax-surface);
  border-radius:0 var(--ax-radius-sm) var(--ax-radius-sm) 0;
  padding:18px 22px;color:var(--ax-text);font-style:italic;
}
hr{border:0;border-top:1px solid var(--ax-border);margin-block:2rem;}
code,pre{
  background:var(--ax-bg-2)!important;border:1px solid var(--ax-border);
  border-radius:var(--ax-radius-sm);color:#8be9d9!important;font-size:.9em;
}
pre{padding:18px 20px;overflow:auto;}

/* 8. HOMEPAGE HERO
   ========================================================================== */
.site-hero,.hero,.header-hero,.entry-hero{
  position:relative;padding-block:clamp(56px,10vw,132px)!important;
  text-align:center;background:transparent!important;
}
.site-hero h1,.hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem)!important;
  font-weight:800!important;letter-spacing:-.03em!important;
  background:linear-gradient(180deg,#fff 0%,#a9b6c6 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.site-hero p,.hero p{font-size:clamp(1.02rem,1.6vw,1.24rem)!important;color:var(--ax-text-muted);max-width:62ch;margin-inline:auto;}

/* 9. BLOG / POSTS / ARCHIVE
   ========================================================================== */
.posts-grid,.blog-grid,.wp-block-post-template{
  display:grid;gap:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.single-post .entry-header,.page .entry-header{text-align:left;margin-bottom:1.6rem;}
.archive .page-title{border-bottom:1px solid var(--ax-border);padding-bottom:.6rem;}

/* 10. FORMS
   ========================================================================== */
input[type=text],input[type=email],input[type=url],input[type=search],
input[type=password],input[type=tel],input[type=number],textarea,select{
  background:var(--ax-bg-2)!important;border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius-sm)!important;color:var(--ax-text)!important;
  padding:13px 16px!important;font-family:var(--ax-font)!important;font-size:.96rem!important;
  width:100%;transition:border-color .2s var(--ax-ease),box-shadow .2s var(--ax-ease);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--ax-accent)!important;
  box-shadow:0 0 0 3px var(--ax-accent-soft)!important;outline:none!important;
}
label{color:var(--ax-text)!important;font-weight:600;font-size:.9rem;margin-bottom:6px;display:block;}
::placeholder{color:var(--ax-text-dim)!important;}

/* 11. FOOTER
   ========================================================================== */
.site-footer,footer,.footer-widgets{
  background:var(--ax-bg-2)!important;
  border-top:1px solid var(--ax-border)!important;
  color:var(--ax-text-muted)!important;
  padding-block:clamp(34px,5vw,64px)!important;
  margin-top:clamp(40px,7vw,90px);
}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.footer-widgets h2,.footer-widgets h3{
  color:var(--ax-text)!important;font-size:1rem!important;letter-spacing:.01em;margin-bottom:.7em!important;
}
.site-footer a,.footer-widgets a{color:var(--ax-text-muted)!important;}
.site-footer a:hover,.footer-widgets a:hover{color:var(--ax-accent)!important;}
.site-info,.site-footer .site-info{color:var(--ax-text-dim)!important;font-size:.85rem;border-top:1px solid var(--ax-border);padding-top:18px;margin-top:22px;}

/* 11b. COMPONENTS (hero, tool cards, media cards)
   ========================================================================== */
.ax-hero,.ax-page-hero{padding-block:clamp(48px,8vw,104px)!important;text-align:center;}
.ax-hero h1,.ax-page-hero h1{margin-bottom:.28em!important;}
.ax-hero-sub{font-size:clamp(1rem,1.5vw,1.18rem)!important;max-width:60ch;margin-inline:auto;color:var(--ax-text-muted);}
.ax-badge{margin-bottom:1.1rem;}
.ax-hero .wp-block-buttons,.ax-page-hero .wp-block-buttons{justify-content:center;gap:12px;margin-top:1.6rem;}

.ax-section-title{margin-bottom:.28em!important;}
.ax-section-sub{color:var(--ax-text-muted);max-width:64ch;margin-bottom:1.7rem;}

.ax-tool-grid{gap:clamp(14px,2vw,22px)!important;margin-bottom:clamp(14px,2vw,22px)!important;}
.ax-tool-card{
  background:var(--ax-surface)!important;border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius)!important;padding:clamp(20px,2.4vw,30px)!important;
  height:100%;box-shadow:var(--ax-shadow);
  transition:transform .28s var(--ax-ease),border-color .28s var(--ax-ease),box-shadow .28s var(--ax-ease);
}
.ax-tool-card:hover{transform:translateY(-5px);border-color:var(--ax-accent)!important;box-shadow:var(--ax-shadow-lg);}
.ax-tool-card h3{margin-bottom:.4em!important;font-size:1.18rem!important;}
.ax-tool-card p{font-size:.96rem;margin-bottom:.7em;}
.ax-tool-card p:last-child{margin-bottom:0;}
.ax-tool-card a{font-weight:650;}

.ax-about-strip,.ax-hobby-strip{
  background:var(--ax-bg-2)!important;border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius-lg)!important;padding:clamp(26px,4vw,52px)!important;
  margin-block:clamp(30px,5vw,64px)!important;
}
.ax-about-strip .wp-block-list{margin:0;padding-left:1.1em;}
.ax-about-strip .wp-block-list li{color:var(--ax-text-muted);margin-bottom:.5em;}

.ax-media-card{
  background:var(--ax-surface)!important;border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius)!important;padding:clamp(16px,2.4vw,26px)!important;
  box-shadow:var(--ax-shadow);height:100%;
  transition:transform .28s var(--ax-ease),border-color .28s var(--ax-ease);
}
.ax-media-card:hover{transform:translateY(-5px);border-color:var(--ax-border-strong)!important;}
.ax-media-card video{width:100%;height:auto;border-radius:var(--ax-radius-sm);background:#000;display:block;}
.ax-media-card .wp-element-caption{color:var(--ax-text-muted)!important;font-size:.92rem;margin-top:.9em;text-align:center;}
.ax-media-card .wp-element-caption strong{color:var(--ax-text);font-weight:700;}
.ax-media-wide{max-width:820px;margin-inline:auto;}
.ax-latest-posts .wp-block-post{background:var(--ax-surface);border:1px solid var(--ax-border);border-radius:var(--ax-radius);padding:22px;}


/* 11c. PAGE TITLE DEDUP (hide theme page-title when a custom hero is present)
   ========================================================================== */
.page:has(.ax-hero) .entry-header,
.page:has(.ax-page-hero) .entry-header,
.page:has(.ax-hero) > .entry-header,
.page:has(.ax-page-hero) > .entry-header{display:none!important;}
/* fallback for browsers without :has() — hide the plain page title only */
@supports not selector(:has(*)){
  .ax-hero ~ * .entry-header,.ax-page-hero ~ * .entry-header{display:none!important;}
}
/* keep single posts / normal pages readable */
.single .entry-header,.page:not(:has(.ax-hero)):not(:has(.ax-page-hero)) .entry-header{display:block;}


/* 11d. THEME HEADER IMAGE — neutralise the old full-bleed header image so the
   redesigned hero is the visual lead-in. Image is kept in the DOM (reversible).
   ========================================================================== */
.home .wp-custom-header,
.home #wp-custom-header,
.home .has-header-image .wp-custom-header{
  min-height:0!important;height:0!important;overflow:hidden!important;
  margin:0!important;padding:0!important;
}
.home .wp-custom-header img,
.home .wp-custom-header video{display:none!important;}
.home .site-header,
.home .site-header.has-header-image{background:rgba(14,17,22,.82)!important;}
/* make sure our hero gets top spacing after the header */
.home .ax-hero{padding-top:clamp(56px,9vw,120px)!important;}


/* 11e. HOMEPAGE HEADER STACK — collapse the theme's custom-header band and the
   duplicated branding block so the redesigned hero leads. All elements remain
   in the DOM (reversible); only presentation changes.
   ========================================================================== */
.home .custom-header,
.home .custom-header-media,
.home .site-header .custom-header{
  height:0!important;min-height:0!important;overflow:hidden!important;
  margin:0!important;padding:0!important;
}
.home .custom-header img,
.home .custom-header-media img,
.home .custom-header video{display:none!important;}
.home .site-branding,
.home .site-branding-text{display:none!important;}
.home .site-header .inner-wrap{min-height:0!important;padding-block:12px!important;}
/* tighten the gap above the hero on the front page */
.home .site-content{padding-top:0!important;}


/* 11f. FORM CARD (contact form presentation)
   ========================================================================== */
.ax-form-card{
  background:var(--ax-surface)!important;border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius-lg)!important;padding:clamp(24px,4vw,48px)!important;
  max-width:760px;margin-inline:auto!important;box-shadow:var(--ax-shadow);
}
.ax-form-card .wpforms-field-label{color:var(--ax-text)!important;}
.ax-form-card .wpforms-submit{
  background:linear-gradient(135deg,var(--ax-accent) 0%,#0ea79a 100%)!important;
  color:#04201d!important;border:0!important;border-radius:var(--ax-radius-sm)!important;
  font-weight:700!important;padding:14px 30px!important;
}
.ax-form-card .wpforms-submit:hover{transform:translateY(-2px);}
/* comment forms inherit the dark palette */
.comment-form input,.comment-form textarea{background:var(--ax-bg-2)!important;}


/* 11g. NAV DROPDOWN POLISH — ensure the Support dropdown matches the design
   system regardless of parent-theme specificity. Destinations untouched.
   ========================================================================== */
.navbar .sub-menu,.main-navigation .sub-menu,.primary-menu .sub-menu,
.site-header .sub-menu,ul.sub-menu,ul.dropdown-menu{
  background:var(--ax-surface)!important;
  border:1px solid var(--ax-border)!important;
  border-radius:var(--ax-radius)!important;
  box-shadow:var(--ax-shadow-lg)!important;
  padding:8px!important;
}
.navbar .sub-menu a,.main-navigation .sub-menu a,.site-header .sub-menu a,
ul.sub-menu a,ul.dropdown-menu a{
  color:var(--ax-text-muted)!important;background:transparent!important;
  border-radius:var(--ax-radius-sm)!important;padding:10px 14px!important;
}
.navbar .sub-menu a:hover,.main-navigation .sub-menu a:hover,.site-header .sub-menu a:hover,
ul.sub-menu a:hover,ul.dropdown-menu a:hover{
  background:var(--ax-accent-soft)!important;color:var(--ax-accent)!important;
}

/* 12. UTILITIES
   ========================================================================== */
.ax-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ax-ease),transform .6s var(--ax-ease);}
.ax-reveal.is-in{opacity:1;transform:none;}
.ax-badge{
  display:inline-block;padding:5px 13px;border-radius:999px;
  background:var(--ax-accent-soft);color:var(--ax-accent);
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.ax-card-grid{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.ax-section-title{margin-bottom:.35em!important;}
.ax-section-sub{color:var(--ax-text-muted);max-width:64ch;margin-bottom:1.9rem;}
.screen-reader-text{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;}

/* 13. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  :root{--ax-maxw:100%;}
  .posts-grid,.blog-grid,.ax-card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
}
@media (max-width:768px){
  body{font-size:16px!important;}
  h1{font-size:clamp(1.85rem,7vw,2.4rem)!important;}
  h2{font-size:clamp(1.4rem,5.4vw,1.8rem)!important;}
  .site-content{padding-block:26px;}
  section{padding-block:32px;}
  .posts-grid,.blog-grid,.ax-card-grid{grid-template-columns:1fr;}
  .site-hero,.hero{padding-block:52px!important;}
  /* mobile nav panel */
  .main-navigation.toggled .menu,.mobile-menu,.navbar-collapse{
    background:var(--ax-surface)!important;border-top:1px solid var(--ax-border);
  }
  .main-navigation .sub-menu{position:static!important;box-shadow:none!important;background:transparent!important;border:0!important;margin-top:0!important;padding-left:12px!important;}
  button,.button,.btn,.wp-block-button__link,.elementor-button{padding:12px 20px!important;width:auto;}
}
@media (max-width:480px){
  :root{--ax-gutter:16px;}
  .site-title{font-size:1.1rem!important;}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .ax-reveal{opacity:1;transform:none;}
}