@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ============================================================
   FakeEmail.net — site-wide visual layer (CSS only).
   Brings the homepage BLUE/TEAL brand look to every other page:
   blog index, blog post, static pages and contact.
   Loaded on all NON-home pages (home keeps modern-home.css).
   Theme: Blue #2563EB · Teal #14B6C4 · Navy ink #0F2147
   No HTML / JS / backend changes.
   ============================================================ */

:root{
  --fe-accent:#2563eb;
  --fe-accent-ink:#1d4ed8;
  --fe-teal:#14b6c4;
  --fe-ink:#0f2147;
  --fe-muted:#51607a;
  --fe-card:#ffffff;
  --fe-bg:#f4f7fc;
  --fe-line:#e7ebf3;
  --fe-shadow:0 12px 34px rgba(15,33,71,.08);
  --fe-shadow-lg:0 22px 60px rgba(15,33,71,.15);
  --fe-radius:18px;
}

/* Neutralise the leftover pink Ghost accent on inner pages */
:root{ --ghost-accent-color:#2563eb !important; }

/* ---- Page background + base typography (Poppins) ---- */
#tm-body{ background:var(--fe-bg) !important; }
#tm-body, main, main p, main li, main h1, main h2, main h3, main h4,
.c-content, .c-content p, .c-content li, .c-content h2, .c-content h3, .c-content h4,
.page-area, .page-content, .page-title, .blog-index-header,
.c-post-card__title, .c-post-hero__title, .c-title-bar__title,
.section-top-qr, .section-top-qr h2, .section-top-qr .emailbox-input,
.section-top-qr .temp-emailbox-text, .section-top-qr .temp-emailbox-text p, .section-top-qr span{
  font-family:'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Top header bar: clean white, navy text ---- */
.main-header{
  background:#ffffff !important;
  border-bottom:1px solid var(--fe-line) !important;
  box-shadow:0 1px 2px rgba(15,33,71,.04) !important;
}
.main-header .lang-text, .main-header .lang-select, .main-header .headerSeoLink{ color:var(--fe-ink) !important; }

/* ============ SHARED EMAIL HERO (static pages + contact) ============ */
/* Mirrors the homepage .section-top-qr so /page/* and /contact match home. */
.section-top-qr{
  background:
    radial-gradient(860px 380px at 50% -28%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(640px 300px at 90% 4%, rgba(20,182,196,.40), transparent 58%),
    linear-gradient(135deg,#2f6bf0 0%, #4a86ee 52%, #1fb6c4 122%) !important;
  padding:42px 0 52px !important;
  border-bottom:0 !important;
  position:relative;
}
.section-top-qr .temp-emailbox{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px !important;
  box-shadow:0 26px 60px rgba(13,52,140,.30);
  padding:24px 24px 28px !important;
  max-width:640px;
  margin:6px auto 0 !important;
}
.section-top-qr .temp-emailbox h2{
  color:var(--fe-ink) !important; font-weight:700 !important; font-size:1.15rem !important;
  letter-spacing:-.2px; margin-bottom:16px; text-align:center;
}
.section-top-qr .input-warp{
  background:#f4f7fc !important; border:1px solid #e3e9f3 !important;
  border-radius:14px !important; overflow:hidden;
}
.section-top-qr .emailbox-input{
  color:var(--fe-ink) !important; font-size:1.05rem !important; letter-spacing:.2px;
  background:transparent !important; font-weight:500;
}
.section-top-qr .emailbox-input::placeholder{ color:#93a0b8 !important; }
.section-top-qr .btn-rds.popover-qr{
  background:var(--fe-ink) !important; border:0 !important; border-radius:11px !important;
}
.section-top-qr .btn-rds.popover-qr:hover{ background:#16315e !important; }
.section-top-qr .copyIconGreenBtn{
  background:var(--fe-teal) !important; border:0 !important; border-radius:11px !important;
  box-shadow:0 8px 20px rgba(20,182,196,.35);
}
.section-top-qr .copyIconGreenBtn:hover{ filter:brightness(1.06); }
.section-top-qr .temp-emailbox-text{ text-align:center; }
.section-top-qr .temp-emailbox-text p{
  color:rgba(255,255,255,.95) !important; margin-top:16px; font-weight:500;
  text-shadow:0 1px 10px rgba(10,40,120,.25);
}

/* ===================== BLOG INDEX HEADER ===================== */
.blog-index-header h1{ color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:-.5px; }
.blog-index-header p{ color:var(--fe-muted) !important; }
.blog-index-header::after{
  content:""; display:block; width:64px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--fe-accent),var(--fe-teal)); margin:14px auto 2px;
}

/* ======================= POST CARDS ========================= */
.c-post-card{
  background:var(--fe-card) !important; border:1px solid var(--fe-line) !important;
  border-radius:16px !important; box-shadow:var(--fe-shadow) !important;
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.c-post-card:hover{ transform:translateY(-4px); box-shadow:var(--fe-shadow-lg) !important; }
.c-post-card__media, .c-post-card__image-wrap{
  display:block; overflow:hidden; aspect-ratio:16/9;
  background:linear-gradient(135deg,#eaf1fe,#e6f7f8) !important;
}
.c-post-card__image{
  width:100% !important; height:100% !important; object-fit:cover; display:block;
  transition:transform .3s ease;
}
.c-post-card:hover .c-post-card__image{ transform:scale(1.05); }
.c-post-card__content{ padding:16px 18px 18px !important; }
.c-post-card__title{ margin:0 0 10px !important; font-size:1.08rem !important; line-height:1.4 !important; }
.c-post-card__title-link{
  color:var(--fe-ink) !important; font-weight:600 !important; text-decoration:none !important;
}
.c-post-card__title-link:hover{ color:var(--fe-accent) !important; }
.c-post-card__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.c-post-card__author{
  color:var(--fe-teal) !important; font-weight:600 !important; font-size:.74rem !important;
  letter-spacing:.5px; text-transform:uppercase;
}
.c-post-card__date{ color:#93a0b8 !important; font-size:.8rem !important; }

/* first/featured card a touch bigger title */
.c-post-card--first .c-post-card__title{ font-size:1.3rem !important; }

/* ===================== POST HERO (single) =================== */
.c-post-hero__title{
  color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:-.5px;
  line-height:1.2;
}
.c-post-hero__image-wrap{ border-radius:18px !important; overflow:hidden; box-shadow:var(--fe-shadow); }
.c-post-hero__image{ width:100% !important; object-fit:cover; }
.c-post-hero__meta{ color:var(--fe-muted) !important; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.c-post-hero__author{ color:var(--fe-teal) !important; font-weight:600 !important; }
.c-post-hero__reading-time, .c-post-hero__meta time{ color:#93a0b8 !important; }

/* ================== ARTICLE BODY (.c-content) ============== */
.c-content{ color:var(--fe-muted) !important; }
/* static page / FAQ title (view sets a tiny inline font-size — override it) */
.c-content > h1, .c-content h1.m-0{
  color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:-.5px;
  font-size:2rem !important; line-height:1.2; margin:.2rem 0 1.4rem !important;
  position:relative; padding-bottom:14px;
}
.c-content > h1::after, .c-content h1.m-0::after{
  content:""; position:absolute; left:0; bottom:0; width:64px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--fe-accent),var(--fe-teal));
}
.c-content p, .c-content li{
  color:var(--fe-muted) !important; font-size:16px !important; line-height:1.78 !important; letter-spacing:.1px;
}
.c-content h2{
  color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:-.4px;
  font-size:1.55rem !important; margin:2.2rem 0 .8rem !important; line-height:1.3;
}
.c-content h3{
  color:var(--fe-ink) !important; font-weight:600 !important; letter-spacing:-.2px;
  font-size:1.2rem !important; margin:1.6rem 0 .6rem !important;
}
.c-content a{ color:var(--fe-accent) !important; text-decoration:underline; text-underline-offset:2px; }
.c-content a:hover{ color:var(--fe-accent-ink) !important; }
.c-content ul, .c-content ol{ margin:1rem 0 1.2rem; padding-left:1.3rem; }
.c-content li{ margin-bottom:.5rem; }
.c-content strong{ color:var(--fe-ink) !important; }
.c-content blockquote{
  border-left:4px solid var(--fe-accent); background:#f4f7fc; margin:1.4rem 0;
  padding:.9rem 1.2rem; border-radius:0 12px 12px 0; color:var(--fe-ink);
}
.c-content img{ border-radius:14px; box-shadow:var(--fe-shadow); max-width:100%; height:auto; }

/* article tables (the multilingual guides use them heavily) */
.c-content table{
  width:100%; border-collapse:separate; border-spacing:0; margin:1.5rem 0;
  border:1px solid var(--fe-line); border-radius:14px; overflow:hidden;
  box-shadow:var(--fe-shadow); font-size:.95rem;
}
.c-content thead th{
  background:linear-gradient(135deg,var(--fe-accent),#3f74ee) !important; color:#fff !important;
  font-weight:600; text-align:left; padding:12px 16px; letter-spacing:.2px;
}
.c-content tbody td{ padding:11px 16px; border-top:1px solid var(--fe-line); color:var(--fe-muted); vertical-align:top; }
.c-content tbody tr:nth-child(even){ background:#f8fafd; }

/* ad block inside posts — keep tidy */
.c-content .ads-box img{ border-radius:12px; }

/* ===================== AUTHOR / E-E-A-T BOX ================= */
.c-author-box{
  background:linear-gradient(135deg,#eef4ff,#e9f8f9) !important;
  border:1px solid var(--fe-line) !important; border-left:4px solid var(--fe-accent) !important;
  border-radius:14px !important; box-shadow:var(--fe-shadow) !important;
}
.c-author-box p:first-child{ color:var(--fe-ink) !important; }
.c-author-box a{ color:var(--fe-accent) !important; }

/* ===================== RELATED POSTS ======================= */
.c-related{ background:var(--fe-bg); padding:8px 0 36px; }
.c-title-bar__title{
  color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:.3px;
  text-align:center; position:relative; padding-bottom:6px;
}
.c-title-bar{ text-align:center; margin:18px 0 24px; }
.c-title-bar__title::after{
  content:""; display:block; width:64px; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--fe-accent),var(--fe-teal)); margin:12px auto 0;
}
hr{ border:0; border-top:1px solid var(--fe-line); margin:2.4rem 0 0; }

/* ===================== STATIC PAGE / CONTACT =============== */
.page-title{
  color:var(--fe-ink) !important; font-weight:700 !important; letter-spacing:-.4px;
  text-align:center; margin:1.4rem 0 .4rem;
}
.page-area{
  background:var(--fe-card); border:1px solid var(--fe-line); border-radius:var(--fe-radius);
  box-shadow:var(--fe-shadow); padding:26px 26px 30px; margin:26px auto 8px; max-width:900px;
}
.page-content, .page-content p, .page-content li{ color:var(--fe-muted) !important; line-height:1.75; }
.page-content h2, .page-content h3{ color:var(--fe-ink) !important; }
.page-content a{ color:var(--fe-accent) !important; }

/* contact form */
.contact-form .form-item{
  background:#f4f7fc !important; border:1px solid #e3e9f3 !important; border-radius:12px !important;
  display:flex; align-items:center; gap:10px; padding:4px 12px; transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form .form-item:focus-within{
  border-color:var(--fe-accent) !important; box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.contact-form .form-item input, .contact-form .form-item textarea{
  background:transparent !important; border:0 !important; color:var(--fe-ink) !important;
  width:100%; padding:12px 4px; font-size:1rem; outline:none;
}
.contact-form .form-item textarea{ min-height:150px; resize:vertical; }
.contact-form .form-item .icon img{ opacity:.6; width:18px; height:18px; }
.contact-form .btn{
  background:linear-gradient(135deg,var(--fe-accent),#3f74ee) !important; color:#fff !important;
  border:0 !important; border-radius:12px !important; padding:13px 30px !important;
  font-weight:600 !important; box-shadow:0 10px 24px rgba(37,99,235,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; cursor:pointer;
}
.contact-form .btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:var(--fe-shadow-lg); }
.alert{ border-radius:12px; }

/* ========================= PAGER =========================== */
.pagination{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:6px 0 4px; list-style:none; }
.pagination .page-item .page-link{
  display:inline-block; min-width:42px; text-align:center;
  background:var(--fe-card) !important; color:var(--fe-ink) !important;
  border:1px solid var(--fe-line) !important; border-radius:11px !important;
  padding:9px 14px !important; font-weight:600; box-shadow:var(--fe-shadow); transition:all .15s ease;
}
.pagination .page-item .page-link:hover{
  color:var(--fe-accent) !important; border-color:#cfe0fb !important; transform:translateY(-1px);
}
.pagination .page-item.active .page-link{
  background:linear-gradient(135deg,var(--fe-accent),#3f74ee) !important; color:#fff !important; border-color:transparent !important;
}
.pagination .page-item.disabled .page-link{ opacity:.45; box-shadow:none; }

/* ========================= RESPONSIVE ====================== */
@media (max-width:720px){
  .section-top-qr .temp-emailbox{ margin:6px 14px 0 !important; }
  .c-content h2{ font-size:1.32rem !important; }
  .c-post-hero__title{ font-size:1.55rem !important; }
  .page-area{ margin:18px 12px 8px; padding:20px; }
}