/* =========================================================
   The Era Post — Inner pages (About Us, Unicode converter, etc.)
   Relies on color variables from header-nav.css (--navy,
   --navy-dark, --gold, --content-max) — load this file
   together with header-nav.css.
   ========================================================= */

/* ---------------------------------------------------------
   1. Page hero banner — full-bleed, replaces the old
      ".cat-box / .cat-name" title strip on these pages
   --------------------------------------------------------- */
.page-hero{
  width:100%;
  background:linear-gradient(120deg, var(--navy), var(--navy-dark));
  padding:34px 20px 30px;
}
.page-hero__wrap{
  max-width:var(--content-max);
  margin:0 auto;
}
.page-hero__crumbs{
  font-family:'Poppins',sans-serif;
  font-size:12.5px;
  color:rgba(255,255,255,.6);
  margin:0 0 8px;
}
.page-hero__crumbs a{ color:rgba(255,255,255,.85); text-decoration:none; }
.page-hero__crumbs a:hover{ color:var(--gold); }
.page-hero__crumbs .sep{ margin:0 6px; opacity:.5; }
.page-hero h1{
  font:700 28px 'Mukta',sans-serif;
  color:#fff;
  margin:0;
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}
.page-hero h1:after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:44px; height:3px; border-radius:2px;
  background:var(--gold);
}

/* ---------------------------------------------------------
   2. Generic content card wrapper
   --------------------------------------------------------- */
.page-body{
  max-width:var(--content-max);
  margin:0 auto;
  padding:28px 20px 60px;
}
.content-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px 30px;
  box-shadow:0 4px 18px rgba(19,15,82,.06);
}
.content-card p{
  font:400 16.5px/1.9 'Mukta',sans-serif;
  color:var(--ink);
  margin:0 0 16px;
}
.content-card p:last-child{ margin-bottom:0; }

/* About Us — contact + team info grid */
.about-info-grid{
  margin-top:26px;
  padding-top:26px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.about-info-col h3{
  font:700 15.5px 'Poppins',sans-serif;
  color:var(--navy);
  margin:0 0 16px;
  position:relative;
  padding-bottom:12px;
}
.about-info-col h3:after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:34px; height:3px; border-radius:2px;
  background:var(--red);
}
.about-info-col ul{ margin:0; padding:0; list-style:none; }
.about-info-col ul li{
  display:flex; align-items:flex-start; gap:10px;
  font:400 15px/1.6 'Mukta',sans-serif;
  color:var(--ink-soft);
  margin-bottom:13px;
}
.about-info-col ul li.primary{ color:var(--ink); font-weight:700; font-size:15.5px; }
.about-info-col ul li svg{ width:15px; height:15px; flex-shrink:0; margin-top:3px; color:var(--red); }
.about-info-col ul li .role{
  color:var(--ink-soft); font-family:'Poppins',sans-serif; font-size:11.5px;
  display:block; margin-bottom:2px;
}
.about-info-col ul li .name{ display:block; font-weight:600; color:var(--ink); font-size:15px; }

@media (max-width:600px){
  .about-info-grid{ grid-template-columns:1fr; gap:22px; }
}

/* ---------------------------------------------------------
   3. Unicode converter — tabbed card
   --------------------------------------------------------- */
.unicode-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(19,15,82,.06);
}
.unicode-tabs{
  display:flex;
  background:var(--mist);
  border-bottom:1px solid var(--line);
}
.unicode-tabs button{
  flex:1;
  border:none;
  background:transparent;
  padding:16px 12px;
  font:600 15.5px 'Mukta',sans-serif;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.unicode-tabs button:hover{ color:var(--navy); }
.unicode-tabs button.is-active{
  color:var(--navy);
  background:var(--paper);
  border-color:var(--red);
}
.unicode-panel{ display:none; padding:22px; }
.unicode-panel.is-active{ display:block; }
.unicode-panel iframe{
  width:100%;
  height:400px;
  border:1px solid var(--line);
  border-radius:8px;
  display:block;
}
.unicode-hint{
  font-family:'Poppins',sans-serif;
  font-size:12.5px;
  color:var(--ink-soft);
  margin:0 0 14px;
}

@media (max-width:600px){
  .page-hero h1{ font-size:23px; }
  .content-card{ padding:22px 18px; }
  .unicode-panel iframe{ height:320px; }
  .unicode-tabs button{ font-size:14px; padding:14px 8px; }
}