/*
Theme Name: Digital Safety Awareness
Theme URI: https://example.com
Author: Sajju
Description: One-page WordPress theme for an online privacy & safety awareness website — blackmail prevention tips, PECA law info, and a Watch Now countdown-gated awareness video. Fast loading, fully responsive.
Version: 1.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dsafe
*/

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    color: #1c1c1c;
    background: #fafafa;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0d6efd; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
section { padding: 60px 0; }
h1, h2, h3 { line-height: 1.3; }

/* ---------- Header / sticky nav ---------- */
.site-header {
    background: #101418;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.site-title { margin: 0; font-size: 21px; }
.site-title a { color: #fff; font-weight: 700; }
.site-nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { color: #cfd3d8; font-size: 14px; }
.site-nav a:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, #101418 0%, #1e2733 100%);
    color: #fff;
    text-align: center;
    padding: 70px 0 50px;
}
.hero h1 { font-size: 34px; margin: 0 0 14px; }
.hero p.tagline { font-size: 18px; color: #c9ced4; max-width: 620px; margin: 0 auto; }

/* ---------- Watch Now gate (reused pattern) ---------- */
.watch-now-wrap { text-align: center; margin: 34px 0 10px; }
.watch-now-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FFD400, #FFC107);
    color: #101418;
    border: none;
    padding: 22px 54px;
    font-size: 23px;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(255, 196, 0, 0.5);
    animation: qw-pulse 1.6s infinite;
    transition: transform 0.15s ease;
}
.watch-now-btn:hover { transform: scale(1.05); }
.watch-now-btn svg { width: 26px; height: 26px; fill: #101418; }
@keyframes qw-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.6); }
    70%  { box-shadow: 0 0 0 20px rgba(255, 196, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0); }
}
.watch-now-note { color: #9aa1a8; font-size: 13px; margin-top: 10px; }

.qw-countdown { display: none; flex-direction: column; align-items: center; gap: 10px; margin: 20px auto; }
.qw-countdown.active { display: flex; }
.qw-countdown-circle {
    width: 90px; height: 90px; border-radius: 50%;
    border: 6px solid #2a3542; border-top-color: #FFC107;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: #fff;
    background: #101418;
    animation: qw-spin 1s linear infinite;
}
@keyframes qw-spin { to { transform: rotate(360deg); } }
.qw-countdown-label { color: #888; font-size: 14px; }

/* Fake player - shows a loading/buffering state, never actually plays a video */
.qw-video-wrap { display: none; margin: 20px 0 10px; }
.qw-video-wrap.active { display: block; }
.qw-player-mock {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #ccc;
}
.qw-player-spinner {
    width: 46px; height: 46px;
    border: 4px solid #333;
    border-top-color: #FFC107;
    border-radius: 50%;
    animation: qw-spin 0.9s linear infinite;
}
.qw-player-mock span { font-size: 14px; color: #aaa; }

.qw-video-unsupported {
    display: none; text-align: center; background: #fff3f3;
    border: 1px solid #ffd6d6; color: #b30000; padding: 30px 20px;
    border-radius: 10px; font-weight: 600;
}
.qw-video-unsupported.active { display: block; }

/* ---------- Generic section styling ---------- */
.section-title { font-size: 26px; text-align: center; margin-bottom: 10px; }
.section-sub { text-align: center; color: #666; max-width: 620px; margin: 0 auto 34px; }

.about-content p { font-size: 17px; margin-bottom: 18px; }

/* Tips grid */
.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tip-card { background: #fff; border: 1px solid #eaeaea; border-radius: 10px; padding: 22px; }
.tip-card h3 { font-size: 17px; margin: 0 0 8px; color: #0d6efd; }
.tip-card p { margin: 0; color: #444; font-size: 15px; }

/* Law section */
.law-box { background: #101418; color: #e8eaed; border-radius: 12px; padding: 30px; }
.law-box h3 { color: #2fb1ff; margin-top: 0; }
.law-box ul { padding-left: 20px; }
.law-box li { margin-bottom: 10px; }

/* Case study cards */
.case-disclaimer {
    background: #fff8e1; border: 1px solid #ffe082; color: #7a5b00;
    padding: 14px 18px; border-radius: 8px; font-size: 14px; margin-bottom: 26px;
}
.case-grid { display: grid; gap: 20px; }
.case-card { background: #fff; border: 1px solid #eaeaea; border-radius: 10px; padding: 24px; }
.case-card h3 { margin: 0 0 8px; font-size: 18px; }
.case-card .case-tag {
    display: inline-block; background: #eef4ff; color: #0d6efd;
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.case-card p { margin: 0; color: #444; }

/* Reporting resources */
.resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.resource-card { background: #fff; border: 1px solid #eaeaea; border-radius: 10px; padding: 20px; text-align: center; }
.resource-card h3 { font-size: 16px; margin: 0 0 8px; }
.resource-card a.btn {
    display: inline-block; margin-top: 10px; background: #0d6efd; color: #fff;
    padding: 8px 18px; border-radius: 6px; font-size: 14px; font-weight: 600;
}

/* ---------- Footer ---------- */
.site-footer { background: #101418; color: #9aa1a8; padding: 30px 0 24px; margin-top: 20px; font-size: 14px; text-align: center; }
.site-footer a { color: #cfd3d8; }
.site-footer a:hover { color: #FFC107; text-decoration: none; }
.footer-links { font-size: 13.5px; margin-bottom: 14px; line-height: 2; }

/* ---------- Ad slots ---------- */
.dsafe-ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto;
    overflow: hidden;
}
.dsafe-ad-728x90 { max-width: 728px; }
.dsafe-ad-320x50 { max-width: 320px; display: none; }
.dsafe-ad-300x250 { max-width: 300px; }
.dsafe-ad-468x60 { max-width: 468px; }
.dsafe-ad-160x300 { max-width: 160px; }
.dsafe-ad-native { max-width: 100%; }

.dsafe-skyscraper {
    position: fixed;
    top: 120px;
    right: 14px;
    z-index: 50;
}
@media (max-width: 1300px) {
    .dsafe-skyscraper { display: none; }
}

@media (max-width: 600px) {
    .dsafe-ad-728x90 { display: none; }
    .dsafe-ad-320x50 { display: flex; }
}

.footer-sponsored {
    font-size: 12px;
    color: #6a6f75;
    margin-top: 6px;
}
.footer-sponsored a { color: #6a6f75; }
@media (max-width: 600px) {
    .hero h1 { font-size: 26px; }
    .watch-now-btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 16px; }
    .qw-countdown-circle { width: 76px; height: 76px; font-size: 24px; }
    section { padding: 40px 0; }
}