/* =====================================================================
   ipquery.info — emerald override on the YakWare design system
   Loaded AFTER /rsc/css/yakware-style.css; reuses its entire structure
   (layout, typography, components, animations) and only re-skins it to a
   light-green / emerald + deep-slate palette, with a globe motif.
   ===================================================================== */

:root {
    --paper:      #eef5f1;   /* light mint base                 */
    --paper-2:    #e2f0ea;   /* alt section background          */
    --card:       #ffffff;
    --ink:        #11231d;   /* dark green-slate body text      */
    --ink-soft:   #4d5f58;
    --ink-faint:  #8a9690;
    --line:       #d7e5dd;
    --line-soft:  #e6efe9;
    --navy:       #0f7a5a;   /* emerald primary (buttons/links) */
    --navy-deep:  #0c2c25;   /* deep slate footer               */
    --navy-tint:  #e2f0ea;   /* soft fill behind card icons     */
    --brass:      #2fa37c;   /* soft emerald accent / eyebrow   */
    --brass-soft: #57b794;
}

/* Hero glow re-tinted to the green palette (yakware uses navy + brass) */
.yw-hero {
    background:
        radial-gradient(120% 120% at 88% -10%, rgba(15,122,90,.12), transparent 55%),
        radial-gradient(90% 90% at -5% 110%, rgba(47,163,124,.10), transparent 60%);
}

/* --------------------------- Globe motif -------------------------- */
/* The line-art globe replaces the photo in the circular hero medallion.
   yakware's figure has padding + object-fit:cover for photos; the globe
   is line-art on transparent, so let it sit a touch inset and contained. */
.yw-hero__media img.geo-globe {
    border-radius: 0;
    object-fit: contain;
    padding: 6px;
}

/* --------------------- Legacy Bootstrap bridges ------------------- */
/* Widgets created in C++ (SelectPlanBtnWidget, pricing cards) emit plain
   Bootstrap-3 classes. Map them onto the emerald theme so they match the
   yw-* components without touching the C++. */
.btn-primary,
.btn-primary:focus {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
    border-radius: 2px;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--shadow-sm);
    transition: all .22s var(--ease);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--navy-deep) !important;
    border-color: var(--navy-deep) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* The two prominent marketing CTAs get extra presence */
.marketing-free-trial-btn {
    padding: 14px 28px;
    font-size: 1.05rem;
    white-space: pre-line;   /* honour the "\n" in the button label */
    line-height: 1.3;
}

.btn-primary-soft {
    background-color: var(--navy-tint) !important;
    border-color: transparent !important;
    color: var(--navy) !important;
}
.btn-primary-soft:hover,
.btn-primary-soft:focus {
    background-color: var(--brass-soft) !important;
    color: #fff !important;
}

.text-primary { color: var(--navy) !important; }

/* Pricing / dashboard panels & cards inherit the paper-and-line look */
.panel, .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}
.panel-default > .panel-heading { background: var(--paper-2); border-color: var(--line); }
.badge-primary-soft {
    background: var(--navy-tint);
    color: var(--navy);
}
.pricing-icon { color: var(--brass); margin-right: .5rem; }

/* ----------------------- JSON / code samples --------------------- */
/* highlight.js default theme is built for light cards; frame the block as
   a card so it reads cleanly on the mint background. */
.sample-code pre,
.yw-code pre {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    margin: 0;
    overflow-x: auto;
    font-size: .95rem;
    line-height: 1.6;
}
.yw-code__url {
    display: block;
    background: var(--navy-deep);
    color: #d7f0e6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    word-break: break-all;
    border-radius: 6px;
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
}
.yw-code__url b { color: var(--brass-soft); }