/* ===========================
   SEF Blog Template (Mobile First)
   File: css/blog-edit-contact.css
   =========================== */

:root{
  --sefd-bg: #0b0f19;
  --sefd-card: #10182c;
  --sefd-card2:#0f172a;
  --sefd-text:#e8eefc;
  --sefd-muted:#b7c3e6;
  --sefd-line: rgba(255,255,255,.10);
  --sefd-accent:#e55d05;
  --sefd-accent2:#ff7a1a;
  --sefd-shadow: 0 12px 30px rgba(0,0,0,.35);
  --sefd-radius: 18px;
  --sefd-max: 1100px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(229,93,5,.22), transparent 55%),
              radial-gradient(1000px 700px at 90% 0%, rgba(255,122,26,.16), transparent 60%),
              var(--sefd-bg);
  color: var(--sefd-text);
  line-height: 1.6;
}

a{ color: inherit; text-decoration: none; }
.sefd-wrap{
  width: min(var(--sefd-max), calc(100% - 32px));
  margin: 0 auto;
}

.sefd-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11,15,25,.65);
  border-bottom: 1px solid var(--sefd-line);
}

.sefd-topbar .sefd-wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

.sefd-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 200px;
}
.sefd-logo{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(229,93,5,.95), rgba(255,122,26,.9));
  box-shadow: 0 10px 20px rgba(229,93,5,.25);
  font-weight: 800;
}
.sefd-brandText{ display:flex; flex-direction:column; line-height:1.2; }
.sefd-brandText small{ color: var(--sefd-muted); font-size: 12px; margin-top: 2px; }

.sefd-nav{
  display:none;
  gap: 14px;
  color: var(--sefd-muted);
  font-size: 14px;
}
.sefd-nav a{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.sefd-nav a:hover{
  border-color: var(--sefd-line);
  color: var(--sefd-text);
}

.sefd-main{ padding-bottom: 40px; }

.sefd-hero{
  display:grid;
  gap: 18px;
  padding: 18px 0 10px;
}

.sefd-heroCard{
  background: linear-gradient(180deg, rgba(16,24,44,.92), rgba(15,23,42,.85));
  border: 1px solid var(--sefd-line);
  border-radius: var(--sefd-radius);
  box-shadow: var(--sefd-shadow);
  padding: 18px;
}

.sefd-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(229,93,5,.28);
  background: rgba(229,93,5,.10);
  color: #ffd2b8;
  font-size: 12px;
  margin: 0 0 8px;
}

.sefd-heroCard h1{
  margin: 0 0 8px;
  line-height: 1.15;
  font-size: clamp(22px, 4vw, 34px);
}

.sefd-accent{ color: var(--sefd-accent2); }

.sefd-sub{
  margin: 0 0 14px;
  color: var(--sefd-muted);
  font-size: 15px;
}

.sefd-ctaRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sefd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--sefd-line);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
}
.sefd-btn:active{ transform: scale(.98); }

.sefd-btnPrimary{
  border-color: rgba(229,93,5,.40);
  background: linear-gradient(135deg, rgba(229,93,5,.98), rgba(255,122,26,.92));
  color: #0b0f19;
}
.sefd-btnPrimary:hover{
  border-color: rgba(255,122,26,.75);
}

.sefd-btnGhost{
  background: rgba(255,255,255,.04);
  color: var(--sefd-text);
}
.sefd-btnGhost:hover{
  border-color: rgba(255,255,255,.18);
}

.sefd-preview{
  border: 1px solid var(--sefd-line);
  border-radius: var(--sefd-radius);
  background: rgba(16,24,44,.65);
  box-shadow: var(--sefd-shadow);
  overflow:hidden;
}

.sefd-previewTop{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sefd-line);
  color: var(--sefd-muted);
  font-size: 12px;
}
.sefd-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
}
.sefd-previewBody{ padding: 12px; }

.sefd-miniGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sefd-miniCard{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.10);
}
.sefd-miniCard strong{ display:block; }
.sefd-miniCard small{ color: var(--sefd-muted); }

.sefd-note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(229,93,5,.28);
  background: rgba(229,93,5,.08);
  color: #ffd2b8;
  font-size: 13px;
}

.sefd-content{
  display:grid;
  gap: 18px;
  margin-top: 16px;
}

.sefd-article{
  background: rgba(16,24,44,.70);
  border: 1px solid var(--sefd-line);
  border-radius: var(--sefd-radius);
  box-shadow: var(--sefd-shadow);
  padding: 18px;
}

.sefd-article h2{
  margin: 18px 0 10px;
  font-size: 18px;
}
.sefd-article p{ color: var(--sefd-muted); margin: 0 0 10px; }

.sefd-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.sefd-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
}
.sefd-card h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.sefd-card ul{
  margin: 0;
  padding-left: 18px;
  color: var(--sefd-muted);
}
.sefd-cardHighlight{
  border-color: rgba(229,93,5,.30);
  background: rgba(229,93,5,.08);
}

.sefd-steps{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--sefd-muted);
}
.sefd-steps li{ margin: 6px 0; }

.sefd-callout{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,122,26,.30);
  background: rgba(255,122,26,.10);
}
.sefd-callout h3{ margin: 0 0 6px; font-size: 16px; }
.sefd-callout p{ margin:0; color: #ffd9c2; }

.sefd-side{ }
.sefd-stickyCard{
  background: rgba(16,24,44,.65);
  border: 1px solid var(--sefd-line);
  border-radius: var(--sefd-radius);
  box-shadow: var(--sefd-shadow);
  padding: 16px;
}

.sefd-muted{ color: var(--sefd-muted); }

.sefd-shareBox{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.sefd-shareLabel{
  margin: 0 0 8px;
  color: var(--sefd-muted);
  font-size: 13px;
}
.sefd-shareText{
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  color: var(--sefd-text);
  font-size: 13px;
  word-break: break-word;
}
.sefd-hint{
  margin: 10px 0 0;
  color: var(--sefd-muted);
  font-size: 12px;
}

.sefd-miniFAQ{
  margin-top: 14px;
  border-top: 1px solid var(--sefd-line);
  padding-top: 12px;
}
.sefd-miniFAQ h4{ margin:0 0 8px; font-size: 14px; }
.sefd-miniFAQ ul{
  margin:0;
  padding-left: 18px;
  color: var(--sefd-muted);
}

.sefd-footer{
  margin-top: 18px;
}
.sefd-footerInner{
  border-top: 1px solid var(--sefd-line);
  padding: 14px 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
  color: var(--sefd-muted);
  font-size: 13px;
}

/* ====== Desktop enhancements ====== */
@media (min-width: 880px){
  .sefd-nav{ display:flex; }
  .sefd-hero{ grid-template-columns: 1.2fr .8fr; align-items: stretch; }
  .sefd-content{ grid-template-columns: 1.5fr .7fr; align-items: start; }
  .sefd-stickyCard{ position: sticky; top: 74px; }
  .sefd-grid{ grid-template-columns: 1fr 1fr; }
}
