/*
Theme Name: Shopfiles Demo
Theme URI: https://www.shopfiles.com/
Description: Child theme of Hello Elementor styled to match the shopfiles.com design system — ink header/footer, paper surfaces, Inter + Fraunces typography. Built for the Ebook Store plugin demo site.
Author: shopfiles.com
Template: hello-elementor
Version: 1.0.0
Text Domain: shopfiles-demo
*/

/* ---------- Tokens (mirrors shopfiles.com landing) ---------- */
:root {
    --sf-ink-950: #060b16;
    --sf-ink-900: #0a1322;
    --sf-ink-800: #0e1a2e;
    --sf-ink-line: rgba(150, 182, 255, 0.14);
    --sf-ink-line-strong: rgba(150, 182, 255, 0.24);
    --sf-paper: #f7f4ed;
    --sf-paper-line: #e3dccb;
    --sf-white: #fff;
    --sf-tx-1: #15233b;
    --sf-tx-2: #48566e;
    --sf-tx-3: #6b7890;
    --sf-dark-1: #eaf0fc;
    --sf-dark-2: #a6b5d1;
    --sf-dark-3: #7385a5;
    --sf-blue: #2f6bff;
    --sf-blue-deep: #1f52d8;
    --sf-blue-soft: rgba(47, 107, 255, 0.12);
    --sf-mint: #35e0a6;
    --sf-mint-deep: #0f9e74;
    --sf-mint-soft: rgba(53, 224, 166, 0.12);
    --sf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sf-serif: "Fraunces", Georgia, serif;
    --sf-r-md: 14px;
    --sf-r-lg: 22px;
    --sf-shadow-1: 0 1px 2px rgba(10, 19, 34, 0.06), 0 4px 14px rgba(10, 19, 34, 0.07);
}

/* ---------- Base ---------- */
body {
    background: var(--sf-paper) !important;
    font-family: var(--sf-font) !important;
    color: var(--sf-tx-2);
    -webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4, body h5 {
    font-family: var(--sf-font) !important;
    color: var(--sf-tx-1);
    letter-spacing: -0.02em;
}
a { color: var(--sf-blue-deep); }
a:hover { color: var(--sf-blue); }

/* ---------- Header ---------- */
#site-header.site-header {
    background: var(--sf-ink-950);
    border-bottom: 1px solid var(--sf-ink-line);
    padding: 0;
}
#site-header .header-inner {
    max-width: 1160px;
    margin-inline: auto;
    padding: 12px clamp(20px, 4vw, 32px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    min-height: 64px;
}
/* Brand: icon + title + Live Demo pill on ONE aligned row */
#site-header .site-branding {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#site-header .site-title { margin: 0; line-height: 1; }
#site-header .site-title a {
    display: inline-flex;
    align-items: center;
    font-family: var(--sf-font) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--sf-dark-1) !important;
    text-decoration: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
#site-header .site-title a::before {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 8px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3C/svg%3E") center / 15px no-repeat,
        linear-gradient(135deg, var(--sf-blue) 0%, #1d3fae 100%);
}
/* Tagline becomes a compact pill badge next to the title */
#site-header .site-description {
    margin: 0 !important;
    font-size: 0.6rem !important;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sf-mint) !important;
    background: rgba(53, 224, 166, 0.1);
    border: 1px solid rgba(53, 224, 166, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 1.2;
    white-space: nowrap;
}
#site-header .site-navigation { margin-left: auto; display: flex; align-items: center; }
#site-header .site-navigation ul.menu { display: flex; flex-wrap: wrap; gap: 2px; }
#site-header .site-navigation ul.menu li a {
    font-family: var(--sf-font) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--sf-dark-2) !important;
    padding: 7px 11px !important;
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.18s, background 0.18s;
}
#site-header .site-navigation ul.menu li a:hover {
    color: var(--sf-dark-1) !important;
    background: rgba(150, 182, 255, 0.08);
}
#site-header .site-navigation ul.menu li.current-menu-item > a {
    color: var(--sf-dark-1) !important;
    background: rgba(150, 182, 255, 0.12);
}
/* BUY PRO — the last item is the conversion link */
#site-header .site-navigation ul.menu li:last-child > a {
    color: #fff !important;
    background: var(--sf-blue);
    font-weight: 600 !important;
}
#site-header .site-navigation ul.menu li:last-child > a:hover { background: var(--sf-blue-deep); }
#site-header .site-navigation-toggle {
    background: transparent;
    color: var(--sf-dark-1);
    border: 1px solid var(--sf-ink-line-strong);
    border-radius: 8px;
}
#site-header + .site-navigation-dropdown,
.menu-dropdown-tablet .site-navigation-dropdown {
    background: var(--sf-ink-900);
}
.site-navigation-dropdown ul.menu li a { color: var(--sf-dark-1) !important; }

