/*
Theme Name: Syed Jazib Shah
Theme URI: https://syedjazib.com
Author: SaaSLinkBuilder
Author URI: https://saaslinkbuilder.io
Description: A single-page theme for Syed Jazib Shah, Chairman of Town Committee Nasarpur, District Tando Allahyar. Palette and tile motif drawn from Nasarpur's Kashi pottery and ajrak. All text, photos and contact details are editable from Appearance > Customize > Homepage Content.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syedjazib
Tags: one-column, custom-colors, custom-menu, editor-style, translation-ready
*/

.sjs, .sjs *, .sjs *::before, .sjs *::after { box-sizing: border-box; }

body { margin: 0; }

.sjs {
  /* Kashi tile glaze palette - Nasarpur's own colours */
  --ink:       #10243A;
  --tile:      #0F3A66;
  --indigo:    #1B4E86;
  --turquoise: #2E9AA0;
  --crimson:   #9E2B2B;
  --gold:      #C9A227;
  --paper:     #F5F7F6;
  --white:     #FFFFFF;
  --muted:     #5A6B7C;
  --line:      #DDE3E6;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 56px);

  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sjs p, .sjs h1, .sjs h2, .sjs h3, .sjs ul, .sjs figure, .sjs blockquote { margin: 0; }
.sjs ul { list-style: none; padding: 0; }
.sjs img { display: block; max-width: 100%; height: auto; }
.sjs a { color: inherit; }

.sjs h1, .sjs h2, .sjs h3 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.sjs h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.sjs h3 { font-size: 1.18rem; line-height: 1.3; }

.sjs__wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.sjs :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.sjs__skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--gold); color: var(--ink); padding: 12px 20px; text-decoration: none;
}
.sjs__skip:focus { left: 0; }

/* ---------- Kashi tile band: the recurring structural motif ---------- */
.sjs__band {
  height: 34px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='34' viewBox='0 0 48 34'%3E%3Cg fill='none' stroke='%231B4E86' stroke-width='1.4'%3E%3Crect x='10' y='3' width='28' height='28'/%3E%3Crect x='10' y='3' width='28' height='28' transform='rotate(45 24 17)'/%3E%3C/g%3E%3Ccircle cx='24' cy='17' r='3.2' fill='%232E9AA0'/%3E%3C/svg%3E");
  opacity: .5;
}
.sjs__band--onDark {
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='34' viewBox='0 0 48 34'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.4'%3E%3Crect x='10' y='3' width='28' height='28'/%3E%3Crect x='10' y='3' width='28' height='28' transform='rotate(45 24 17)'/%3E%3C/g%3E%3Ccircle cx='24' cy='17' r='3.2' fill='%232E9AA0'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
.sjs__nav {
  background: var(--ink);
  color: var(--white);
  position: sticky; top: 0; z-index: 40;
}
body.admin-bar .sjs__nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .sjs__nav { top: 46px; } }

