/*
Theme Name: SecureLock
Theme URI: https://example.com/securelock
Author: SecureLock
Author URI: https://example.com
Description: Official theme for SecureLock — a browser-based, IP-bound file encryption tool. Includes a marketing front page and a working Lock/Unlock tool page template.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: securelock
*/

:root { --radius: 12px; }
html[data-theme="dark"] {
  --bg:#12151c; --bg-grid:#171b24; --panel:#1a1f29; --panel-2:#202634;
  --fg:#e7eaf1; --muted:#8790a1; --accent:#c98a4b; --accent-fg:#14100a;
  --ok:#4fae7c; --danger:#d9614f; --border:#2a303c; --shadow:rgba(0,0,0,.35);
}
html[data-theme="light"] {
  --bg:#f2f0eb; --bg-grid:#eae7df; --panel:#ffffff; --panel-2:#f7f5f0;
  --fg:#1c1d1f; --muted:#676a6f; --accent:#a8632c; --accent-fg:#fff8f0;
  --ok:#2f8f5e; --danger:#b83f30; --border:#ddd8cc; --shadow:rgba(30,25,15,.10);
}
html[data-theme="midnight"] {
  --bg:#0a0f1e; --bg-grid:#0d1426; --panel:#10182c; --panel-2:#141f38;
  --fg:#e6ecff; --muted:#7c8bb3; --accent:#5b8cff; --accent-fg:#08101f;
  --ok:#47d3a0; --danger:#ff7a70; --border:#202c4d; --shadow:rgba(0,0,10,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; color:var(--fg); font-family:"Inter",system-ui,sans-serif;
  background: radial-gradient(circle at 1px 1px, var(--bg-grid) 1px, transparent 1.6px) 0 0/22px 22px, var(--bg);
  -webkit-font-smoothing:antialiased; transition: background-color .25s, color .25s;
}
.mono { font-family:"IBM Plex Mono",monospace; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* --- nav --- */
nav.site-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0; position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
nav.site-nav.scrolled { border-bottom-color: var(--border); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand h1 { font-family:"Space Grotesk",sans-serif; font-size:19px; font-weight:700; margin:0; letter-spacing:-.01em; }
.nav-links { display:flex; gap: 26px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a { font-size: 13.5px; color: var(--muted); text-decoration:none; }
.nav-links a:hover { color: var(--fg); }
.nav-cta {
  background: var(--accent); color: var(--accent-fg); font-family:"Space Grotesk",sans-serif;
  font-weight:600; font-size:13.5px; padding: 9px 16px; border-radius: 8px; text-decoration:none;
}
.theme-picker { display:flex; gap:4px; background:var(--panel); border:1px solid var(--border); padding:3px; border-radius:999px; margin-right: 6px; }
.theme-picker button { border:none; background:none; color:var(--muted); font-size:11px; padding:5px 9px; border-radius:999px; cursor:pointer; font-family:"Inter",sans-serif; }
.theme-picker button.active { background:var(--accent); color:var(--accent-fg); font-weight:600; }
.nav-mobile-toggle { display:none; background:none; border:1px solid var(--border); color:var(--fg); border-radius:8px; padding:7px 10px; cursor:pointer; }
.nav-right { display:flex; align-items:center; }

/* --- hero --- */
.hero { padding: 76px 0 60px; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:6px 12px; border-radius:999px; margin-bottom:20px; }
.hero h2 { font-family:"Space Grotesk",sans-serif; font-size: 46px; line-height:1.08; font-weight:700; letter-spacing:-.02em; margin:0 0 20px; }
.hero h2 em { font-style:normal; color:var(--accent); }
.hero p.lead { color:var(--muted); font-size:16.5px; line-height:1.6; max-width: 480px; margin:0 0 30px; }
.hero-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn-primary {
  background:var(--accent); color:var(--accent-fg); font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:14.5px; padding:14px 24px; border-radius:9px; text-decoration:none; display:inline-flex; gap:10px; align-items:center;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent); border: none; cursor: pointer;
}
.btn-secondary {
  border:1px solid var(--border); color:var(--fg); font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:14.5px; padding:13px 22px; border-radius:9px; text-decoration:none; background: transparent; cursor: pointer;
}
.hero-meta { display:flex; gap:22px; margin-top:30px; color:var(--muted); font-size:12.5px; flex-wrap: wrap; }
.hero-meta span { display:flex; align-items:center; gap:6px; }

/* --- keycard --- */
.keycard-demo, .keycard {
  background: linear-gradient(155deg, var(--panel-2), var(--panel));
  border:1px solid var(--border); border-radius:16px; padding:26px;
  box-shadow: 0 24px 60px var(--shadow); position:relative; overflow:hidden;
}
.keycard-demo::before, .keycard::before {
  content:""; position:absolute; top:-40%; right:-15%; width:280px; height:280px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.kd-label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; position:relative; }
.kd-ip { font-size:23px; font-weight:500; display:flex; align-items:center; gap:8px; position:relative; margin-bottom: 16px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 3px transparent; display:inline-block; transition: all .2s ease; }
.status-dot.ok { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.status-dot.bad { background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.status-dot.checking { background: var(--accent); animation: pulse 1.1s infinite ease-in-out; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.kd-barcode { display:flex; gap:3px; height:22px; align-items:flex-end; margin-bottom:20px; position:relative; }
.kd-barcode span { display:block; width:4px; background:var(--accent); opacity:.6; border-radius:1px; }
.kd-file-row { display:flex; align-items:center; justify-content:space-between; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:12.5px; position:relative; }
.kd-file-row .name { display:flex; align-items:center; gap:10px; color:var(--fg); }
.kd-lock-pill { background: color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; }

/* --- section shared --- */
section.sl-section { padding: 64px 0; border-top: 1px solid var(--border); }
.section-head { max-width: 620px; margin: 0 auto 44px; text-align:center; }
.section-head h3 { font-family:"Space Grotesk",sans-serif; font-size:32px; margin:0 0 12px; letter-spacing:-.01em; }
.section-head p { color:var(--muted); font-size:15px; line-height:1.6; margin:0; }

/* --- steps --- */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.step { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.step .num { font-family:"IBM Plex Mono",monospace; color:var(--accent); font-size:13px; margin-bottom:14px; }
.step h4 { font-family:"Space Grotesk",sans-serif; font-size:17px; margin:0 0 10px; }
.step p { color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; }

/* --- feature grid --- */
.features { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.feature { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.feature .icon { width:38px; height:38px; border-radius:9px; background:color-mix(in srgb, var(--accent) 14%, transparent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feature h4 { font-family:"Space Grotesk",sans-serif; font-size:15.5px; margin:0 0 8px; }
.feature p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }

/* --- security panel --- */
.security-panel { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:36px; display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:center; }
.security-panel .formula { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:18px; font-size:13px; line-height:2.1; }
.formula .row { display:flex; justify-content:space-between; gap:12px; }
.formula .row .k { color:var(--muted); }
.formula .row .v { color: var(--accent); }
.security-panel h3 { font-family:"Space Grotesk",sans-serif; font-size:24px; margin:0 0 14px; }
.security-panel p { color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 14px; }
.security-panel ul { margin:0; padding-left:18px; color:var(--muted); font-size:13.5px; line-height:1.9; }

/* --- faq --- */
.faq { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom:1px solid var(--border); padding: 18px 0; }
.faq-q { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:"Space Grotesk",sans-serif; font-size:15.5px; font-weight:600; }
.faq-q .chev { color:var(--muted); transition: transform .2s ease; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; color:var(--muted); font-size:13.5px; line-height:1.7; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 260px; padding-top: 10px; }

/* --- cta band --- */
.cta-band { text-align:center; border-radius:18px; background: linear-gradient(155deg, var(--panel-2), var(--panel)); border:1px solid var(--border); padding: 56px 30px; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:-40% -10% auto -10%; height:280px; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.cta-band h3 { font-family:"Space Grotesk",sans-serif; font-size:28px; margin:0 0 12px; position:relative; }
.cta-band p { color:var(--muted); margin:0 0 26px; position:relative; }

/* --- generic page/post content --- */
.content-wrap { padding: 60px 0; min-height: 40vh; }
.content-wrap article { max-width: 760px; margin: 0 auto; }
.content-wrap h1.page-title { font-family:"Space Grotesk",sans-serif; font-size:34px; margin: 0 0 24px; }
.content-wrap .entry-content { color: var(--fg); font-size: 15.5px; line-height: 1.8; }
.content-wrap .entry-content h2, .content-wrap .entry-content h3 { font-family:"Space Grotesk",sans-serif; }
.content-wrap .entry-content a { color: var(--accent); }
.content-wrap .entry-content img { border-radius: 10px; }
.post-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.archive-list { max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap: 28px; }
.archive-item { border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.archive-item h2 { font-family:"Space Grotesk",sans-serif; font-size: 21px; margin: 0 0 8px; }
.archive-item h2 a { text-decoration:none; }
.archive-item p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.pagination { display:flex; gap: 10px; justify-content:center; margin-top: 20px; }
.pagination a, .pagination span { border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; text-decoration:none; color: var(--fg); }

/* --- widget area / footer --- */
footer.site-footer { border-top:1px solid var(--border); padding: 34px 0; }
.footer-widgets { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 24px; padding-bottom: 24px; }
.footer-widgets .widget h2, .footer-widgets .widget h3 { font-family:"Space Grotesk",sans-serif; font-size: 14px; margin: 0 0 10px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:12.5px; border-top: 1px solid var(--border); padding-top: 20px; }
.footer-bottom .flinks { display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.footer-bottom a { text-decoration:none; color:var(--muted); }
.footer-bottom a:hover { color: var(--fg); }

/* --- 404 --- */
.not-found { text-align:center; padding: 100px 0; }
.not-found h1 { font-family:"Space Grotesk",sans-serif; font-size: 64px; margin:0; color: var(--accent); }

/* --- tool page (lock/unlock app template) --- */
.tool-tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.tool-tab-btn { background:none; border:none; color:var(--muted); font-family:"Space Grotesk",sans-serif; font-size:14px; font-weight:600; padding:10px 6px; margin-right:22px; cursor:pointer; border-bottom:2px solid transparent; transform: translateY(1px); }
.tool-tab-btn.active { color:var(--fg); border-bottom-color:var(--accent); }
.tool-panel { display:none; }
.tool-panel.active { display:block; }
.tool-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.tool-card p.hint { color:var(--muted); font-size:13.5px; line-height:1.55; margin:0 0 18px; }
.tool-field { margin-bottom:16px; }
.tool-field label { display:block; font-size:12px; letter-spacing:.03em; color:var(--muted); margin-bottom:6px; }
.dropzone { border:1.5px dashed var(--border); border-radius:8px; padding:22px; text-align:center; cursor:pointer; transition: border-color .15s ease, background .15s ease; color:var(--muted); font-size:13.5px; }
.dropzone:hover, .dropzone.drag { border-color:var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dropzone strong { color: var(--fg); }
.dropzone input { display:none; }
.file-chip { display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border); padding:6px 10px 6px 12px; border-radius:999px; font-size:12.5px; margin-top:10px; }
.file-chip button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; }
.spinner { width:14px; height:14px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent-fg) 30%, transparent); border-top-color:var(--accent-fg); animation: spin .7s linear infinite; display:none; }
.spinner.show { display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.tool-log { margin-top:18px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:12px; color:var(--muted); max-height:170px; overflow-y:auto; line-height:1.7; }
.tool-log .ok-line { color: var(--ok); }
.tool-log .bad-line { color: var(--danger); }
.tool-log .entry span.t { opacity:.55; margin-right:6px; }
.result-banner { display:none; margin-top:16px; padding:14px 16px; border-radius:8px; font-size:13.5px; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result-banner.show { display:flex; }
.result-banner.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.result-banner.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.result-banner a, .result-banner button.link { background:none; border:1px solid currentColor; color:inherit; padding:6px 12px; border-radius:6px; font-size:12.5px; text-decoration:none; cursor:pointer; font-family:"Inter",sans-serif; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .hero h2 { font-size: 34px; }
  .steps, .features { grid-template-columns: 1fr; }
  .security-panel { grid-template-columns: 1fr; }
  .nav-links { display:none; }
  .nav-mobile-toggle { display:inline-flex; }
}