/* PrepKnow Frontend Polish Suite */
:root {
  --pkfps-bg: #f6f8fb;
  --pkfps-card: #ffffff;
  --pkfps-ink: #111827;
  --pkfps-muted: #64748b;
  --pkfps-line: rgba(15, 23, 42, .10);
  --pkfps-accent: #0f766e;
  --pkfps-accent-dark: #115e59;
  --pkfps-soft: #ecfeff;
  --pkfps-radius: 22px;
  --pkfps-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.skip-link + .skip-link,
a.skip-link + a.skip-link,
.screen-reader-text + .screen-reader-text { display: none !important; }

body .pkfps-dashboard,
body .pkfps-section-card,
body .pkfps-dashboard * { box-sizing: border-box; }

.pkfps-dashboard {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: clamp(16px, 3vw, 32px);
  color: var(--pkfps-ink);
}

.pkfps-dashboard-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 4vw, 38px);
  border-radius: 30px;
  background: radial-gradient(circle at top left, #ccfbf1, transparent 34%), linear-gradient(135deg, #082f49, #0f766e);
  color: #fff;
  box-shadow: var(--pkfps-shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.pkfps-dashboard-hero h1 { color: #fff; margin: 8px 0 8px; font-size: clamp(28px, 4vw, 48px); line-height: 1.05; }
.pkfps-dashboard-hero p { color: rgba(255,255,255,.86); margin: 0; max-width: 720px; font-size: 1.05rem; }
.pkfps-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; color: #99f6e4; }
.pkfps-role-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width: 300px; }
.pkfps-role-pills span { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 7px 12px; font-size:.86rem; white-space: nowrap; }

.pkfps-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--pkfps-line);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  margin: 0 0 18px;
  position: sticky;
  top: 10px;
  z-index: 20;
}
.pkfps-dash-tabs a {
  text-decoration: none;
  color: #334155;
  font-weight: 750;
  padding: 10px 15px;
  border-radius: 999px;
  transition: .2s ease;
  outline-offset: 3px;
}
.pkfps-dash-tabs a:hover { background: #f1f5f9; color: #0f172a; }
.pkfps-dash-tabs a.is-active { background: var(--pkfps-accent); color: #fff; box-shadow: 0 8px 20px rgba(15,118,110,.24); }

.pkfps-dash-panel { animation: pkfpsFade .22s ease; }
@keyframes pkfpsFade { from { opacity:0; transform: translateY(5px); } to { opacity:1; transform:none; } }

.pkfps-section-card,
.pkfps-login-required {
  background: var(--pkfps-card);
  border: 1px solid var(--pkfps-line);
  border-radius: var(--pkfps-radius);
  box-shadow: var(--pkfps-shadow);
  padding: clamp(18px, 3vw, 30px);
  margin: 18px 0;
}
.pkfps-section-card h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); }
.pkfps-section-card p { color: var(--pkfps-muted); }
.pkfps-grid { display:grid; gap:16px; margin: 0 0 18px; }
.pkfps-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pkfps-metric { background: #fff; border:1px solid var(--pkfps-line); border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.pkfps-metric span { color: var(--pkfps-muted); font-weight:700; font-size:.9rem; }
.pkfps-metric strong { display:block; font-size: 2.1rem; line-height:1.05; margin: 8px 0; }
.pkfps-metric small { color: var(--pkfps-muted); }

.pkfps-actions-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pkfps-actions-grid a,
.pkfps-list article {
  display:block;
  text-decoration:none;
  color: var(--pkfps-ink);
  background: #f8fafc;
  border:1px solid var(--pkfps-line);
  border-radius: 18px;
  padding: 18px;
  transition: .2s ease;
}
.pkfps-actions-grid a:hover,
.pkfps-list article:hover { transform: translateY(-1px); border-color: rgba(15,118,110,.35); box-shadow: 0 12px 26px rgba(15,23,42,.08); }
.pkfps-actions-grid strong { display:block; margin-bottom: 6px; }
.pkfps-actions-grid span { display:block; color: var(--pkfps-muted); }
.pkfps-actions-row { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.pkfps-btn,
a.pkfps-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--pkfps-line); background:#fff; color:#0f172a; border-radius:999px; padding: 11px 16px; font-weight:800; text-decoration:none; line-height:1; }
.pkfps-btn-primary,
a.pkfps-btn-primary { background: var(--pkfps-accent); color:#fff; border-color: var(--pkfps-accent); }
.pkfps-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15,23,42,.10); }
.pkfps-list { display:grid; gap:12px; }
.pkfps-list h3 { margin:0 0 6px; }
.pkfps-empty { background: linear-gradient(180deg,#f8fafc,#fff); border:1px dashed rgba(15,118,110,.35); border-radius: 18px; padding:24px; margin: 16px 0; }
.pkfps-empty h3 { margin-top:0; }
.pkfps-checklist { background:#f8fafc; border-radius: 18px; padding: 18px 18px 18px 38px; }
.pkfps-checklist li { margin: 7px 0; }

/* Mobile menu polish for the PrepKnow theme/fallback menus. */
.pkfps-menu-enhanced .pkfps-menu-toggle {
  display:none;
}
@media (max-width: 860px) {
  .pkfps-dashboard { padding: 12px; margin-bottom: 92px; }
  .pkfps-dashboard-hero { grid-template-columns: 1fr; border-radius: 22px; }
  .pkfps-role-pills { justify-content:flex-start; max-width:none; }
  .pkfps-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pkfps-actions-grid { grid-template-columns: 1fr; }
  .pkfps-dash-tabs { position: static; border-radius: 22px; overflow-x:auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .pkfps-dash-tabs a { scroll-snap-align:start; white-space: nowrap; flex: 0 0 auto; }

  header nav ul,
  .site-header nav ul,
  .main-navigation ul,
  .primary-navigation ul,
  .wp-block-navigation__container {
    gap: 6px !important;
  }
  .pkfps-menu-toggle {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    cursor:pointer;
    box-shadow: 0 8px 22px rgba(15,23,42,.10);
  }
  .pkfps-menu-collapsible:not(.is-open) { display:none !important; }
  .pkfps-menu-collapsible.is-open {
    display:flex !important;
    flex-direction:column !important;
    gap: 6px !important;
    width: min(92vw, 380px) !important;
    padding: 12px !important;
    position:absolute !important;
    right: 12px;
    top: calc(100% + 8px);
    z-index: 9999;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15,23,42,.22);
  }
  .pkfps-menu-collapsible.is-open li,
  .pkfps-menu-collapsible.is-open a { width:100%; }
  .pkfps-menu-collapsible.is-open a { display:block; padding: 12px 14px; border-radius: 14px; text-decoration:none; }
  .pkfps-menu-wrap { position: relative; }
  body .pk-quick-actions,
  body .pk-mobile-bottom-nav,
  body [class*="bottom-nav"] {
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px 18px 0 0;
  }
}
@media (max-width: 560px) {
  .pkfps-grid-4 { grid-template-columns: 1fr; }
  .pkfps-dashboard-hero h1 { font-size: 30px; }
}

/* Mobile image carousel. Desktop remains grid/native layout. */
.pkfps-carousel-shell { position: relative; }
.pkfps-carousel-btn {
  display:none;
}
@media (max-width: 768px) {
  .pkfps-carousel-shell { margin: 14px 0; }
  .pkfps-mobile-carousel {
    display:flex !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 4px 4px 12px !important;
    scrollbar-width: thin;
  }
  .pkfps-mobile-carousel > * {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    scroll-snap-align: center;
    margin: 0 !important;
  }
  .pkfps-mobile-carousel img {
    width:100% !important;
    height: clamp(220px, 54vw, 420px) !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    display:block !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.12);
  }
  .pkfps-carousel-btn {
    display:flex;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.15);
    background: rgba(255,255,255,.94);
    color:#0f172a;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 28px rgba(15,23,42,.20);
    z-index:3;
    font-size:24px;
    line-height:1;
    cursor:pointer;
  }
  .pkfps-carousel-btn.prev { left: 8px; }
  .pkfps-carousel-btn.next { right: 8px; }
}
