/*
Theme Name: Pen Scholar
Theme URI: https://penscholar.com
Author: Pen Scholar
Description: Academic coaching, editing & feedback theme for Pen Scholar. Fully customizable via the WordPress Customizer (logo, brand colors, contact details, social links).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pen-scholar
*/

/**
 * This stylesheet is deliberately limited to the theme "chrome" that's
 * genuinely shared and never duplicated elsewhere: header/nav/dropdown/
 * mobile-menu, footer, the .btn button system, the custom cursor, and
 * base reset/typography. Every page-templates/*.php file already carries
 * its OWN complete copy of its content CSS (hero/.sub/.hero-ctas/cards/
 * sections/etc, extracted verbatim from the original standalone page).
 *
 * That used to NOT be the case -- this file also had its own copies of
 * .hero/.sub/.hero-ctas/.why-card/etc, meant only as a fallback. The
 * problem: a page's own <style> block sometimes only overrides ONE
 * property of a rule (e.g. a 2-column hero page's own ".hero .sub{}"
 * only sets max-width, relying on flexbox defaults for the rest), and
 * CSS cascades per-PROPERTY, not per-rule. So this file's *other*
 * properties for that same selector (e.g. "margin:20px auto 0" meant for
 * the single-column, centered about-us-style hero) kept bleeding through
 * on every 2-column page, visibly shifting/centering text and buttons
 * that were supposed to stay left-aligned -- the repeatedly-reported
 * "paragraph and button aren't in their place" bug. Since every page is
 * already 100% self-sufficient for its own content styling, the fix is
 * to simply not duplicate any of that here at all.
 */

:root{
  --p1:#6d5cf6; --p2:#8b5cf6; --accent:#5b52f0;
  --p1r:109,92,246; --p2r:139,92,246; --accr:91,82,240;
  --cta-grad:linear-gradient(135deg,#4a3fd6,#7c3aed 55%,#a855f7);
  --shadow-rgb:30,20,80;
  --text:#12121a; --text2:#54546a; --muted:#63637a;
  --bg:#ffffff; --bg-soft:#f7f7fb; --border:rgba(18,18,26,.07);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}
table{max-width:100%;}
pre,table,.tool-panel{overflow-x:auto;}
body{margin:0;font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;}
::selection{background:rgba(var(--p1r),.18);}

/* Fade-in-on-scroll. Kept short/small on purpose (was a big translateY
   with a long transition) -- that made elements visibly sit in a
   "not arrived yet" position for a moment right after page load, easy
   to mistake for misplaced content. main.js and footer.php both also
   force-reveal everything after 1.5-2s regardless, so nothing can be
   left permanently invisible if a script fails to run. */
[data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;will-change:opacity,transform;}
[data-reveal="left"]{transform:translateX(-10px);}
[data-reveal="right"]{transform:translateX(10px);}
[data-reveal="scale"]{transform:scale(.98);}
[data-reveal].in{opacity:1;transform:none;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-24px)}}

