/* ── PS-BASE.CSS ──
   Shared base styles across all pages: CSS reset, variables, typography,
   footer, cookie banner, and common utilities.
   Does NOT include: nav styles (ps-nav.js), page-specific styles (in each page)
*/

@import url('ps-tokens.css');

/* ── CSS RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── CSS VARIABLES ── */
:root{
  /* Legacy aliases → ps-tokens.css canonical values */
  --bg:var(--ps-bg);--surface:var(--ps-surface);--card:var(--ps-surface);--border:var(--ps-border);
  --gold:var(--ps-accent);--gold-l:var(--ps-accent-l);--cream:var(--ps-text);--muted:var(--ps-text-3);
  --nav-h:60px;
}

/* ── BODY DEFAULTS ── */
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--cream);font-family:'Outfit',sans-serif;
  overflow-x:hidden;padding-top:var(--nav-h);
}

/* ── LANGUAGE SYSTEM (CSS-only, zero JS risk) ── */
/* Hide all lang variants by default */
[data-fr],[data-en],[data-es],[data-pt],[data-ar]{display:none;}
/* Show the active language */
[data-lang="fr"] [data-fr]{display:revert;}
[data-lang="en"] [data-en]{display:revert;}
[data-lang="es"] [data-es]{display:revert;}
[data-lang="pt"] [data-pt]{display:revert;}
[data-lang="ar"] [data-ar]{display:revert;}
/* Inline spans */
span[data-fr],span[data-en],span[data-es],span[data-pt],span[data-ar]{display:none;}
[data-lang="fr"] span[data-fr]{display:inline;}
[data-lang="en"] span[data-en]{display:inline;}
[data-lang="es"] span[data-es]{display:inline;}
[data-lang="pt"] span[data-pt]{display:inline;}
[data-lang="ar"] span[data-ar]{display:inline;}

/* ── ANIMATIONS ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
.a1{animation:fadeUp 0.8s ease both 0s;}
.a2{animation:fadeUp 0.8s ease both 0.12s;}
.a3{animation:fadeUp 0.8s ease both 0.24s;}
.a4{animation:fadeUp 0.8s ease both 0.36s;}
.a5{animation:fadeUp 0.8s ease both 0.48s;}
@media (prefers-reduced-motion:reduce){.a1,.a2,.a3,.a4,.a5{animation:none;}}

/* ── TYPOGRAPHY ── */
/* Note: Font imports should be in the page head (Cormorant Garamond + Outfit) */

