/* Justfixemail — base styles */
:root{
  --blue:#1a56db;
  --blue-dark:#123a99;
  --ink:#1f2430;
  --muted:#5b6472;
  --bg:#f6f8fb;
  --card:#ffffff;
  --border:#e3e8ef;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

header.site{background:var(--card);border-bottom:1px solid var(--border);}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:relative;}
.logo{font-weight:700;font-size:1.3rem;color:var(--ink);}
.logo span{color:var(--blue);}

.nav-check{display:none;}
.nav-toggle{display:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink);user-select:none;}
nav.site a{margin-left:22px;color:var(--ink);font-weight:500;font-size:.95rem;}
nav.site a:hover{color:var(--blue);text-decoration:none;}
nav.site{display:flex;align-items:center;}
.nav-dropdown{position:relative;margin-left:22px;}
.nav-dropdown > span{color:var(--ink);font-weight:500;font-size:.95rem;cursor:pointer;}
.nav-dropdown > span::after{content:' \25BE';font-size:.75rem;}
.nav-dropdown .dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(20,30,60,.12);min-width:190px;padding:6px 0;z-index:20;}
.nav-dropdown .dropdown-menu a{display:block;margin:0;padding:9px 16px;font-size:.9rem;color:var(--ink);}
.nav-dropdown .dropdown-menu a:hover{background:var(--bg);text-decoration:none;}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{display:block;}

.hero{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;padding:56px 0;}
.hero h1{font-size:2.1rem;margin:0 0 12px;}
.hero p{font-size:1.05rem;max-width:640px;opacity:.92;margin:0 0 24px;}
.search-box{display:flex;max-width:520px;background:#fff;border-radius:8px;overflow:hidden;}
.search-box input{flex:1;border:0;padding:14px 16px;font-size:1rem;outline:none;}
.search-box button{border:0;background:var(--ink);color:#fff;padding:0 22px;font-weight:600;cursor:pointer;}

main{padding:48px 0;}
h2.section-title{font-size:1.4rem;margin:0 0 22px;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;transition:box-shadow .15s,transform .15s;}
.card:hover{box-shadow:0 6px 18px rgba(20,30,60,.08);transform:translateY(-2px);}
.card h3{margin:0 0 8px;font-size:1.05rem;}
.card p{margin:0;color:var(--muted);font-size:.92rem;}
.card .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--blue);background:#eaf1ff;padding:3px 8px;border-radius:20px;margin-bottom:10px;}

.guide-body h1{font-size:1.8rem;margin-bottom:6px;}
.guide-meta{color:var(--muted);font-size:.88rem;margin-bottom:26px;}
.byline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.88rem;margin:-14px 0 28px;}
.byline a{font-weight:600;color:var(--ink);}
.byline a:hover{color:var(--blue);}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;}
.avatar.lg{width:64px;height:64px;font-size:1.3rem;}
.writer-card{display:flex;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;}
.writer-card h3{margin:0 0 2px;font-size:1.05rem;}
.writer-card .role{color:var(--blue);font-size:.85rem;font-weight:600;margin-bottom:8px;}
.writer-card p.bio{margin:0;color:var(--muted);font-size:.9rem;}
.writer-profile-header{display:flex;align-items:center;gap:18px;margin-bottom:10px;}

/* FAQ accordion */
.faq-list{max-width:760px;}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;list-style:none;position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';position:absolute;right:20px;top:14px;font-size:1.2rem;color:var(--blue);}
.faq-item[open] summary::after{content:'\2212';}
.faq-item[open] summary{border-bottom:1px solid var(--border);}
.faq-answer{padding:14px 20px 18px;color:var(--muted);font-size:.94rem;}
.faq-answer a{font-weight:600;}

