/*
Theme Name: Shaharudin Farouk
Theme URI: https://shaharudin.com/
Author: Menara Group
Author URI: https://shaharudin.com/
Description: A bilingual (English / Bahasa Malaysia) single-page mentorship and profile theme for Shaharudin Farouk, Executive Director of Menara Group, Shah Alam. Cream and navy palette, Cormorant Garamond display type, and a four-petal section motif. Contact details, logo and the WhatsApp button are editable from the Customizer.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shaharudin
Tags: one-column, custom-logo, custom-colors, translation-ready, accessibility-ready, blog
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root{
  --cream:#FBF7EF;
  --cream-2:#F4EDE0;
  --navy:#1B3A57;
  --navy-deep:#12293F;
  --sky:#A8CDE8;
  --sky-deep:#35688F;
  --muted:#5F6E7C;
  --line:#E3DACA;
  --white:#FFFFFF;

  --gutter:22px;
  --anchor-offset:90px;
}

/* =========================================================
   2. Base
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--navy);
  line-height:1.7;
  font-size:16.5px;
  font-weight:400;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  line-height:1.15;
  color:var(--navy);
  overflow-wrap:break-word;
}
p,li,blockquote{overflow-wrap:break-word}
.script{font-family:'Allura',cursive;font-weight:400;color:var(--sky-deep)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 var(--gutter)}

/* Anchor targets clear the sticky header. */
section[id],main [id]{scroll-margin-top:var(--anchor-offset)}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--cream);
  padding:12px 20px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:500;text-decoration:none;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--sky-deep);outline-offset:2px}
.profile :focus-visible,.contact :focus-visible,.hero :focus-visible{outline-color:var(--sky)}

/* =========================================================
   3. Header + navigation
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,239,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 0;gap:14px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0}
.brand img{height:46px;width:auto;flex:none}
.brand .mono{
  display:none;width:46px;height:46px;flex:none;
  border:1.5px solid var(--sky-deep);border-radius:50%;
  font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--sky-deep);
  align-items:center;justify-content:center;
}
.brand.noimg img{display:none}
.brand.noimg .mono{display:flex}
.brand-text{min-width:0}
.brand-name{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;font-weight:600;letter-spacing:.01em;
  display:block;line-height:1.2;
}
.brand-sub{
  display:block;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky-deep);font-weight:500;line-height:1.4;
}

nav.links{display:flex;gap:26px;font-size:14px;font-weight:500;letter-spacing:.03em}
nav.links a{text-decoration:none;color:var(--muted);transition:color .15s ease}
nav.links a:hover,nav.links a:focus-visible{color:var(--navy)}

.nav-actions{display:flex;align-items:center;gap:10px;flex:none}

.lang-toggle{
  border:1px solid var(--line);border-radius:999px;
  display:flex;overflow:hidden;
  font-size:12px;font-weight:600;background:var(--white);
}
.lang-toggle button{
  border:0;background:transparent;padding:6px 13px;
  cursor:pointer;color:var(--muted);
  min-height:32px;transition:background .15s ease,color .15s ease;
}
.lang-toggle button.active{background:var(--navy);color:var(--cream)}

/* Hamburger */
.nav-toggle{
  display:none;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;color:var(--navy);
}
.nav-toggle .bars{display:block;width:20px;height:14px;position:relative}
.nav-toggle .bars i{
  position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease,top .22s ease;
}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:6.2px}
.nav-toggle .bars i:nth-child(3){top:12.4px}
.site-header.nav-open .nav-toggle .bars i:nth-child(1){top:6.2px;transform:rotate(45deg)}
.site-header.nav-open .nav-toggle .bars i:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle .bars i:nth-child(3){top:6.2px;transform:rotate(-45deg)}

/* =========================================================
   4. Hero
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(68px,9vw,110px) 0 clamp(60px,8vw,100px);
  background:
    linear-gradient(100deg,rgba(6,18,28,.94) 0%,rgba(9,26,40,.84) 55%,rgba(13,32,50,.72) 100%),
    url("assets/img/hero-mountain.jpg") center/cover no-repeat var(--navy-deep);
}
.hero>.wrap{position:relative;z-index:1}

/* The photo has a bright sky behind the copy: every hero string is shadowed. */
.hero h1,
.hero .script-line,
.hero .title-line,
.hero p.lead,
.hero-fact div span,
.hero-fact div small{text-shadow:0 2px 16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.7)}

