/* =============================================================
   inboxOro — SEO Sidebar Cards
   Append to public/css/inboxoro.css
   (or load as a separate file after inboxoro.css)
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   SHARED: card shell
───────────────────────────────────────────────────────────── */
.seo-links-card,
.seo-guide-card {
  background:  var(--INK);          /* #1F2937 — matches nav/footer */
  border:      2px solid var(--INK);
  box-shadow:  4px 4px 0 var(--Y);  /* yellow offset — brutalist signature */
  overflow:    hidden;
}

/* ─────────────────────────────────────────────────────────────
   SHARED: card header strip
───────────────────────────────────────────────────────────── */
.seo-card-header {
  display:       flex;
  align-items:   center;
  padding:       10px 16px;
  background:    var(--INK);
  border-bottom: 1px solid rgba(250,204,21,.2);
}

.seo-card-label {
  font-family:    'JetBrains Mono', monospace;
  font-size:      .6rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--Y);
}
/* blinking dot before label — matches .h-tag style */
.seo-card-label::before {
  content:       '';
  display:       inline-block;
  width:         5px;
  height:        5px;
  background:    var(--Y);
  border-radius: 50%;
  margin-right:  7px;
  vertical-align: middle;
  animation:     blink 1.3s step-end infinite;
}

/* ─────────────────────────────────────────────────────────────
   SEO LINKS CARD — Popular Pages
───────────────────────────────────────────────────────────── */
.seo-link-list {
  list-style: none;
  padding:    10px 0;
  margin:     0;
}

.seo-link-list li {
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.seo-link-list li:last-child { border-bottom: none; }

.seo-link-list a {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         9px 16px;
  font-family:     'Outfit', sans-serif;
  font-size:       .8rem;
  font-weight:     500;
  color:           #D1D5DB;
  text-decoration: none;
  transition:      background .12s, color .12s, padding-left .15s;
}
.seo-link-list a svg {
  flex-shrink: 0;
  color:       var(--MU);
  transition:  color .12s, transform .15s;
}
.seo-link-list a:hover {
  background:   rgba(250,204,21,.08);
  color:        var(--Y);
  padding-left: 20px;              /* subtle indent on hover */
}
.seo-link-list a:hover svg {
  color:     var(--Y);
  transform: translateX(2px);
}

/* tip block inside links card */
.seo-card-tip {
  padding:       12px 16px 14px;
  border-top:    1px solid rgba(250,204,21,.15);
  background:    rgba(250,204,21,.04);
}
.seo-tip-label {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--Y);
  margin-bottom:  6px;
}
.seo-card-tip p {
  font-size:   .76rem;
  color:       #9CA3AF;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   SEO GUIDE CARD — Quick Guide / What is Temp Email
───────────────────────────────────────────────────────────── */
.seo-guide-body {
  padding: 0;
}

.seo-guide-block {
  padding: 14px 16px;
}

.seo-guide-divider {
  height:     1px;
  background: rgba(250,204,21,.1);
  margin:     0 16px;
}

.seo-guide-title {
  font-family:    'Bebas Neue', sans-serif;
  font-size:      1rem;
  letter-spacing: .05em;
  color:          var(--Y);
  margin-bottom:  8px;
  line-height:    1;
}

.seo-guide-block p {
  font-size:   .78rem;
  color:       #9CA3AF;
  line-height: 1.6;
  margin-bottom: 8px;
}

.seo-guide-link {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      .65rem;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--Y);
  text-decoration: none;
  border-bottom:  1px solid rgba(250,204,21,.3);
  padding-bottom: 1px;
  transition:     border-color .15s, color .15s;
}
.seo-guide-link:hover {
  color:        #fff;
  border-color: #fff;
}

/* ── How it works: numbered list ── */
.seo-how-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        6px;
}
.seo-how-list li {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   .78rem;
  color:       #9CA3AF;
  line-height: 1.45;
}
.seo-step-num {
  font-family:    'Bebas Neue', sans-serif;
  font-size:      .85rem;
  color:          var(--Y);
  background:     rgba(250,204,21,.1);
  border:         1px solid rgba(250,204,21,.25);
  padding:        1px 6px;
  letter-spacing: .04em;
  flex-shrink:    0;
  line-height:    1.4;
}

/* ── Why list: checkmarks ── */
.seo-why-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        5px;
}
.seo-why-list li {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  font-size:   .78rem;
  color:       #9CA3AF;
  line-height: 1.5;
}
.seo-check {
  font-family: 'JetBrains Mono', monospace;
  font-size:   .72rem;
  font-weight: 700;
  color:       #22c55e;       /* green check */
  flex-shrink: 0;
}
.seo-bullet {
  display:       inline-block;
  width:         5px;
  height:        5px;
  background:    var(--Y);
  border:        1.5px solid rgba(250,204,21,.5);
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    5px;
}

/* ─────────────────────────────────────────────────────────────
   HOVER LIFT on both cards
───────────────────────────────────────────────────────────── */
.seo-links-card,
.seo-guide-card {
  transition: box-shadow .15s, transform .12s;
}
.seo-links-card:hover,
.seo-guide-card:hover {
  box-shadow: 6px 6px 0 var(--Y);
  transform:  translate(-1px, -1px);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — hide on mobile (sidebar itself already hidden)
   No extra rules needed because .right-col is already
   display:none on mobile via the existing @media (max-width:900px)
───────────────────────────────────────────────────────────── */