/* ---------- Content shell ---------- */
main#content.site-main {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 32px) clamp(48px, 7vw, 80px);
}
main#content .entry-title,
main#content h1.entry-title {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.12;
    color: var(--sf-tx-1) !important;
    margin: 0 0 10px;
}
main#content .page-content,
main#content .entry-content {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--sf-tx-2);
}
main#content .page-content > p { max-width: 64ch; }
main#content .entry-content a, main#content .page-content a {
    color: var(--sf-blue-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Demo helper blocks (used in the demo post content) */
.sf-demo-note {
    background: var(--sf-white);
    border: 1px solid var(--sf-paper-line);
    border-left: 4px solid var(--sf-mint);
    border-radius: var(--sf-r-md);
    box-shadow: var(--sf-shadow-1);
    padding: 18px 22px;
    margin: 0 0 28px;
    font-size: 0.95rem;
}
.sf-demo-note p { margin: 0 0 8px; }
.sf-demo-note p:last-child { margin-bottom: 0; }
.sf-demo-note code {
    background: var(--sf-blue-soft);
    color: var(--sf-blue-deep);
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 700;
    font-family: var(--sf-font);
    letter-spacing: 0.04em;
}
.sf-demo-links {
    background: var(--sf-ink-900);
    border-radius: var(--sf-r-lg);
    padding: clamp(22px, 3.5vw, 34px);
    margin-top: 36px;
    color: var(--sf-dark-2);
}
.sf-demo-links h2 {
    color: var(--sf-dark-1) !important;
    font-size: 1.25rem !important;
    margin: 0 0 14px;
}
.sf-demo-links ul { margin: 0; padding: 0; list-style: none; }
.sf-demo-links li {
    padding: 9px 0 9px 26px;
    position: relative;
    border-bottom: 1px solid var(--sf-ink-line);
    font-size: 0.95rem;
}
.sf-demo-links li:last-child { border-bottom: 0; }
.sf-demo-links li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335e0a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sf-demo-links a { color: var(--sf-mint) !important; font-weight: 600; }
.sf-demo-links a:hover { color: #6ff0c4 !important; }

/* ---------- Ebook Store plugin card — sympathetic framing ---------- */
.ebook-store-template-2026 { margin: 8px 0 8px; }
.ebook-store-template-2026 .ebook-2026-card {
    border-radius: var(--sf-r-lg) !important;
    border: 1px solid var(--sf-paper-line);
    box-shadow: 0 2px 6px rgba(10, 19, 34, 0.08), 0 18px 44px rgba(10, 19, 34, 0.14) !important;
    overflow: hidden;
}
.ebook-store-template-2026 .ebook-2026-card__title { font-family: var(--sf-font) !important; letter-spacing: -0.015em; }
.ebook-store-template-2026 .ebook-2026-card__eyebrow {
    color: var(--sf-blue-deep) !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------- Comments & clutter off for demo pages ---------- */
.comments-area, #comments, .post-navigation, .nav-links.post-navigation { display: none !important; }

/* ---------- Footer ---------- */
#site-footer.site-footer {
    background: var(--sf-ink-950);
    border-top: 1px solid var(--sf-ink-line);
    color: var(--sf-dark-3);
    padding: 28px 20px;
}
#site-footer .footer-inner { max-width: 1160px; margin-inline: auto; }
#site-footer, #site-footer p, #site-footer .copyright, #site-footer a {
    font-family: var(--sf-font) !important;
    font-size: 0.85rem !important;
    color: var(--sf-dark-3) !important;
}
#site-footer a:hover { color: var(--sf-dark-1) !important; }
#site-footer .site-title a { color: var(--sf-dark-1) !important; font-weight: 700 !important; }

/* ---------- Buttons (Woo + generic) ---------- */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #place_order,
main#content .button, main#content input[type="submit"] {
    background: var(--sf-blue) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: var(--sf-font) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border: 0 !important;
    transition: background 0.18s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, main#content .button:hover {
    background: var(--sf-blue-deep) !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
    #site-header .header-inner { padding: 12px 18px; }
    main#content.site-main { padding-top: 22px; }
}