.hero h1{color:var(--white);font-size:clamp(32px,6.5vw + 12px,76px);max-width:15ch}
.hero .script-line{color:#C6E1F7;font-size:clamp(24px,5vw,34px);margin-bottom:10px;line-height:1.3}
.hero .title-line{
  margin-top:14px;font-size:clamp(11px,2.6vw,13px);
  letter-spacing:.26em;text-transform:uppercase;color:#BEDCF5;font-weight:600;
}
.hero p.lead{
  margin:26px 0 36px;max-width:58ch;
  color:#E7F0F8;font-size:clamp(15.5px,1.4vw + 11px,18px);font-weight:300;
}
.hero .btn-ghost{background:rgba(255,255,255,.10);border-color:var(--sky);color:var(--white)}
.hero .btn-primary{background:var(--sky-deep);color:var(--white)}
.hero::after,.hero::before{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
}
.hero::after{right:-140px;top:-140px;width:420px;height:420px}
.hero::before{right:-80px;top:-80px;width:300px;height:300px;border-color:rgba(255,255,255,.14)}

.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;border-radius:999px;
  padding:14px 28px;min-height:48px;
  font-weight:500;font-size:15px;letter-spacing:.04em;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:var(--cream);box-shadow:0 8px 22px rgba(27,58,87,.22)}
.btn-ghost{border:1.5px solid var(--sky-deep);color:var(--navy);background:var(--white)}

.hero-fact{margin-top:clamp(34px,5vw,54px);display:flex;gap:26px 44px;flex-wrap:wrap}
.hero-fact div{min-width:0;flex:1 1 160px}
.hero-fact div span{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(23px,3vw,28px);font-weight:600;color:var(--white);
}
.hero-fact div small{font-size:13px;color:#D5E4F1;letter-spacing:.04em;display:block;font-weight:500}

/* =========================================================
   5. Sections + petal motif
   ========================================================= */
.petal{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.petal::before,.petal::after{content:"";height:1px;width:52px;background:var(--sky-deep);opacity:.5}
.petal svg{width:22px;height:22px;fill:none;stroke:var(--sky-deep);stroke-width:1.3;flex:none}
.petal.center{justify-content:center}

section{padding:clamp(52px,7vw,78px) 0}
.sec-head{margin-bottom:clamp(30px,4vw,42px)}
.sec-head h2{font-size:clamp(28px,4vw,44px)}
.sec-head .script{font-size:clamp(22px,3.4vw,28px);display:block;margin-bottom:4px;line-height:1.3}
.sec-head p{color:var(--muted);max-width:62ch;margin-top:12px;font-weight:300}

/* Profile / faith band */
.profile{background:var(--navy);color:var(--cream)}
.profile h2{color:var(--cream)}
.profile .script{color:var(--sky)}
.profile p{color:#C9D7E4;max-width:66ch;margin-top:16px;font-weight:300}
.profile .role{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.profile .role div{
  border:1px solid rgba(168,205,232,.35);border-radius:14px;
  padding:16px 22px;background:rgba(168,205,232,.07);flex:1 1 200px;
}
.profile .role div b{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:600;color:var(--white);
}
.profile .role div small{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);display:block;
}
.profile blockquote{
  margin-top:36px;border-left:2px solid var(--sky);padding-left:20px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(19px,2.2vw,23px);font-style:italic;line-height:1.5;
  max-width:40ch;color:#DCE8F2;
}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;box-shadow:0 4px 18px rgba(27,58,87,.05);
}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--muted);font-weight:300}
.card .tag{
  display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky-deep);margin-bottom:12px;font-weight:600;
}

