/*
Theme Name: AMARA Designer Motion Pro
Description: v1.4.1 — Logo-left header, hero image upload, 5 toggleable homepage sections, logo-only on mobile.
Version: 1.4.1
Text Domain: amaradesigner-motion-pro
*/

:root{
  --bg:#0b0017; --card:#16002b; --text:#f2ecff; --muted:#b8a6ff; --accent:#9b5cff; --accent-2:#6a38ff;
  --maxw:1200px; --radius:22px; --shadow-intensity:.45; --base-size:16px; --line:1.6; --heading-scale:1;
  --blob-opacity:.35; --contentw:760px; --sidebarw:320px; --gutter:24px; --logo-max-h:48px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: radial-gradient(1200px 900px at 10% -10%, #14002a 0%, var(--bg) 45%) fixed;
  color:var(--text);
  font-family: var(--font-base,'Poppins'),system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif;
  line-height:var(--line); font-size:var(--base-size); overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--font-headings,var(--font-base,'Poppins')),inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(calc(100% - 2rem),var(--maxw));margin-inline:auto}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg),transparent 40%);border-bottom:1px solid rgba(255,255,255,.06)}
.navbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.9rem 0}
.brand{display:flex;gap:.75rem;align-items:center;font-weight:700;justify-self:start}
.primary-nav{justify-self:center}
.menu-toggle{justify-self:end}
.brand .site-logo img,.custom-logo,.custom-logo-link img{max-height:var(--logo-max-h)!important;height:auto!important;width:auto;display:block;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,var(--shadow-intensity))}
.brand .site-title{font-weight:700;font-size:1.05rem}
.primary-menu{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.primary-menu a{padding:.55rem .85rem;border-radius:999px}
.primary-menu a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.menu-toggle{display:none;background:none;border:0;color:var(--text)}
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .primary-nav{display:none;position:absolute;right:1rem;top:64px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,var(--shadow-intensity));padding:.6rem}
  .primary-nav.open{display:block}
  /* Logo-only on mobile */
  .brand .site-title{display:none}
}

/* ===== Hero ===== */
@keyframes floatY {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero{padding:6rem 0 4rem;position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:2rem;align-items:center}
@media (max-width:960px){.hero{grid-template-columns:1fr}}
.hero .title{font-size:clamp(calc(2.2rem * var(--heading-scale)),6.5vw,calc(4.4rem * var(--heading-scale)));line-height:1.08;margin:0 0 1rem}
.hero .subtitle{color:var(--muted);font-size:1.15rem;max-width:62ch}
.hero .cta{display:flex;gap:1rem;margin-top:1.75rem;flex-wrap:wrap}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:clip;box-shadow:0 18px 40px rgba(0,0,0,var(--shadow-intensity));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform}
.card:hover{transform:translateY(-6px) rotateX(1.2deg) rotateY(-1.2deg);box-shadow:0 25px 60px rgba(0,0,0,calc(var(--shadow-intensity) + .1))}
.card img{display:block;width:100%;height:auto;object-fit:cover}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.15rem;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));color:var(--text);font-weight:600;text-decoration:none;box-shadow:0 18px 40px rgba(0,0,0,var(--shadow-intensity));transition:transform .2s,box-shadow .3s,filter .2s}
.button--accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.section{padding:3rem 0}
.section .section-title{font-size:clamp(calc(1.6rem * var(--heading-scale)),3.4vw,calc(2.4rem * var(--heading-scale)));margin:0 0 1.1rem}

/* Grids */
.grid{display:grid;gap:1.25rem}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid--3{grid-template-columns:1fr}}

/* Content + sidebar */
.content-wrap{display:grid;gap:var(--gutter);grid-template-columns:1fr}
.post-content{width:100%;max-width:var(--contentw);margin-inline:auto}
@media (min-width:1100px){.content-wrap.has-sidebar{grid-template-columns:minmax(0,var(--contentw)) minmax(0,var(--sidebarw));justify-content:center}.post-content{margin-inline:0}.sidebar{position:sticky;top:90px;height:fit-content}}
.sidebar .widget{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,var(--shadow-intensity));padding:1rem;margin-bottom:1rem}
.toc{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:.25rem 0;color:var(--text);opacity:.9}

.site-footer{padding:2rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.06);margin-top:3rem}

/* ================================================================
   Accessibility & Reduced Motion Enhancements
   These additions preserve the existing dark aesthetic while
   improving usability for keyboard and assistive technology users.
   Focus outlines ensure visible indication of interactive elements,
   skip links provide fast navigation, and reduced‑motion queries
   respect user preferences.
   --------------------------------------------------------------- */

/* Skip link hidden off screen until focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--card);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  z-index: 999;
  transition: top 0.3s;
  text-decoration: none;
}
.skip-link:focus {
  top: 0.5rem;
}

/* Visible focus indicator for keyboard navigation */
a:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Respect reduced motion preferences by disabling animations */
@media (prefers-reduced-motion: reduce) {
  .card,
  .button {
    transition: none !important;
    animation: none !important;
  }
}