/* ==================================================================
   SmartExamPrep — hub theme (shared)
   Loaded once by partials/header.php, so it reaches every page that
   uses the site header: test-engine pages (te_head), workspace/admin
   pages (hw_page_open) and the content pages.

   It brings the older page chrome in line with the Practice hub:
   navy title panels with the orange glow, warm hairline cards, a
   single-row admin menu, and phone-friendly layouts. Page-specific
   <style> blocks still win where they are more specific.
   ================================================================== */
:root{
  --hub-navy:#0f2c4d;
  --hub-panel:linear-gradient(135deg,#0f2c4d 0%,#16406b 60%,#1b5a86 100%);
  --hub-glow:radial-gradient(circle at 100% 0,rgba(239,108,47,.55),rgba(239,108,47,0) 70%);
  --hub-line:#ebe3da;
  --hub-sh1:0 1px 2px rgba(15,44,77,.05),0 1px 1px rgba(15,44,77,.03);
  --hub-sh2:0 14px 34px -12px rgba(15,44,77,.22),0 2px 6px rgba(15,44,77,.06);
  --hub-ink-soft:#d6e2ef;
}

/* ---------- 1. Title panels: orange band -> navy hub panel ---------- */
.te-hero-in,
.hw-wrap .adm-hero,.hw-wrap .hw-h,.hw-wrap .rep-hero,.nt-h,
.subj-hero,
.contact-hero{
  background:var(--hub-panel) !important;
  color:#fff !important;
  position:relative;
  overflow:hidden;
  box-shadow:var(--hub-sh2) !important;
}
.te-hero-in::after,
.hw-wrap .adm-hero::after,.hw-wrap .hw-h::after,.hw-wrap .rep-hero::after,.nt-h::after,
.subj-hero::after,
.contact-hero::after{
  content:"";position:absolute;right:0;top:0;width:220px;height:180px;
  background:var(--hub-glow);pointer-events:none;z-index:0;
}
.te-hero-in>*,.hw-wrap .adm-hero>*,.hw-wrap .hw-h>*,.hw-wrap .rep-hero>*,.nt-h>*,.subj-hero>*,.contact-hero>*{position:relative;z-index:1}
.te-hero-in{border-radius:20px !important;padding:20px 24px !important;overflow:visible !important}
.te-hero-in::after{border-radius:0 20px 0 0}
/* the Engine tools menu must sit above the page, not be clipped by the panel */
.te-hero-in .te-tools{z-index:50}
.te-hero-in .te-tools-menu{z-index:1000}
.te-hero-title{font-size:23px !important;font-weight:800 !important;color:#fff}
.te-hero-sub{color:var(--hub-ink-soft);opacity:1 !important}
.te-hero-icon{width:40px !important;height:40px !important;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.te-hero-icon svg{width:20px;height:20px}
/* actions become the hub's glass buttons */
.te-hero-btn,
.te-hero-btn--teal,
.te-hero-btn--menu{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
  border-radius:10px !important;
  font-size:13.5px !important;
  padding:8px 14px !important;
  box-shadow:none !important;
}
.te-hero-btn:hover,.te-hero-btn--teal:hover,.te-hero-btn--menu:hover{background:rgba(255,255,255,.22) !important;transform:none}
.te-badge--onhero{background:#ef6c2f !important;color:#fff !important}

/* workspace/admin dashboard title */
.hw-wrap .adm-hero{border-radius:20px !important;padding:22px 24px !important}
.hw-wrap .adm-hero h1{color:#fff !important;text-shadow:none !important;font-size:1.45rem !important}
.hw-wrap .adm-hero p{color:var(--hub-ink-soft) !important;opacity:1 !important}

/* page title rows on workspace/admin pages (.hw-h), reports and notifications */
.hw-wrap .hw-h,.hw-wrap .rep-hero,.nt-h{border-radius:20px !important;padding:18px 22px !important;margin:0 0 18px !important;border:0 !important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.hw-wrap .hw-h h1,.hw-wrap .rep-hero h1,.nt-h h1{color:#fff !important;text-shadow:none !important;font-size:1.35rem !important;font-weight:800 !important;margin:0 !important}
.hw-wrap .hw-h h1 i,.nt-h h1 i{color:#ffc9a8}
.hw-wrap .hw-h p,.hw-wrap .rep-hero p,.nt-h p,.hw-wrap .hw-h small,.hw-wrap .hw-h .text-muted{color:var(--hub-ink-soft) !important;opacity:1 !important}
.hw-wrap .hw-h a:not(.btn),.hw-wrap .rep-hero a:not(.btn){color:#fff}
.hw-wrap .hw-h .btn,.hw-wrap .rep-hero .btn,.nt-h .btn,.nt-h a{
  background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.28) !important;color:#fff !important;border-radius:10px !important;box-shadow:none !important}
.hw-wrap .hw-h .btn:hover,.hw-wrap .rep-hero .btn:hover,.nt-h a:hover{background:rgba(255,255,255,.22) !important}
.hw-wrap .hw-h select,.hw-wrap .hw-h input{border-radius:10px;border:1px solid rgba(255,255,255,.35);max-width:100%}

/* content pages: a rounded panel inside the page width */
.subj-hero,.contact-hero{
  max-width:1180px;width:calc(100% - 32px);margin:18px auto 0 !important;border-radius:20px;
  padding:26px 0 28px !important;
}
.subj-hero .crumb,.subj-hero .crumb a,.contact-hero .crumb,.contact-hero .crumb a{color:#b9cce0 !important}
.subj-hero .eyebrow,.contact-hero .eyebrow{background:rgba(255,255,255,.12) !important;color:#ffc9a8 !important;border:1px solid rgba(255,255,255,.2)}
.subj-hero h1,.contact-hero h1{color:#fff !important}
.subj-hero .sub,.subj-hero p,.contact-hero .sub,.contact-hero p{color:var(--hub-ink-soft) !important}

/* novel workbook title */
.nv-hero,.nv-head{background:var(--hub-panel);color:#fff;border-radius:20px;padding:22px 24px;margin:0 0 18px;position:relative;overflow:hidden;box-shadow:var(--hub-sh2)}
.nv-hero::after,.nv-head::after{content:"";position:absolute;right:0;top:0;width:220px;height:180px;background:var(--hub-glow);pointer-events:none}
.nv-hero>*,.nv-head>*{position:relative;z-index:1}
.nv-hero .nv-title,.nv-head .nv-title{color:#fff !important}
.nv-hero .nv-tag,.nv-head .nv-tag,.nv-head p{color:var(--hub-ink-soft) !important}
.nv-head a:not(.te-btn){color:#fff}
.nv-hero .te-btn,.nv-head .te-btn{text-decoration:none !important;margin-top:12px}

/* ---------- 2. Surfaces ---------- */
.te-card,
.hw-card,.hw-chartbox,.hw-tile,.hw-item{
  border-color:var(--hub-line) !important;
  box-shadow:var(--hub-sh1) !important;
}
.te-card,.hw-card,.hw-chartbox{border-radius:16px !important}
.hw-tile:hover,.hw-item:hover{box-shadow:var(--hub-sh2) !important;border-color:#dccfc2 !important}
.te-empty{border-color:var(--hub-line) !important;border-radius:16px !important}
.te-table th{color:#64748b;font-size:12px;letter-spacing:.05em;text-transform:uppercase}

/* ---------- 3. Admin menu: one tidy scrollable row ---------- */
.hw-adminnav{
  flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:thin;
  gap:4px !important;padding:5px !important;
  border:1px solid var(--hub-line) !important;border-radius:14px !important;box-shadow:var(--hub-sh1) !important;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.hw-adminnav .hw-adminnav-btn,.hw-wrap .hw-adminnav .hw-adminnav-btn{
  flex:none;white-space:nowrap;scroll-snap-align:start;
  padding:7px 12px !important;border-radius:9px !important;
  background:transparent !important;color:#475569 !important;border:0 !important;
  font-size:13px !important;font-weight:600 !important;text-decoration:none !important;
}
.hw-adminnav .hw-adminnav-btn:hover{background:#f7f1eb !important;color:var(--hub-navy) !important}
.hw-adminnav .hw-adminnav-btn.active,.hw-wrap .hw-adminnav .hw-adminnav-btn.active{
  background:var(--hub-navy) !important;color:#fff !important;box-shadow:0 6px 14px -6px rgba(15,44,77,.6) !important;
}
.hw-adminnav .hw-adminnav-btn i{opacity:.8;margin-right:3px}

/* ---------- 4. Phones ---------- */
img,svg,video,canvas{max-width:100%}
@media (max-width:760px){
  /* page gutters */
  .te-main{padding-left:16px !important;padding-right:16px !important}
  .te-hero{padding:0 16px !important;margin-top:14px !important}
  .hw-wrap{padding-left:16px !important;padding-right:16px !important;margin-top:1rem !important}
  /* title panels stack; actions scroll sideways instead of wrapping into a tall block */
  .te-hero-in{flex-direction:column;align-items:flex-start !important;gap:12px !important;padding:16px 18px !important}
  .te-hero-title{font-size:19px !important}
  .te-hero-acts{flex-wrap:wrap !important;gap:8px !important;max-width:100%}
  .te-hero-in .te-tools-menu{left:0;right:auto;max-width:calc(100vw - 48px)}
  .hw-wrap .adm-hero{padding:18px !important}
  .subj-hero,.contact-hero{width:calc(100% - 24px);padding:20px 0 22px !important}
  /* wide tables scroll inside their card instead of stretching the page */
  table.te-table,.hw-wrap table.table,table.ctable,table.mg-list,.container table[border],.guidepage table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* rows of filter chips / tabs scroll sideways instead of stacking */
  .te-tabs,.te-chips,.te-cat-tabs,.te-filters,.gh-tabs{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .te-tabs>*,.te-chips>*,.te-cat-tabs>*,.te-filters>*,.gh-tabs>*{flex:none}
  .hw-wrap .hw-h,.hw-wrap .rep-hero,.nt-h{padding:16px 18px !important}
  .hw-wrap .hw-h h1,.hw-wrap .rep-hero h1,.nt-h h1{font-size:1.15rem !important}
  /* cards breathe less */
  .te-card{padding:16px !important;border-radius:14px !important}
  /* footer newsletter no longer pushes the page wider than the screen */
  .sep-foot .wrap{grid-template-columns:minmax(0,1fr) !important}
  .sep-foot .wrap>*{min-width:0}
  .sep-foot .foot-news form{min-width:0 !important;flex-wrap:wrap}
  .sep-foot .foot-news input{min-width:0;flex:1 1 180px}
  /* comfortable tap targets */
  .te-btn{min-height:42px}
}