/* Lessons list */
.how{background:var(--cream-2)}
.how ol{list-style:none;counter-reset:step;display:grid;max-width:720px}
.how li{counter-increment:step;display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.how li:last-child{border-bottom:0}
.how li::before{
  content:counter(step,decimal-leading-zero);
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;
  color:var(--sky-deep);min-width:46px;flex:none;line-height:1.3;
}
.how li h3{font-size:20px;margin-bottom:5px}
.how li p{color:var(--muted);font-size:14.5px;font-weight:300}

/* Contact */
.contact{background:var(--navy-deep);color:var(--cream)}
.contact h2{color:var(--cream)}
.contact .script{color:var(--sky)}
.contact .grid{margin-top:34px}
.contact .card{background:rgba(255,255,255,.05);border-color:rgba(168,205,232,.28);box-shadow:none}
.contact .card h3{
  color:var(--sky);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-family:'Jost',sans-serif;font-weight:600;
}
.contact .card p{color:#DCE6EF;font-size:15.5px;margin-top:8px;font-weight:300}
.contact .card a{color:var(--white);text-decoration:underline;text-decoration-color:var(--sky-deep)}

.site-footer{padding:28px 0 92px;font-size:13px;color:var(--muted);text-align:center}

/* =========================================================
   6. WhatsApp floating button
   ========================================================= */
.wa{
  position:fixed;z-index:60;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  background:#25D366;color:#fff;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.22);text-decoration:none;
}
.wa svg{width:28px;height:28px;fill:#fff}

/* =========================================================
   7. Reveal-on-scroll (only when JS is running)
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* =========================================================
   8. Fallback article layout (non front-page requests)
   ========================================================= */
.entry{max-width:720px;margin:0 auto;padding:clamp(48px,7vw,78px) 0}
.entry h1{font-size:clamp(30px,5vw,48px);margin-bottom:18px}
.entry h2,.entry h3{margin:28px 0 10px}
.entry p,.entry ul,.entry ol{margin-bottom:16px}
.entry ul,.entry ol{padding-left:22px}
.entry a{color:var(--sky-deep)}

/* =========================================================
   9. Breakpoints
   ========================================================= */

/* --- Tablet and below: collapse the nav into a panel --- */
@media (max-width:900px){
  :root{--anchor-offset:82px}

  .nav-toggle{display:inline-flex}
  .lang-toggle button{min-height:44px;padding:0 15px}

  nav.links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    box-shadow:0 14px 26px rgba(27,58,87,.10);
    padding:6px 0;
    visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .site-header.nav-open nav.links{
    visibility:visible;opacity:1;transform:none;pointer-events:auto;
  }
  nav.links a{
    display:flex;align-items:center;
    min-height:48px;padding:0 var(--gutter);
    font-size:15.5px;color:var(--navy);
    border-bottom:1px solid rgba(227,218,202,.6);
  }
  nav.links a:last-child{border-bottom:0}
}

/* --- Tablet: two-up card grids --- */
@media (min-width:641px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .profile .role div{flex:1 1 240px}
}

/* Contact has three cards, so two-up orphans one. Once there is room for
   three comfortable columns, use them. */
@media (min-width:901px) and (max-width:1024px){
  .contact .grid{grid-template-columns:repeat(3,1fr)}
}

/* --- Mobile --- */
@media (max-width:640px){
  :root{--gutter:18px}

  .grid{grid-template-columns:1fr}

  /* Portrait crop pushes more bright sky behind the copy: run the overlay
     top-to-bottom and a shade darker again than the desktop value. */
  .hero{
    background:
      linear-gradient(170deg,rgba(6,18,28,.95) 0%,rgba(9,26,40,.89) 55%,rgba(13,32,50,.82) 100%),
      url("assets/img/hero-mountain.jpg") center/cover no-repeat var(--navy-deep);
  }
  .hero::after{right:-190px;top:-190px}
  .hero::before{right:-140px;top:-140px}
  .hero p.lead{margin:22px 0 30px}
  .hero-fact{gap:22px 28px}
  .hero-fact div{flex:1 1 130px}

  .cta-row .btn{flex:1 1 auto;min-width:0}

  .petal::before,.petal::after{width:34px}

  .how li{gap:14px;padding:20px 0}
  .how li::before{font-size:22px;min-width:34px}

  .profile .role{gap:12px}
  .profile .role div{padding:14px 18px;flex:1 1 100%}
  .profile blockquote{margin-top:28px;padding-left:16px}

  .card{padding:24px 20px;border-radius:16px}

  .site-footer{padding:24px 0 96px}
}

/* --- Phones: keep the header on one line ---
   Below 480px the brand block, the language toggle and the menu button no
   longer leave room for the subtitle without it wrapping and orphaning a
   word. Drop it here: the hero restates the same title immediately below. */
@media (max-width:480px){
  :root{--anchor-offset:80px}
  .nav{gap:8px;padding:11px 0}
  .brand{gap:9px}
  .brand img,.brand .mono{height:38px}
  .brand .mono{width:38px;font-size:16px}
  .brand-name{font-size:17px;white-space:nowrap}
  .brand-sub{display:none}
  .nav-actions{gap:6px}
  .lang-toggle{font-size:11px}
  .lang-toggle button{padding:0 12px}
}

@media (max-width:360px){
  .brand-name{font-size:15.5px}
  .lang-toggle button{padding:0 10px}
  .wa{width:52px;height:52px}
  .wa svg{width:26px;height:26px}
}

/* =========================================================
   10. Motion + print
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.wa,.cta-row,.nav-toggle{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .hero,.profile,.contact{background:#fff!important;color:#000!important}
  .hero h1,.profile h2,.contact h2,.profile p,.contact .card p{color:#000!important}
  .js .reveal{opacity:1!important;transform:none!important}
}