/* PINIP — WhoisSEO-like layout, teal + coral palette (not blue/green) */
:root {
    --ws-teal: #0f766e;
    --ws-teal-dark: #0b5f59;
    --ws-teal-soft: #14b8a6;
    --ws-coral: #ea580c;
    --ws-coral-soft: #fb923c;
    --ws-bg: #f3f5f4;
    --ws-card: #ffffff;
    --ws-ink: #1f2937;
    --ws-muted: #6b7280;
    --ws-line: #e5e7eb;
    --ws-shadow: 0 8px 24px rgba(15, 118, 110, 0.12);

    --primary-cyan: var(--ws-coral);
    --primary-cyan-light: var(--ws-coral-soft);
    --primary-cyan-dark: #c2410c;
    --brand-gold: var(--ws-coral);
    --brand-gold-light: var(--ws-coral-soft);
    --brand-gold-dark: #c2410c;

    --bg-dark: var(--ws-bg);
    --bg-darker: #e8eeec;
    --bg-card: var(--ws-card);
    --bg-card-hover: rgba(15, 118, 110, 0.08);
    --bg-header: var(--ws-teal);
    --bg-gradient: var(--ws-bg);
    --bg-input: #ffffff;
    --bg-elevated: #ffffff;

    --text-primary: var(--ws-ink);
    --text-secondary: #374151;
    --text-muted: var(--ws-muted);
    --text-accent: var(--ws-teal);

    --border-default: var(--ws-line);
    --border-accent: rgba(15, 118, 110, 0.35);
    --border-glow: rgba(234, 88, 12, 0.45);

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-glow: none;
    --shadow-glow-strong: none;
    --shadow-card: var(--ws-shadow);
    --shadow-card-hover: 0 12px 28px rgba(15, 118, 110, 0.18);

    --font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --header-height: 64px;
    --search-strip-height: 0px;
    --site-top-height: var(--header-height);
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");

body {
    background: var(--ws-bg) !important;
    background-attachment: scroll !important;
    color: var(--ws-ink) !important;
    padding: 0 !important;
    padding-top: calc(var(--header-height) + 12px) !important;
}

body::before {
    content: "";
    position: fixed;
    width: min(70vw, 520px);
    height: min(70vw, 520px);
    left: -120px;
    top: 120px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    pointer-events: none;
    z-index: 0;
}

.pinip-site-body,
.container,
.pinip-main {
    position: relative;
    z-index: 1;
}

/* —— Header like WhoisSEO —— */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    min-height: var(--header-height);
    background: var(--ws-teal) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 0 !important;
}

.site-header .main-nav,
.site-header .nav-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-header .nav-container {
    max-width: 1100px;
    margin: 0 auto;
    min-height: var(--header-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.site-wordmark {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.site-wordmark::after {
    content: ".net";
    color: var(--ws-coral-soft);
}

.site-header .nav-menu a,
.site-header .visitor-info,
.site-header .visitor-ip {
    color: #fff !important;
}

.site-header .nav-menu a.is-active,
.site-header .nav-menu a:hover {
    color: var(--ws-coral-soft) !important;
}

.pinip-nav-toggle {
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    border-radius: 6px;
    width: 42px;
    height: 42px;
}
.pinip-nav-toggle-bar {
    background: #fff !important;
}

/* Hide old search strip in header — search moves below tool grid */
.site-header .pinip-search-bar {
    display: none !important;
}

.visitor-info {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px;
    padding: 6px 10px;
}

/* —— WhoisSEO-style tool grid —— */
.pinip-ws-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 8px 16px 40px;
}

.pinip-ws-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 8px 0 22px;
}

@media (max-width: 800px) {
    .pinip-ws-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .pinip-ws-tools {
        grid-template-columns: 1fr;
    }
}

.pinip-ws-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 118px;
    padding: 18px 12px;
    background: var(--ws-card);
    color: var(--ws-ink);
    border-radius: 10px;
    box-shadow: var(--ws-shadow);
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pinip-ws-tool:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(15, 118, 110, 0.25);
}

.pinip-ws-tool.is-active {
    background: var(--ws-teal);
    color: #fff;
}

.pinip-ws-tool-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    color: inherit;
}

.pinip-ws-tool-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
}

/* —— Main search block —— */
.pinip-ws-search {
    background: transparent;
    margin: 0 0 28px;
}

.pinip-ws-search-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pinip-ws-search-row input {
    flex: 1;
    min-height: 52px;
    border-radius: 8px;
    border: 1px solid var(--ws-line);
    background: #fff;
    color: var(--ws-ink);
    padding: 0 16px;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}

.pinip-ws-search-row input:focus {
    outline: 2px solid rgba(15, 118, 110, 0.35);
    border-color: var(--ws-teal);
}

.pinip-ws-search-row button {
    min-width: 140px;
    border: 0;
    border-radius: 8px;
    background: var(--ws-teal);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.pinip-ws-search-row button:hover {
    background: var(--ws-teal-dark);
}

.pinip-ws-hero-ip {
    margin: 18px 0 8px;
    text-align: center;
}

.pinip-ws-hero-ip h1 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 10px;
    color: var(--ws-ink);
}

.pinip-ws-ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: var(--ws-shadow);
    border: 1px solid var(--ws-line);
}

.pinip-ws-ip-chip code {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ws-teal);
}

/* Cards / panels on light theme */
.pinip-panel,
.pinip-hero,
.pinip-home-hero,
.pinip-tool-card,
.pinip-tool-card-v2,
.pinip-result-card,
.pinip-stat-card-v2,
.pinip-sidebar {
    background: #fff !important;
    color: var(--ws-ink) !important;
    border: 1px solid var(--ws-line) !important;
    box-shadow: var(--shadow-sm);
}

.pinip-section-title,
.pinip-article-title,
.pinip-panel-title,
.pinip-hero-title {
    color: var(--ws-ink) !important;
}

.pinip-hero-ip,
.pinip-result-ip,
.pinip-text-accent,
a {
    color: var(--ws-teal);
}

.btn,
.pinip-global-search-btn {
    background: var(--ws-teal) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
}

.btn:hover,
.pinip-global-search-btn:hover {
    background: var(--ws-teal-dark) !important;
}

.site-footer,
footer,
.pinip-footer {
    background: #0f3d39 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.site-footer a,
.pinip-footer a {
    color: #99f6e4 !important;
}

.pinip-search-pill {
    border-radius: 8px !important;
    border-color: var(--ws-line) !important;
    box-shadow: var(--shadow-sm) !important;
}

.pinip-global-search-icon {
    color: var(--ws-muted) !important;
}

.pinip-tools-grid,
.pinip-tools-cards {
    display: none;
}