/* NoHello - Common Styles */

:root{
  --ink:#111; --bg:#fff; --muted:#555; --rule:#e6e6e6;
  --good:#0a7a48; --bad:#b02929;
  --theme-toggle-bg: rgba(0,0,0,0.1);
  --theme-toggle-border: rgba(0,0,0,0.2);
}

/* Dark theme variables */
[data-theme="dark"]{
  --ink:#f5f5f5; --bg:#0e0e10; --muted:#a4a4ad; --rule:#222; 
  --good:#2fd389; --bad:#ff6b6b;
  --theme-toggle-bg: rgba(255,255,255,0.1);
  --theme-toggle-border: rgba(255,255,255,0.2);
}

/* Auto dark mode for users who haven't set a preference */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --ink:#f5f5f5; --bg:#0e0e10; --muted:#a4a4ad; --rule:#222; 
    --good:#2fd389; --bad:#ff6b6b;
    --theme-toggle-bg: rgba(255,255,255,0.1);
    --theme-toggle-border: rgba(255,255,255,0.2);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wrap{max-width:980px; margin:0 auto; padding:56px 20px 96px}

/* Header with theme toggle */
header{margin-bottom:28px; position:relative}
.header-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px}

/* Navigation back to main */
.nav-back{
  display:flex; align-items:center; gap:8px; color:var(--muted); text-decoration:none;
  font-size:14px; padding:6px 12px; border-radius:8px; border:1px solid var(--rule);
  transition: all 0.2s ease;
}
.nav-back:hover{
  background:var(--rule); color:var(--ink);
}