/* Was this helpful? widget */
.feedback-widget{margin-top:36px;padding-top:22px;border-top:1px solid var(--border);}
.feedback-question{font-weight:600;margin:0 0 12px;}
.feedback-buttons{display:flex;gap:10px;}
.feedback-btn{background:#fff;border:1px solid var(--border);border-radius:6px;padding:9px 18px;font-size:.9rem;font-family:inherit;cursor:pointer;}
.feedback-btn:hover{border-color:var(--blue);color:var(--blue);}
.feedback-thanks{color:#1e6b3a;font-weight:600;margin:0;}

/* Checker tools (SPF/DKIM/DMARC) */
.tool-form{display:flex;gap:10px;max-width:560px;margin:22px 0;}
.tool-form input[type="text"]{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-size:1rem;font-family:inherit;}
.tool-form button{background:var(--blue);color:#fff;border:0;padding:0 24px;border-radius:6px;font-weight:600;cursor:pointer;font-size:.95rem;}
.tool-form button:hover{background:var(--blue-dark);}
.raw-record{background:#0b0d12;color:#c9d1d9;padding:14px 16px;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;overflow-x:auto;margin:16px 0;word-break:break-all;white-space:pre-wrap;}
.check-list{margin:18px 0;}
.check-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:8px;margin-bottom:10px;background:#fff;}
.check-icon{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700;margin-top:1px;}
.check-icon.pass{background:#22c55e;}
.check-icon.warn{background:#f59e0b;}
.check-icon.fail{background:#ef4444;}
.check-body h4{margin:0 0 4px;font-size:.95rem;}
.check-body p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;}
.check-body code{background:var(--bg);padding:1px 5px;border-radius:4px;font-size:.85em;}

/* Related Guides */
.related-guides{margin-top:44px;padding-top:26px;border-top:1px solid var(--border);}
.related-guides h2{font-size:1.2rem;margin-bottom:16px;}
.related-guides .grid{gap:14px;}
.related-guides .card p{display:none;}
@media(min-width:700px){.related-guides .card p{display:block;font-size:.85rem;}}

/* Quick Answer box */
.quick-answer{background:#eaf1ff;border:1px solid #c7d9fb;border-radius:8px;padding:14px 18px;margin:0 0 26px;font-size:.95rem;}
.quick-answer strong{color:var(--blue);}

/* Reviews */
.review-form-box{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px;}
.review-form-box h3{margin:0 0 6px;}
.review-form-box p{color:var(--muted);font-size:.9rem;margin:0 0 16px;}
.review-form{display:block;position:relative;}
.review-form label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px;}
.review-form label:first-of-type{margin-top:0;}
.review-form input,.review-form select,.review-form textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:.95rem;font-family:inherit;}
.review-form button{margin-top:16px;background:var(--blue);color:#fff;border:0;padding:11px 22px;border-radius:6px;font-weight:600;cursor:pointer;}
.review-form button:hover{background:var(--blue-dark);}
.review-thanks{color:#1e6b3a;font-weight:600;margin-top:14px;}
.review-error{color:#a12a2a;font-weight:600;margin-top:14px;}
.review-list{display:flex;flex-direction:column;gap:16px;}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;}
.review-stars{color:#f59e0b;letter-spacing:2px;font-size:1.05rem;margin-bottom:8px;}
.review-comment{margin:0 0 10px;}
.review-author{margin:0;font-weight:600;font-size:.9rem;color:var(--muted);}
.review-date{font-weight:400;margin-left:6px;}

/* Newsletter signup */
.newsletter-box{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:10px;padding:26px;color:#fff;margin:26px 0;}
.newsletter-box h3{margin:0 0 6px;font-size:1.1rem;color:#fff;}
.newsletter-box p{margin:0 0 16px;color:#dbe6ff;font-size:.9rem;}
.newsletter-form{display:flex;gap:8px;flex-wrap:wrap;max-width:460px;position:relative;}
.newsletter-form input[type="email"]{flex:1;min-width:180px;padding:11px 14px;border:0;border-radius:6px;font-size:.95rem;font-family:inherit;}
.newsletter-form button{background:#111827;color:#fff;border:0;padding:0 20px;border-radius:6px;font-weight:600;cursor:pointer;font-size:.9rem;}
.newsletter-form button:hover{background:#000;}
.newsletter-thanks{color:#22c55e;font-weight:600;margin:10px 0 0;}
.newsletter-box .newsletter-thanks{color:#c8ffd8;}
.newsletter-error{color:#ef4444;font-weight:600;margin:10px 0 0;font-size:.88rem;}
.newsletter-box .newsletter-error{color:#ffd7d7;}

.newsletter-footer{margin-top:6px;}
.newsletter-form-compact{max-width:280px;}
.newsletter-form-compact input[type="email"]{padding:9px 12px;font-size:.85rem;border:1px solid #333;}
.newsletter-form-compact button{padding:0 14px;font-size:.85rem;background:var(--blue);}
.newsletter-form-compact button:hover{background:#1447c2;}
.guide-body h2{font-size:1.25rem;margin-top:34px;}
.guide-body ol,.guide-body ul{padding-left:22px;}
.guide-body li{margin-bottom:8px;}
.callout{background:#eaf1ff;border-left:4px solid var(--blue);padding:14px 18px;border-radius:6px;margin:22px 0;font-size:.94rem;}
.callout.warn{background:#fff4e5;border-left-color:#c9741a;}

.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:20px;}
.breadcrumb a{color:var(--muted);}

form.contact-form{max-width:560px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:26px;}
form.contact-form label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px;}
form.contact-form input,form.contact-form select,form.contact-form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:.95rem;font-family:inherit;
}
form.contact-form button{margin-top:18px;background:var(--blue);color:#fff;border:0;padding:12px 22px;border-radius:6px;font-weight:600;cursor:pointer;}
form.contact-form button:hover{background:var(--blue-dark);}
.alert-success{background:#e6f6ec;border:1px solid #b3e2c1;color:#1e6b3a;padding:12px 16px;border-radius:6px;margin-bottom:18px;}
.alert-error{background:#fdeaea;border:1px solid #f3b8b8;color:#a12a2a;padding:12px 16px;border-radius:6px;margin-bottom:18px;}

/* Video section */
.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#0b0d12;}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow .15s,transform .15s;}
.video-card:hover{box-shadow:0 6px 18px rgba(20,30,60,.08);transform:translateY(-2px);}
.video-card .video-embed{border-radius:0;}
.video-card .video-info{padding:16px 18px;}
.video-card h3{margin:0 0 6px;font-size:1.02rem;}
.video-card p{margin:0;color:var(--muted);font-size:.9rem;}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.video-detail .video-embed{max-width:820px;margin:0 auto 20px;}

footer.site{background:#111827;color:#cbd2dc;margin-top:60px;padding:36px 0;font-size:.88rem;}
footer.site .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px 24px;}
footer.site .cols > div{min-width:140px;}
footer.site .col-label{display:block;margin-bottom:4px;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;color:#8b94a3;}
footer.site a{color:#cbd2dc;}
footer.site a:hover{color:#fff;}
footer.site .bottom{margin-top:24px;color:#8b94a3;font-size:.8rem;}

@media(max-width:640px){
  .nav-toggle{display:block;}
  nav.site{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    background:#fff;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:10px 20px 16px;
    box-shadow:0 8px 16px rgba(20,30,60,.08);
  }
  .nav-check:checked ~ nav.site{display:flex;}
  nav.site a{margin-left:0;padding:11px 0;width:100%;border-bottom:1px solid #f0f2f5;}
  .nav-dropdown{margin-left:0;width:100%;}
  .nav-dropdown > span{display:block;padding:11px 0;border-bottom:1px solid #f0f2f5;}
  .nav-dropdown .dropdown-menu{
    display:block;
    position:static;
    box-shadow:none;
    border:none;
    padding:0 0 0 14px;
    min-width:0;
  }
  .nav-dropdown .dropdown-menu a{padding:9px 0;border-bottom:none;}
  .hero h1{font-size:1.6rem;}
}