/* Tomorrow's Publisher — Shared Header + Nav CSS */

/* --- Gold stripe --- */
.tp-top-stripe { height: 3px; background: linear-gradient(90deg, #756533 0%, #A8935A 50%, #756533 100%); }

/* --- Header bar --- */
.tp-header { background: #fff; border-bottom: 1px solid #E8E8E8; }
.tp-header-inner { max-width: 1300px; margin: 0 auto; padding: 14px 24px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tp-header-brand { display: flex; align-items: center; }
.tp-header-brand a { display: flex; }
.tp-logo-desktop { width: 290px; height: auto; display: block; }
.tp-logo-mobile { width: 150px; height: auto; display: none; }
.tp-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* --- Desktop persona selector --- */
.tp-persona { font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; font-weight: 600; padding: 6px 28px 6px 10px; border: 1px solid #756533; border-radius: 2px; background: #fff; color: #756533; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23756533'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; letter-spacing: 0.02em; text-transform: uppercase; }

/* --- Hamburger --- */
.tp-hamburger { background: none; border: none; cursor: pointer; padding: 8px; font-size: 22px; color: #1A1A1A; line-height: 1; }
.tp-hamburger:hover { color: #756533; }

/* --- Slide-out drawer --- */
.tp-nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(44,36,22,0.5); z-index: 998; }
.tp-nav-overlay.open { display: block; }
.tp-nav-drawer { position: fixed; top: 0; right: 0; width: 280px; height: 100vh; background: #fff; z-index: 999; box-shadow: -4px 0 20px rgba(0,0,0,0.1); padding: 20px 24px; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease; }
.tp-nav-drawer.open { transform: translateX(0); }
.tp-nav-close { background: none; border: none; font-size: 24px; color: #8A8070; cursor: pointer; float: right; padding: 0 4px; line-height: 1; }
.tp-nav-drawer a { display: block; font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; font-weight: 500; color: #1A1A1A; padding: 12px 0; border-bottom: 1px solid #E8E8E8; text-decoration: none; }
.tp-nav-drawer a:hover { color: #756533; }
.tp-nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8070; margin-top: 16px; margin-bottom: 4px; font-family: 'Inter', -apple-system, sans-serif; }

/* --- Synthesis strip --- */
.tp-synthesis { background: #fff; border-bottom: 1px solid #E0DDD6; }
.tp-synthesis-inner { max-width: 1300px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 12px; }
.tp-synthesis-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #756533; white-space: nowrap; flex-shrink: 0; }
.tp-synthesis-track { display: flex; gap: 8px; overflow-x: auto; flex: 1; scrollbar-width: none; padding: 2px 0; }
.tp-synthesis-track::-webkit-scrollbar { height: 0; }
.tp-synthesis-item { font-family: 'Inter', sans-serif; font-size: 12px; color: #444; line-height: 1.4; white-space: nowrap; flex-shrink: 0; }
.tp-synthesis-item + .tp-synthesis-item::before { content: '\2014'; margin-right: 8px; color: #B3AC9D; }

/* --- Signal ribbon --- */
.tp-ribbon { background: #1A2F2F; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 9px 0; }
.tp-ribbon-inner { max-width: 1300px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
@keyframes tpLivePulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.tp-ribbon-live { display: inline-flex; align-items: center; gap: 5px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #00E676; white-space: nowrap; flex-shrink: 0; }
.tp-ribbon-dot { width: 7px; height: 7px; border-radius: 50%; background: #00E676; animation: tpLivePulse 1.5s ease-in-out infinite; box-shadow: 0 0 6px rgba(0,230,118,0.5); }
.tp-ribbon-track { display: flex; gap: 8px; overflow-x: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; padding: 2px 0; }
.tp-ribbon-track::-webkit-scrollbar { height: 3px; }
.tp-ribbon-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.tp-ribbon-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.95); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.tp-ribbon-chip:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); box-shadow: 0 0 8px rgba(255,255,255,0.08); }
.tp-ribbon-desk { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; }
.tp-ribbon-dir { font-size: 10px; font-weight: 500; font-style: italic; opacity: 0.75; }
.tp-ribbon-score { font-family: monospace; font-size: 11px; font-weight: 600; }

/* --- Mobile persona --- */
.tp-persona-mobile-wrap { display: none; }
.tp-persona-mobile-btn { background: none; border: none; padding: 6px 0; font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; color: #756533; line-height: 1; display: flex; align-items: center; gap: 2px; }
.tp-persona-arrow { font-size: 9px; opacity: 0.7; }
.tp-persona-mobile-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff; border: 1px solid #E8E8E8; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 950; min-width: 180px; overflow: hidden; }
.tp-persona-mobile-dropdown.open { display: block; }
.tp-persona-mobile-item { font-family: 'Inter', sans-serif; font-size: 14px; padding: 10px 16px; cursor: pointer; color: #1A1A1A; border-bottom: 1px solid #F4F4F6; }
.tp-persona-mobile-item:last-child { border-bottom: none; }
.tp-persona-mobile-item:hover { background: #F7F5F0; color: #756533; }
.tp-persona-mobile-item.active { color: #756533; font-weight: 600; }

/* ================ MOBILE ================ */
@media (max-width: 768px) {
  /* Header layout */
  .tp-logo-desktop { display: none !important; }
  .tp-logo-mobile { display: block !important; width: 125px; }
  .tp-header-inner {
    padding: 14px 16px;
    position: relative;
    min-height: 50px;
  }
  .tp-persona { display: none !important; }
  .tp-persona-mobile-wrap { display: block !important; position: relative; }
  .tp-header-right {
    position: static;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
  .tp-header-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Synthesis — hide on mobile, the ribbon has enough context */
  .tp-synthesis { display: none; }

  /* Ribbon — compact FT-style ticker */
  .tp-ribbon { padding: 6px 0; }
  .tp-ribbon-inner { padding: 0 16px; gap: 8px; }
  .tp-ribbon-live { font-size: 8px; gap: 4px; letter-spacing: 0.08em; }
  .tp-ribbon-dot { width: 5px; height: 5px; }
  .tp-ribbon-chip {
    padding: 4px 10px;
    gap: 5px;
    border-radius: 3px;
    font-size: 10px;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
  }
  .tp-ribbon-desk { font-size: 9px; }
  .tp-ribbon-dir { font-size: 8px; }
  .tp-ribbon-score { font-size: 9px; }
}