/* Theme toggle */
.theme-toggle{
  display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted);
}
.toggle-switch{
  position:relative; width:48px; height:24px; background:var(--theme-toggle-bg);
  border:1px solid var(--theme-toggle-border); border-radius:12px; cursor:pointer;
  transition: all 0.3s ease;
}
.toggle-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  background:var(--ink); border-radius:50%; transition: transform 0.3s ease;
}
[data-theme="dark"] .toggle-switch::after{
  transform: translateX(24px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .toggle-switch::after{
    transform: translateX(24px);
  }
}

.platform-header{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.platform-icon{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:white;
  font-weight:bold; font-size:16px;
}

/* Platform-specific guides */
.platform-nav{
  background:var(--bg); border:1px solid var(--rule); border-radius:12px; padding:20px;
  margin:20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.platform-nav h3{
  margin:0 0 12px; font-size:18px; color:var(--ink);
}
.platform-links{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px;
}
.platform-link{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--bg); border:1px solid var(--rule); border-radius:8px;
  color:var(--ink); text-decoration:none; transition: all 0.2s ease;
}
.platform-link:hover{
  background:var(--rule); transform: translateY(-1px);
}
.platform-link .platform-icon{
  width:20px; height:20px; border-radius:4px; background:var(--good);
  display:flex; align-items:center; justify-content:center; color:white;
  font-size:12px; font-weight:bold;
}

h1{
  font-family:"Source Serif 4", ui-serif, Georgia, serif;
  font-size:clamp(32px,5.4vw,64px); line-height:1.04; margin:0 0 8px; letter-spacing:-.01em;
}
.lead{color:var(--muted); font-size:clamp(16px,1.5vw,19px); margin:0 0 14px}

.toc{
  display:flex; flex-wrap:wrap; gap:12px; padding:14px 0 0; border-top:1px solid var(--rule);
  font-weight:600; font-size:14px;
}
.toc a{color:inherit; text-decoration:none; padding:6px 10px; border-radius:8px; transition: background 0.2s ease}
.toc a:hover{background:var(--rule)}

section{padding:26px 0; border-top:1px solid var(--rule)}
h2{
  font-family:"Source Serif 4", ui-serif, Georgia, serif;
  font-size:clamp(22px,3.2vw,36px); line-height:1.15; margin:0 0 8px;
}
h3{font-size:18px; margin:0 0 6px}
h4{font-size:16px; margin:0 0 4px}
p{margin:0 0 10px}
ul,ol{margin:8px 0 0 20px}
.grid{display:grid; gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .cols-3,.cols-2{grid-template-columns:1fr} }
.callout{
  border:1px solid var(--rule); border-radius:12px; padding:18px;
  transition: border-color 0.3s ease;
}
.pill{display:inline-block; font-weight:700; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--rule)}
.pill.good{color:var(--good); border-color:currentColor}
.pill.bad{color:var(--bad); border-color:currentColor}
code{font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-weight:500; background:rgba(127,127,127,.12); padding:.15rem .4rem; border-radius:6px}
.examples{display:grid; gap:12px}
.bubble{border:1px dashed var(--rule); border-radius:10px; padding:12px; transition: border-color 0.3s ease}

/* Copy button for templates */
.copy-template{
  position:relative; margin:10px 0;
}
.copy-btn{
  position:absolute; top:8px; right:8px; color:white;
  border:none; padding:4px 8px; border-radius:4px; font-size:12px; cursor:pointer;
  opacity:0.8; transition: opacity 0.2s ease;
}
.copy-btn:hover{opacity:1}

/* Status message section */
.status-section{
  background:linear-gradient(135deg, rgba(10, 122, 72, 0.1), rgba(47, 211, 137, 0.1));
  border:2px solid var(--good); border-radius:12px; padding:20px; margin:20px 0;
  text-align:center;
}
.status-section h3{
  color:var(--good); margin:0 0 12px;
}
.status-message{
  background:var(--bg); border:2px dashed var(--good); border-radius:8px;
  padding:12px; margin:10px 0; font-family:"JetBrains Mono", monospace;
  font-size:14px; position:relative;
}
.status-copy-btn{
  background:var(--good); color:white; border:none; padding:8px 16px;
  border-radius:6px; font-weight:600; cursor:pointer; margin:10px 5px;
  transition: all 0.2s ease;
}
.status-copy-btn:hover{
  background:var(--good); opacity:0.9; transform:translateY(-1px);
}

/* Hashtag link styling */
.hashtag-link{
  display:inline-block; margin-top:10px; color:var(--good); text-decoration:none;
  font-weight:600; font-size:16px;
}
.hashtag-link:hover{
  text-decoration:underline;
}

footer{margin-top:40px; color:var(--muted); font-size:14px}

/* Safe motion */
@media (prefers-reduced-motion: reduce){ 
  *{transition:none!important; animation:none!important} 
  .toggle-switch::after{transition:none!important}
}

/* Platform-specific color overrides */
.platform-teams { --platform-color: #464EB8; }
.platform-slack { --platform-color: #4A154B; }
.platform-discord { --platform-color: #5865F2; }
.platform-whatsapp { --platform-color: #25D366; }
.platform-telegram { --platform-color: #0088CC; }
.platform-email { --platform-color: #D44638; }

[data-theme="dark"] .platform-teams { --platform-color: #6B73FF; }
[data-theme="dark"] .platform-slack { --platform-color: #E01E5A; }
[data-theme="dark"] .platform-discord { --platform-color: #7289DA; }
[data-theme="dark"] .platform-whatsapp { --platform-color: #128C7E; }
[data-theme="dark"] .platform-telegram { --platform-color: #64B5F6; }
[data-theme="dark"] .platform-email { --platform-color: #EA4335; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .platform-teams { --platform-color: #6B73FF; }
  :root:not([data-theme]) .platform-slack { --platform-color: #E01E5A; }
  :root:not([data-theme]) .platform-discord { --platform-color: #7289DA; }
  :root:not([data-theme]) .platform-whatsapp { --platform-color: #128C7E; }
  :root:not([data-theme]) .platform-telegram { --platform-color: #64B5F6; }
  :root:not([data-theme]) .platform-email { --platform-color: #EA4335; }
}

.platform-teams .platform-icon,
.platform-teams .copy-btn,
.platform-teams .status-copy-btn { background: var(--platform-color); }
.platform-teams .callout.platform-callout { border-color: var(--platform-color); background: rgba(70, 78, 184, 0.05); }
.platform-teams h4 { color: var(--platform-color); }

.platform-slack .platform-icon,
.platform-slack .copy-btn,
.platform-slack .status-copy-btn { background: var(--platform-color); }
.platform-slack .callout.platform-callout { border-color: var(--platform-color); background: rgba(74, 21, 75, 0.05); }
.platform-slack h4 { color: var(--platform-color); }

.platform-discord .platform-icon,
.platform-discord .copy-btn,
.platform-discord .status-copy-btn { background: var(--platform-color); }
.platform-discord .callout.platform-callout { border-color: var(--platform-color); background: rgba(88, 101, 242, 0.05); }
.platform-discord h4 { color: var(--platform-color); }

.platform-whatsapp .platform-icon,
.platform-whatsapp .copy-btn,
.platform-whatsapp .status-copy-btn { background: var(--platform-color); }
.platform-whatsapp .callout.platform-callout { border-color: var(--platform-color); background: rgba(37, 211, 102, 0.05); }
.platform-whatsapp h4 { color: var(--platform-color); }

.platform-telegram .platform-icon,
.platform-telegram .copy-btn,
.platform-telegram .status-copy-btn { background: var(--platform-color); }
.platform-telegram .callout.platform-callout { border-color: var(--platform-color); background: rgba(0, 136, 204, 0.05); }
.platform-telegram h4 { color: var(--platform-color); }

.platform-email .platform-icon,
.platform-email .copy-btn,
.platform-email .status-copy-btn { background: var(--platform-color); }
.platform-email .callout.platform-callout { border-color: var(--platform-color); background: rgba(212, 70, 56, 0.05); }
.platform-email h4 { color: var(--platform-color); }

/* NoHello Consent Modal Overlay */
/* Blocks site interaction until user makes consent choice */

/* Site blocking overlay */
#nohello-consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Consent modal */
#nohello-consent-banner {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  z-index: 9999;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.consent-content {
  padding: 24px;
  text-align: center;
}

.consent-content h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-family: "Source Serif 4", ui-serif, Georgia, serif;
  color: var(--ink);
}

.consent-content p {
  margin: 0 0 20px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.consent-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.consent-btn {
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  transition: all 0.2s ease;
  min-width: 100px;
}

.consent-btn-accept {
  background: var(--good);
  color: white;
}

.consent-btn-accept:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.consent-btn-decline {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
}

.consent-btn-decline:hover {
  background: var(--rule);
  color: var(--ink);
  transform: translateY(-1px);
}

.consent-privacy-link {
  color: var(--good);
  text-decoration: none;
  font-size: 14px;
  display: block;
  margin-top: 8px;
}

.consent-privacy-link:hover {
  text-decoration: underline;
}

/* Disable site interaction when consent is showing */
body.consent-blocking {
  overflow: hidden;
}

body.consent-blocking .wrap {
  filter: grayscale(50%) blur(1px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #nohello-consent-overlay {
    padding: 16px;
  }
  
  .consent-content {
    padding: 20px;
  }
  
  .consent-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .consent-btn {
    width: 100%;
  }
}

/* Shake animation for when user tries to click outside modal */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #nohello-consent-banner,
  .consent-btn,
  body.consent-blocking .wrap {
    transition: none !important;
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
  }
}