/* Header */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(255,255,255,.72);border-bottom:1px solid rgba(18,18,26,.06);transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;}
header.stuck{background:rgba(255,255,255,.9);box-shadow:0 8px 30px -18px rgba(var(--shadow-rgb),.28);border-bottom-color:rgba(18,18,26,.09);}
nav.topnav{max-width:1200px;margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:flex;align-items:center;gap:11px;color:var(--text);}
.custom-logo{height:46px;width:auto;max-height:46px;display:block;}
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--p1),var(--p2));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(var(--p1r),.7);flex:none;}
.logo-text{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--text);}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500;color:#48485a;}
.nav-links a{position:relative;color:inherit;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--p1),var(--p2));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--accent);font-weight:700;}
.nav-links a.active::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:14px;}
.signin{font-size:14.5px;font-weight:600;color:#48485a;}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;border:none;cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,border-color .2s ease,background .2s ease;font-family:inherit;white-space:normal;}
.btn:active{transform:translateY(-1px) scale(.98);}
.btn-primary{background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;box-shadow:0 8px 22px -10px rgba(var(--p1r),.8);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(var(--p1r),.9);color:#fff;}
.btn-primary.lg{padding:15px 26px;font-size:16px;border-radius:13px;box-shadow:0 14px 34px -12px rgba(var(--p1r),.85);}
.btn-primary.lg:hover{box-shadow:0 22px 44px -14px rgba(var(--p1r),.95);}
.btn-primary.nav{padding:10px 18px;font-size:14.5px;border-radius:11px;}
.btn-secondary{background:#fff;color:var(--text);font-weight:600;border:1px solid rgba(18,18,26,.12);padding:15px 24px;font-size:16px;border-radius:13px;}
.btn-secondary:hover{border-color:rgba(var(--p1r),.5);transform:translateY(-3px);}
.btn-white{background:#fff;color:var(--accent);padding:15px 28px;font-size:16px;border-radius:13px;box-shadow:0 14px 34px -14px rgba(0,0,0,.4);}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(0,0,0,.5);color:var(--accent);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);padding:15px 26px;font-size:16px;border-radius:13px;font-weight:600;}
.btn-ghost:hover{background:rgba(255,255,255,.22);transform:translateY(-3px);color:#fff;}
.btn-whatsapp{background:#25D366;color:#fff;padding:15px 26px;font-size:16px;border-radius:13px;box-shadow:0 14px 34px -14px rgba(37,211,102,.55);}
.btn-whatsapp:hover{transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(37,211,102,.6);color:#fff;}

.burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid rgba(18,18,26,.12);align-items:center;justify-content:center;background:#fff;cursor:pointer;flex:none;}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:16px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .25s ease,opacity .25s ease;}
.burger span::before{position:absolute;top:-6px;}
.burger span::after{position:absolute;top:6px;}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:10px 24px 18px;border-bottom:1px solid rgba(18,18,26,.07);background:rgba(255,255,255,.98);}
.mobile-menu a{padding:12px 4px;font-size:15px;font-weight:600;color:var(--text2);border-bottom:1px solid rgba(18,18,26,.05);}
.mobile-menu a.mm-cta{display:flex;justify-content:center;padding:13px 18px;margin:10px 0 14px;border:none;border-radius:11px;color:#fff;}
.mobile-menu a.active{color:var(--accent);}
.mobile-menu.open{display:flex;}

/* Breadcrumb */
.crumb{max-width:1200px;margin:0 auto;padding:22px 24px 0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#8a8a9c;flex-wrap:wrap;}
.crumb a{color:#63637a;}
.crumb a:hover{color:var(--accent);}
.crumb .sep{color:#c7c7d4;}
.crumb .curr{color:var(--text);}

/* Footer */
footer{border-top:1px solid rgba(18,18,26,.07);padding:56px 24px 34px;background:#fafafc;}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.3fr 0.9fr 0.9fr 0.9fr 1fr;gap:32px;}
.footer-col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;}
.footer-links{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted);}
.footer-links a{position:relative;color:inherit;width:fit-content;transition:color .2s ease;}
.footer-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.footer-links a:hover::after{transform:scaleX(1);}
[data-social]{color:var(--social-brand,var(--accent));transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s ease,color .25s ease,border-color .25s ease;}
[data-social]:hover{transform:translateY(-3px) scale(1.08);background:var(--social-brand,var(--accent));color:#fff;border-color:transparent;}
.footer-bottom{max-width:1200px;margin:38px auto 0;padding-top:24px;border-top:1px solid rgba(18,18,26,.07);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:13px;color:#8a8a9c;}

@media (max-width:920px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .nav-right .btn.nav{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none;opacity:1;transform:none;}
  *{animation:none!important;}
  .ps-cursor-dot,.ps-cursor-ring,.ps-ripple{display:none!important;}
  body.ps-cursor-on,body.ps-cursor-on *{cursor:auto!important;}
}

/* Custom cursor */
.ps-cursor-glow{position:fixed;top:0;left:0;width:70px;height:70px;pointer-events:none;z-index:99997;border-radius:50%;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(circle,rgba(var(--p2r),.30),rgba(var(--accr),.12) 55%,transparent 72%);filter:blur(2px);transition:opacity .35s ease,width .3s ease,height .3s ease;}
body.ps-cursor-on.ps-cursor-ready .ps-cursor-glow{opacity:1;animation:ps-pulse 2.2s ease-in-out infinite;}
body.ps-cursor-on.ps-cursor-hover .ps-cursor-glow{width:96px;height:96px;}
@keyframes ps-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9);}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.12);}}
.ps-cursor-dot,.ps-cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;transform:translate(-50%,-50%);opacity:0;}
.ps-cursor-dot{width:7px;height:7px;background:var(--accent);transition:opacity .3s ease,width .25s ease,height .25s ease,background-color .25s ease;}
.ps-cursor-ring{width:34px;height:34px;border:1.5px solid rgba(var(--accr),.55);transition:opacity .3s ease,width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),background-color .28s ease,border-color .28s ease;}
body.ps-cursor-on.ps-cursor-ready .ps-cursor-dot,body.ps-cursor-on.ps-cursor-ready .ps-cursor-ring{opacity:1;}
body.ps-cursor-on.ps-cursor-hover .ps-cursor-ring{width:58px;height:58px;background:rgba(var(--accr),.09);border-color:rgba(var(--p2r),.55);}
body.ps-cursor-on.ps-cursor-hover .ps-cursor-dot{width:9px;height:9px;}
body.ps-cursor-on.ps-cursor-down .ps-cursor-ring{width:26px;height:26px;}
body.ps-cursor-on.ps-cursor-text .ps-cursor-dot{background:var(--p2);}
body.ps-cursor-on.ps-cursor-text .ps-cursor-ring{border-color:rgba(var(--p2r),.7);background:rgba(var(--p2r),.08);}
body.ps-cursor-on.ps-cursor-text .ps-cursor-glow{background:radial-gradient(circle,rgba(var(--p2r),.32),rgba(var(--p2r),.12) 55%,transparent 72%);}
body.ps-cursor-on.ps-cursor-btn .ps-cursor-dot{background:var(--p2);}
body.ps-cursor-on.ps-cursor-btn .ps-cursor-ring{border-color:rgba(var(--p2r),.7);background:rgba(var(--p2r),.08);}
body.ps-cursor-on.ps-cursor-btn .ps-cursor-glow{background:radial-gradient(circle,rgba(var(--p2r),.32),rgba(var(--p2r),.12) 55%,transparent 72%);}
.ps-ripple{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:rgba(var(--accr),.35);pointer-events:none;z-index:99998;transform:translate(-50%,-50%) scale(0);animation:ps-ripple .55s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes ps-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}
@media (hover:hover) and (pointer:fine){body.ps-cursor-on,body.ps-cursor-on *{cursor:none!important;}}

/* Dropdown nav */
.nav-drop{position:relative;}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font:inherit;font-size:14.5px;font-weight:500;color:#48485a;cursor:pointer;padding:0;}
.nav-drop-btn .chev{transition:transform .2s ease;flex:none;}
.nav-drop:hover .nav-drop-btn .chev,.nav-drop:focus-within .nav-drop-btn .chev{transform:rotate(180deg);}
.nav-drop-btn:hover{color:var(--accent);}
.nav-drop-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:70;}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{opacity:1;pointer-events:auto;}
.nav-drop-panel-inner{min-width:250px;background:#fff;border:1px solid rgba(18,18,26,.08);border-radius:14px;box-shadow:0 24px 48px -20px rgba(var(--shadow-rgb),.35);padding:10px;transform:translateY(-8px);transition:transform .2s ease;}
.nav-drop:hover .nav-drop-panel-inner,.nav-drop:focus-within .nav-drop-panel-inner{transform:translateY(0);}
.nav-drop-panel a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--text2);transition:background .15s ease,color .15s ease;}
.nav-drop-panel a:hover{background:rgba(var(--p1r),.08);color:var(--accent);}
.mm-group{border-bottom:1px solid rgba(18,18,26,.05);}
.mm-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 4px;font-size:15px;font-weight:600;color:var(--text2);background:none;border:none;font-family:inherit;cursor:pointer;}
.mm-toggle .chev{transition:transform .2s ease;}
.mm-toggle.open .chev{transform:rotate(180deg);}
.mm-panel{display:none;flex-direction:column;padding:0 4px 10px 14px;}
.mm-panel.open{display:flex;}
.mm-panel a{padding:8px 0;font-size:14px;font-weight:600;color:var(--muted);}

/* Footer contact column */
.footer-contact{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted);}
.footer-contact a{color:inherit;}
.footer-contact a:hover{color:var(--accent);}
.footer-whatsapp-btn{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:290px;padding:15px 20px;border-radius:12px;background:#25D366;color:#fff;font-weight:700;font-size:15px;line-height:1.3;text-align:center;box-shadow:0 10px 24px -10px rgba(37,211,102,.6);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,background-color .2s ease;}
.footer-whatsapp-btn svg{width:28px;height:28px;flex:none;}
.footer-whatsapp-btn:hover{transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(37,211,102,.7);background:#1fb855;color:#fff;}

/* Home page card hover system (page-templates/home.php) */
.ps-card{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,border-color .25s ease;}
.ps-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -26px rgba(30,20,80,.32);}
.ps-svc-card:hover{border-color:rgba(109,92,246,.35) !important;}
.ps-feat-card:hover{box-shadow:0 22px 46px -26px rgba(30,20,80,.28);}
.ps-step-card:hover{border-color:rgba(109,92,246,.32) !important;}
.ps-testi-card:hover{box-shadow:0 26px 50px -28px rgba(30,20,80,.3);}

/* ==========================================================================
   Dark mode
   Header/footer/nav/buttons already read colour from the :root variables
   above, so redefining those variables under [data-theme="dark"] re-skins
   all shared chrome cleanly. Every page-templates/*.php file, however,
   carries its OWN hardcoded inline hex colors for its content (by design,
   see the note at the top of this file) -- rewriting every one of those
   across 50+ files isn't practical, so <main> (present, exactly once, on
   every single page template) gets a CSS invert+hue-rotate flip instead.
   That is a standard technique for retrofitting dark mode onto markup that
   wasn't built with theme variables: it swaps light backgrounds/dark text
   for dark backgrounds/light text throughout page content in one rule, and
   <main> img/video get the same filter applied a second time, which cancels
   the first out so real photos still render in their true original colors.
   Header/footer/the cursor-follow dots live OUTSIDE <main> (in header.php /
   footer.php) so this filter never touches them or their fixed-position
   elements. ========================================================== */
:root[data-theme="dark"]{
  --text:#f1f1f7; --text2:#c7c7da; --muted:#a6a6bd;
  --bg:#0e0e15; --bg-soft:#181822; --border:rgba(255,255,255,.09);
}
[data-theme="dark"] header{background:rgba(14,14,21,.72);border-bottom-color:rgba(255,255,255,.08);}
[data-theme="dark"] header.stuck{background:rgba(14,14,21,.92);border-bottom-color:rgba(255,255,255,.1);}
[data-theme="dark"] .nav-links{color:#c7c7da;}
[data-theme="dark"] .nav-drop-btn{color:#c7c7da;}
[data-theme="dark"] .nav-drop-btn:hover{color:var(--accent);}
[data-theme="dark"] .nav-drop-panel-inner{background:#181822;border-color:rgba(255,255,255,.08);}
[data-theme="dark"] .nav-drop-panel a{color:#c7c7da;}
[data-theme="dark"] .nav-drop-panel a:hover{background:rgba(var(--p1r),.16);}
[data-theme="dark"] .signin{color:#c7c7da;}
[data-theme="dark"] .burger{background:#181822;border-color:rgba(255,255,255,.16);}
[data-theme="dark"] .burger span,[data-theme="dark"] .burger span::before,[data-theme="dark"] .burger span::after{background:var(--text);}
[data-theme="dark"] .mobile-menu{background:rgba(14,14,21,.98);border-bottom-color:rgba(255,255,255,.08);}
[data-theme="dark"] .mobile-menu a{border-bottom-color:rgba(255,255,255,.06);}
[data-theme="dark"] .mm-group{border-bottom-color:rgba(255,255,255,.07);}
[data-theme="dark"] .mm-toggle{color:#c7c7da;}
[data-theme="dark"] .mm-panel a{color:#a6a6bd;}
[data-theme="dark"] .crumb{color:#8f8fa6;}
[data-theme="dark"] .crumb a{color:#a6a6bd;}
[data-theme="dark"] .crumb .sep{color:#3a3a48;}
[data-theme="dark"] footer{background:#0c0c12;border-top-color:rgba(255,255,255,.08);}
[data-theme="dark"] .footer-bottom{color:#8f8fa6;border-top-color:rgba(255,255,255,.08);}
[data-theme="dark"] .btn-secondary{background:#181822;color:var(--text);border-color:rgba(255,255,255,.16);}
[data-theme="dark"] [data-social]{border-color:rgba(255,255,255,.16);}
[data-theme="dark"] .theme-toggle{background:#181822;border-color:rgba(255,255,255,.16);}

[data-theme="dark"] main{background:#0e0e15;filter:invert(1) hue-rotate(180deg);}
[data-theme="dark"] main img,[data-theme="dark"] main video,[data-theme="dark"] main iframe{filter:invert(1) hue-rotate(180deg);}

/* Toggle switch, header (desktop) + mobile menu */
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid rgba(18,18,26,.12);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--text);transition:transform .2s ease,background-color .2s ease,border-color .2s ease;}
.theme-toggle:hover{transform:translateY(-2px);}
.theme-toggle svg{width:17px;height:17px;display:block;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}