/* ── FOOTER ── */
footer{
  background:var(--surface);border-top:1px solid var(--border);
  padding:60px 48px 40px;position:relative;z-index:1;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  max-width:1100px;margin:0 auto;
}
.footer-brand .nav-logo{margin-bottom:12px;display:inline-block;}
.footer-tagline{font-size:13px;color:var(--muted);line-height:1.6;margin-top:10px;}
.footer-socials{display:flex;gap:12px;margin-top:14px;}
.footer-socials a{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.15);
  color:var(--muted);transition:all 0.2s;text-decoration:none;
}
.footer-socials a:hover{
  color:var(--gold);border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.14);
}
.footer-socials svg{width:16px;height:16px;fill:currentColor;}
.footer-col h4{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.footer-col a{
  display:block;color:var(--muted);text-decoration:none;
  font-size:13px;margin-bottom:10px;transition:color 0.2s;
}
.footer-col a:hover{color:var(--cream);}
.footer-bottom{
  max-width:1100px;margin:40px auto 0;padding-top:24px;
  border-top:1px solid var(--border);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-copy{font-size:12px;color:var(--muted);}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{font-size:12px;color:var(--muted);text-decoration:none;}
.footer-legal a:hover{color:var(--cream);}

/* ── COOKIE BANNER ── */
#cookie-banner{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#1a1814;border:1px solid var(--border);border-radius:14px;
  padding:20px 28px;max-width:520px;width:calc(100% - 40px);z-index:9999;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
#cookie-banner p{font-size:13px;color:var(--muted);flex:1;line-height:1.5;}
#cookie-banner a{color:var(--gold);}
.cookie-btns{display:flex;gap:8px;}
.btn-accept{
  background:var(--gold);color:#0c0b09;border:none;border-radius:7px;
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
}
.btn-decline{
  background:transparent;color:var(--muted);border:1px solid var(--border);
  border-radius:7px;padding:8px 16px;font-size:13px;cursor:pointer;
}

/* ── RTL ── */
html[dir="rtl"] nav{direction:rtl;}
html[dir="rtl"] .nav-dropdown{left:auto;right:0;}
html[dir="rtl"] .lang-menu{right:0;left:auto;}
html[dir="rtl"] h1,html[dir="rtl"] .section-title{text-align:right;}
html[dir="rtl"] .hero{text-align:right;}
html[dir="rtl"] .hero-btns{justify-content:flex-end;}

/* ── GLOBAL MOBILE TOUCH TARGETS ── */
@media(hover:none){
  a, button, [role="button"], input[type="submit"], .btn-primary, .btn-secondary,
  .ps-nav-cta, .btn-accept, .btn-decline{
    min-height:44px;
  }
  /* Prevent 300ms tap delay */
  a, button{touch-action:manipulation;}
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  footer{padding:48px 20px 32px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  /* Global page padding — minimize scroll */
  main{padding-left:16px !important;padding-right:16px !important;}
  h1{font-size:clamp(28px,7vw,44px) !important;}
  /* SEO landing page — hero */
  .hero{padding:72px 16px 36px !important;min-height:auto !important;}
  .hero-cta{gap:12px;}
  .btn-primary,.btn-secondary{padding:14px 28px;font-size:14px;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;}
  /* SEO landing page — all content grids: horizontal scroll (one line) */
  .problem-grid,.solution-grid,.toolkit-grid,.pricing-grid,.uc-grid,.ba-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .problem-grid::-webkit-scrollbar,
  .solution-grid::-webkit-scrollbar,
  .toolkit-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar,
  .uc-grid::-webkit-scrollbar,
  .ba-grid::-webkit-scrollbar{display:none;}
  /* Card min-widths so they don't collapse */
  .problem-card{min-width:160px !important;max-width:190px !important;flex-shrink:0;}
  .solution-card{min-width:230px !important;flex-shrink:0;}
  .tk-card{min-width:160px !important;flex-shrink:0;}
  .pricing-card{min-width:270px !important;flex-shrink:0;}
  .uc-card{min-width:210px !important;flex-shrink:0;}
  .ba-card{min-width:200px !important;flex-shrink:0;}
  /* SEO landing page — reduce section padding */
  section{padding:48px 20px;}
  .section-sub{margin-bottom:32px;font-size:15px;}
  /* SEO landing page — cards compacted */
  .problem-card{padding:16px 12px;}
  .problem-icon{font-size:22px;margin-bottom:8px;}
  .problem-card h3{font-size:13px;margin-bottom:6px;line-height:1.3;}
  .problem-card p{font-size:12px;line-height:1.5;}
  .solution-card{padding:24px 20px;}
  .tk-card{padding:24px 20px;}
  .pricing-card{padding:28px 20px;}
  /* SEO landing page — social proof */
  .hero-social-proof{margin-top:36px;gap:20px;flex-wrap:wrap;justify-content:center;}
  .proof-num{font-size:32px;}
  /* SEO landing page — toolkit numbers */
  .tk-num{font-size:40px;}
  .toolkit-wrap{padding:48px 20px !important;}
  .toolkit-sub{margin-bottom:32px;}
  /* SEO landing page — final CTA */
  .final-cta{padding:48px 20px;}
  /* SEO landing page — before/after (now flex horizontal scroll, min-width set above) */
  /* Blog article pages */
  .article-content{padding:40px 20px;}
  .article-header{padding:30px 20px;}
  .article-share{flex-wrap:wrap;}
  .similar-articles{padding:28px 20px;margin-top:40px;}
  .article-cta{padding:28px 20px;margin:40px 0;}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
  footer{padding:32px 16px 24px;}
  .hero-cta{flex-direction:column;align-items:center;}
  .btn-primary,.btn-secondary{width:100%;text-align:center;}
  section{padding:40px 16px;}
  #cookie-banner{padding:16px 20px;gap:12px;}
  .cookie-btns{width:100%;}
  .btn-accept,.btn-decline{flex:1;min-height:44px;text-align:center;}
  /* Blog article pages */
  .breadcrumbs{padding:24px 16px 14px;font-size:12px;}
  .article-header{padding:20px 16px;}
  .article-content{padding:28px 16px;}
  .article-content h2{font-size:24px;margin:32px 0 16px;}
  .article-content p,.article-content li{font-size:14px;}
  .prompt-box{padding:18px 16px;margin:20px 0;}
  .prompt-box-content{padding:12px;font-size:13px;}
  .article-cta{padding:24px 16px;margin:32px 0;}
  .article-cta h3{font-size:22px;}
  .article-cta a{padding:14px 24px;min-height:48px;display:inline-flex;align-items:center;}
  .similar-articles{padding:24px 16px;margin-top:32px;}
  .similar-grid{grid-template-columns:1fr;gap:16px;}
  .share-btn{width:44px;height:44px;}
  /* SEO landing pages — hero compact */
  .hero{padding:70px 16px 36px !important;}
  .hero-badge{padding:6px 14px;font-size:11px;margin-bottom:16px;}
  h1{margin-bottom:16px;}
  .hero-sub{margin-bottom:24px;font-size:15px;line-height:1.55;}
  .hero-social-proof{margin-top:28px;gap:12px;}
  .proof-num{font-size:28px;}
  .proof-label{font-size:10px;letter-spacing:0.06em;}
  /* SEO landing pages — sections compact */
  .section-sub{margin-bottom:24px;font-size:14px;}
  .section-eyebrow{font-size:10px;letter-spacing:0.1em;margin-bottom:12px;}
  h2{margin-bottom:10px;}
  /* SEO landing pages — cards compact */
  .problem-card{padding:20px 16px;}
  .problem-icon{font-size:24px;margin-bottom:12px;}
  .problem-card h3{font-size:18px;margin-bottom:8px;}
  .problem-card p{font-size:13px;}
  .solution-card{padding:20px 16px;}
  .solution-card h3{font-size:18px;}
  .tk-card{padding:20px 16px;}
  .tk-num{font-size:32px;}
  .tk-icon{font-size:24px;margin-bottom:12px;}
  .tk-card h3{font-size:16px;margin-bottom:6px;}
  .tk-card p{font-size:12px;}
  .toolkit-wrap{padding:36px 16px !important;}
  .toolkit-sub{margin-bottom:24px;}
  /* SEO landing pages — pricing compact */
  .pricing-card{padding:24px 16px;}
  .pricing-name{font-size:22px;}
  .pricing-price{font-size:36px;margin-bottom:20px;}
  .pricing-features{gap:10px;margin-bottom:24px;}
  .pricing-feature{font-size:13px;}
  /* SEO landing pages — FAQ compact */
  .faq-q{padding:16px;font-size:14px;}
  .faq-a{padding:0 16px;font-size:13px;}
  .faq-item.open .faq-a{padding:0 16px 16px;}
  .faq-list{margin-top:24px;gap:1px;}
  /* SEO landing pages — before/after compact */
  .ba-card{padding:16px;}
  .ba-before,.ba-after{font-size:16px;}
  .ba-task{font-size:13px;}
  /* SEO landing pages — final CTA compact */
  .final-cta{padding:36px 16px;}
  .final-cta .section-sub{margin-bottom:24px;}
  /* UC cards */
  .uc-card{padding:20px 16px;}
  /* Footer compact */
  .footer-col h4{font-size:10px;margin-bottom:10px;}
  .footer-col a{font-size:12px;padding:3px 0;}
}
@media(max-width:375px){
  footer{padding:24px 12px 20px;}
  section{padding:32px 12px;}
  .btn-primary,.btn-secondary{padding:12px 20px;font-size:13px;}
  #cookie-banner{bottom:12px;width:calc(100% - 24px);padding:14px 16px;}
  /* Blog article pages */
  .breadcrumbs{padding:20px 12px 10px;}
  .article-header{padding:16px 12px;}
  .article-content{padding:20px 12px;}
  .article-content h2{font-size:22px;}
  .article-content p,.article-content li{font-size:13px;line-height:1.65;}
  .prompt-box{padding:14px 12px;}
  .prompt-box-content{font-size:12px;padding:10px;}
  .article-cta{padding:20px 12px;}
  .article-cta h3{font-size:20px;}
  .similar-articles{padding:20px 12px;}
  .similar-card{padding:16px 12px;}
  /* SEO landing pages — extreme compact */
  .hero{padding:66px 12px 28px !important;}
  .hero-badge{font-size:9px;padding:5px 12px;margin-bottom:12px;}
  .hero-sub{font-size:13px;}
  .hero-social-proof{gap:8px;margin-top:24px;}
  .proof-num{font-size:24px;}
  .proof-label{font-size:9px;}
  .section-eyebrow{font-size:9px;letter-spacing:0.08em;}
  .section-sub{font-size:13px;margin-bottom:20px;}
  .problem-card{padding:16px 12px;}
  .problem-icon{font-size:22px;margin-bottom:8px;}
  .problem-card h3{font-size:16px;}
  .problem-card p{font-size:12px;}
  .solution-card{padding:16px 12px;}
  .tk-card{padding:16px 12px;}
  .tk-num{font-size:28px;}
  .tk-icon{font-size:22px;margin-bottom:8px;}
  .tk-card h3{font-size:15px;}
  .tk-card p{font-size:11px;}
  .toolkit-wrap{padding:28px 12px !important;}
  .pricing-card{padding:20px 12px;}
  .pricing-name{font-size:20px;}
  .pricing-price{font-size:32px;margin-bottom:16px;}
  .pricing-feature{font-size:12px;}
  .faq-q{padding:14px 12px;font-size:13px;}
  .faq-a{font-size:12px;}
  .ba-card{padding:12px;}
  .final-cta{padding:28px 12px;}
  .uc-card{padding:16px 12px;}
}