.sjs__navInner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 62px;
}
.sjs__mark {
  font-family: "Spectral", serif; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.sjs__mark span { color: var(--gold); }
.sjs__navLinks ul { display: flex; gap: 26px; flex-wrap: wrap; }
.sjs__navLinks a {
  text-decoration: none; font-size: .93rem; color: #C6D4E0;
  padding: 6px 0; border-bottom: 2px solid transparent; display: inline-block;
}
.sjs__navLinks a:hover { color: var(--white); border-bottom-color: var(--gold); }

/* ---------- Hero ---------- */
.sjs__hero {
  background: var(--tile);
  background-image:
    radial-gradient(120% 90% at 82% 6%, #1D5691 0%, rgba(29,86,145,0) 60%),
    linear-gradient(180deg, #0F3A66 0%, #0C2E52 100%);
  color: var(--white);
  padding-block: clamp(48px, 8vw, 92px);
  position: relative;
}
.sjs__heroGrid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
.sjs__kicker {
  font-size: .9rem; color: var(--gold); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.sjs__kicker::before {
  content: ""; width: 34px; height: 2px; background: var(--gold); flex: none;
}
.sjs__hero h1 {
  font-size: clamp(2.7rem, 7vw, 4.9rem);
  font-weight: 700; letter-spacing: -0.025em; margin-bottom: 6px;
}
.sjs__nastaliq {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 2.1; color: var(--turquoise); direction: rtl;
  margin-bottom: 20px;
}
.sjs__role {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: #CBDCEA;
  max-width: 36ch; padding-left: 18px; border-left: 3px solid var(--crimson);
  margin-bottom: 30px;
}
.sjs__role strong { color: var(--white); font-weight: 600; }
.sjs__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.sjs__btn {
  display: inline-block; text-decoration: none; font-size: .96rem; font-weight: 500;
  padding: 13px 26px; border: 2px solid transparent; transition: background .18s, color .18s;
  cursor: pointer;
}
.sjs__btn--solid { background: var(--gold); color: var(--ink); }
.sjs__btn--solid:hover { background: #DDB63A; }
.sjs__btn--ghost { border-color: rgba(255,255,255,.4); color: var(--white); }
.sjs__btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

/* Arched portrait frame - a nod to Sindhi architecture, not a rounded card */
.sjs__arch { position: relative; }
.sjs__arch img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 22%;
  border-radius: 260px 260px 6px 6px;
  border: 1px solid rgba(201,162,39,.55);
  padding: 9px; background: rgba(255,255,255,.06);
}

/* ---------- Generic section ---------- */
.sjs__section { padding-block: clamp(56px, 8vw, 96px); }
.sjs__section--paper { background: var(--paper); }
.sjs__lede {
  font-family: "Spectral", serif; font-size: 1.22rem; line-height: 1.6;
  color: var(--indigo); max-width: 62ch; margin-top: 20px;
}
.sjs__body { max-width: 66ch; margin-top: 22px; }
.sjs__body p + p { margin-top: 17px; }
.sjs__body p { color: #33465A; }

/* ---------- About ---------- */
.sjs__about { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 68px); align-items: start; }
.sjs__about figure img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 60% 40%;
  border-radius: 4px;
}
.sjs__caption {
  font-size: .84rem; color: var(--muted); margin-top: 12px; padding-left: 12px;
  border-left: 2px solid var(--turquoise);
}
.sjs__facts { margin-top: 34px; border-top: 1px solid var(--line); }
.sjs__facts li {
  display: flex; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: .95rem; align-items: baseline;
}
.sjs__facts b { flex: 0 0 132px; font-weight: 600; color: var(--indigo); }
.sjs__facts span { color: #33465A; }

/* ---------- Priorities: square tiles ---------- */
.sjs__tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line); margin-top: 44px;
}
.sjs__tile { background: var(--white); padding: 32px 28px 34px; }
.sjs__tile h3 { margin-bottom: 10px; }
.sjs__tile p { font-size: .95rem; color: #43566A; }
.sjs__tileMark {
  width: 26px; height: 26px; margin-bottom: 18px;
  background-size: contain; background-repeat: no-repeat;
}
.sjs__tile:nth-child(3n+1) .sjs__tileMark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%231B4E86' stroke-width='1.6'%3E%3Crect x='2' y='2' width='22' height='22'/%3E%3Crect x='2' y='2' width='22' height='22' transform='rotate(45 13 13)'/%3E%3C/g%3E%3C/svg%3E"); }
.sjs__tile:nth-child(3n+2) .sjs__tileMark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%232E9AA0' stroke-width='1.6'%3E%3Crect x='2' y='2' width='22' height='22'/%3E%3Crect x='2' y='2' width='22' height='22' transform='rotate(45 13 13)'/%3E%3C/g%3E%3C/svg%3E"); }
.sjs__tile:nth-child(3n+3) .sjs__tileMark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%239E2B2B' stroke-width='1.6'%3E%3Crect x='2' y='2' width='22' height='22'/%3E%3Crect x='2' y='2' width='22' height='22' transform='rotate(45 13 13)'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- People / quote ---------- */
.sjs__people { background: var(--ink); color: var(--white); }
.sjs__peopleGrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
.sjs__peopleGrid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; }
.sjs__people h2 { color: var(--white); }
.sjs__quote {
  font-family: "Spectral", serif; font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.45;
  color: var(--white); margin-top: 22px; padding-left: 22px;
  border-left: 3px solid var(--gold);
}
.sjs__peopleText { color: #B9CBDA; margin-top: 22px; max-width: 46ch; }

/* ---------- Contact ---------- */
.sjs__contactGrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 64px); margin-top: 36px; }
.sjs__contactList li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.sjs__contactList li:first-child { border-top: 1px solid var(--line); }
.sjs__contactList b { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; margin-bottom: 3px; }
.sjs__contactList a, .sjs__contactList span { font-size: 1.06rem; color: var(--indigo); text-decoration: none; }
.sjs__contactList a:hover { text-decoration: underline; }
.sjs__noteBox { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--crimson); padding: 30px 28px; }
.sjs__noteBox h3 { margin-bottom: 12px; }
.sjs__noteBox p { font-size: .96rem; color: #43566A; }
.sjs__social { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.sjs__social a {
  text-decoration: none; font-size: .9rem; padding: 9px 18px;
  border: 1px solid var(--indigo); color: var(--indigo);
}
.sjs__social a:hover { background: var(--indigo); color: var(--white); }

/* ---------- Footer ---------- */
.sjs__footer { background: var(--ink); color: #9FB4C6; padding-block: 34px; font-size: .88rem; }
.sjs__footerInner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sjs__footer a { color: #9FB4C6; text-decoration: none; }
.sjs__footer a:hover { color: var(--white); }

/* ---------- Inner pages and blog fallback ---------- */
.sjs__pageHead { background: var(--tile); color: var(--white); padding-block: clamp(44px, 6vw, 72px); }
.sjs__pageHead h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
.sjs__pageHead p { color: #B9CBDA; margin-top: 10px; }
.sjs__content { max-width: 72ch; margin-inline: auto; }
.sjs__content p, .sjs__content ul, .sjs__content ol, .sjs__content h2, .sjs__content h3, .sjs__content figure, .sjs__content blockquote { margin-bottom: 20px; }
.sjs__content ul, .sjs__content ol { list-style: revert; padding-left: 22px; }
.sjs__content a { color: var(--indigo); }
.sjs__entry { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.sjs__entry h2 a { text-decoration: none; }
.sjs__entry h2 a:hover { color: var(--indigo); }
.sjs__meta { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.sjs__pagination { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.sjs__pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); text-decoration: none; color: var(--indigo); }
.sjs__pagination .current { background: var(--indigo); color: var(--white); border-color: var(--indigo); }

/* ---------- One orchestrated entrance, hero only ---------- */
@keyframes sjsRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sjs__hero .sjs__kicker,
.sjs__hero h1,
.sjs__hero .sjs__nastaliq,
.sjs__hero .sjs__role,
.sjs__hero .sjs__cta,
.sjs__hero .sjs__arch { animation: sjsRise .7s cubic-bezier(.2,.7,.3,1) backwards; }
.sjs__hero h1 { animation-delay: .06s; }
.sjs__hero .sjs__nastaliq { animation-delay: .12s; }
.sjs__hero .sjs__role { animation-delay: .18s; }
.sjs__hero .sjs__cta { animation-delay: .24s; }
.sjs__hero .sjs__arch { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  .sjs *, .sjs *::before, .sjs *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sjs__tiles { grid-template-columns: repeat(2, 1fr); }
  .sjs__navLinks { display: none; }
  .sjs__navInner { justify-content: center; }
}
@media (max-width: 780px) {
  .sjs__heroGrid,
  .sjs__about,
  .sjs__peopleGrid,
  .sjs__contactGrid { grid-template-columns: 1fr; }
  .sjs__arch { order: -1; max-width: 320px; }
  .sjs__peopleGrid img { aspect-ratio: 4/3; }
  .sjs__facts b { flex-basis: 108px; }
}
@media (max-width: 560px) {
  .sjs__tiles { grid-template-columns: 1fr; }
  .sjs { font-size: 16px; }
}

/* ---------- WordPress core classes ---------- */
.sjs .alignleft { float: left; margin: 0 24px 20px 0; }
.sjs .alignright { float: right; margin: 0 0 20px 24px; }
.sjs .aligncenter { display: block; margin-inline: auto; }
.sjs .wp-caption-text, .sjs .wp-element-caption { font-size: .84rem; color: var(--muted); }
.sjs .screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute !important; width: 1px; white-space: nowrap;
}
.sjs .sticky, .sjs .gallery-caption, .sjs .bypostauthor { }