/* ============================================================
   SARAH HIGHFIELD AUTHOR WEBSITE — Custom Stylesheet
   Child Theme: hello-elementor-child
   Version: 1.0.0
   ============================================================ */


/* ── 1. CSS VARIABLES (Design Tokens) ───────────────────────
   These variables power every colour across the site.
   To change a colour site-wide, change it once here.
   ─────────────────────────────────────────────────────────── */
:root {
    --color-midnight:      #0D1B2A;   /* Deep night sky from book cover */
    --color-deep-teal:     #1A3A4A;   /* Mid-sky teal — hero sections */
    --color-deep-purple:   #2C1F5E;   /* Deep purple — accents */
    --color-gold:          #E8A030;   /* Warm amber/gold from the box on cover */
    --color-parchment:     #F2E4BC;   /* Warm cream — star colour from cover */
    --color-mist:          #8FB8C8;   /* Sky blue — secondary text on dark */
    --color-grass:         #2D7A3A;   /* Vivid grass green from cover */
    --color-forest:        #1C5C2E;   /* Barnes & Noble button */
    --color-dragon-red:    #C0392B;   /* Rich dragon red from the spiral */
    --color-bookshop-blue: #004996;   /* Waterstones button */
    --color-amazon-orange: #FF9900;   /* Amazon button */
    --color-crimson:       #8B0000;   /* Blackwell's button */
    --color-ghost-white:   #F5F8FA;   /* Light section backgrounds */
    --color-ink:           #1A2A35;   /* Deep ink body text on white */
    --color-mid-gray:      #5A6A75;   /* Secondary text on white */
    --color-border:        #C8DDE8;   /* Soft teal-tinted borders */

    --font-heading:  'Cinzel', Georgia, serif;
    --font-body:     'Lato', Arial, sans-serif;

    --radius-btn:    30px;
    --radius-card:   12px;
    --transition:    0.18s ease;
}


/* ── 2. BASE TYPOGRAPHY ──────────────────────────────────────*/
body {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--color-ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--font-heading);
    line-height: 1.2;
}

h1, .elementor-heading-title.elementor-size-xl { font-size: clamp(32px, 5vw, 52px); }
h2, .elementor-heading-title.elementor-size-large { font-size: clamp(24px, 3.5vw, 36px); }
h3, .elementor-heading-title.elementor-size-medium { font-size: clamp(18px, 2.5vw, 24px); }

p { margin-bottom: 1.1em; }

a {
    color: var(--color-deep-purple);
    transition: color var(--transition);
}
a:hover { color: var(--color-gold); }


/* ── 3. BUY BUTTONS ─────────────────────────────────────────
   Apply these CSS classes in Elementor's Advanced tab
   under "CSS Classes" for each Button widget.
   ─────────────────────────────────────────────────────────── */
.buy-btn .elementor-button,
a.buy-btn {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 10px 24px !important;
    border-radius: var(--radius-btn) !important;
    border: none !important;
    transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition) !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.buy-btn .elementor-button:hover,
a.buy-btn:hover {
    transform: translateY(-2px) !important;
    opacity: 0.88 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
}

/* Amazon — orange */
.buy-btn.amazon .elementor-button,
a.buy-btn.amazon {
    background: var(--color-amazon-orange) !important;
    color: #111111 !important;
}

/* Barnes & Noble — dark green */
.buy-btn.bn .elementor-button,
a.buy-btn.bn {
    background: var(--color-forest) !important;
    color: #ffffff !important;
}

/* Waterstones — navy blue */
.buy-btn.waterstones .elementor-button,
a.buy-btn.waterstones {
    background: var(--color-bookshop-blue) !important;
    color: #ffffff !important;
}

/* Blackwell's — dark crimson */
.buy-btn.blackwells .elementor-button,
a.buy-btn.blackwells {
    background: var(--color-crimson) !important;
    color: #ffffff !important;
}

/* General CTA button (purple) — for non-buy actions like "Enquire" */
.btn-cta .elementor-button,
a.btn-cta {
    background: var(--color-deep-purple) !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: var(--radius-btn) !important;
    border: none !important;
    transition: transform var(--transition), background var(--transition) !important;
}
.btn-cta .elementor-button:hover,
a.btn-cta:hover {
    background: var(--color-gold) !important;
    color: #111111 !important;
    transform: translateY(-2px) !important;
}


/* ── 4. AVAILABILITY NOTE ───────────────────────────────────
   Add class "available-note" to the Text widget beneath buttons
   ─────────────────────────────────────────────────────────── */
.available-note,
.available-note p {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: var(--color-mist) !important;
    margin-top: 10px !important;
}


/* ── 5. STAR DIVIDER ─────────────────────────────────────────
   Add class "star-divider" to a Text widget with content ✦ ✧ ✦
   ─────────────────────────────────────────────────────────── */
.star-divider,
.star-divider p {
    text-align: center !important;
    color: var(--color-gold) !important;
    letter-spacing: 16px !important;
    font-size: 13px !important;
    opacity: 0.45 !important;
    margin: 8px 0 !important;
}


/* ── 6. SECTION BACKGROUNDS ─────────────────────────────────
   Utility classes for section backgrounds.
   Add to Section's Advanced → CSS Classes.
   ─────────────────────────────────────────────────────────── */
.bg-midnight    { background-color: var(--color-midnight) !important; }
.bg-deep-purple { background-color: var(--color-deep-purple) !important; }
.bg-ghost-white { background-color: var(--color-ghost-white) !important; }
.bg-forest      { background-color: #1C3A1C !important; }


/* ── 7. CARDS ───────────────────────────────────────────────
   Add class "sarah-card" to any container/column
   for the standard card styling.
   ─────────────────────────────────────────────────────────── */
.sarah-card {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card) !important;
    padding: 28px !important;
    transition: box-shadow var(--transition), transform var(--transition) !important;
}
.sarah-card:hover {
    box-shadow: 0 8px 32px rgba(59, 31, 107, 0.1) !important;
    transform: translateY(-2px) !important;
}


/* ── 8. BOOK COVER IMAGE ────────────────────────────────────
   Add class "book-cover" to the Image widget
   ─────────────────────────────────────────────────────────── */
.book-cover img {
    border-radius: 4px 10px 10px 4px !important;
    box-shadow: 8px 12px 40px rgba(0,0,0,0.45), -3px 0 0 rgba(0,0,0,0.2) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
}
.book-cover img:hover {
    transform: translateY(-4px) rotate(1deg) !important;
    box-shadow: 12px 20px 50px rgba(0,0,0,0.5) !important;
}


/* ── 9. AUTHOR PHOTO ────────────────────────────────────────
   Add class "author-photo" to the Image widget on About page
   ─────────────────────────────────────────────────────────── */
.author-photo img {
    border-radius: 50% !important;
    border: 4px solid var(--color-border) !important;
    box-shadow: 0 8px 32px rgba(59, 31, 107, 0.15) !important;
}


/* ── 10. NAVIGATION ─────────────────────────────────────────*/
.elementor-nav-menu a {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: color var(--transition) !important;
}

/* Active nav item gold underline */
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .current-menu-ancestor > a {
    color: var(--color-parchment) !important;
    border-bottom: 2px solid var(--color-gold) !important;
    padding-bottom: 2px !important;
}


/* ── 11. INSTAGRAM ICON BUTTON ──────────────────────────────
   Add class "insta-btn" to the Icon widget wrapper
   ─────────────────────────────────────────────────────────── */
.insta-btn .elementor-icon {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
    border-radius: 8px !important;
    padding: 5px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity var(--transition), transform var(--transition) !important;
    margin-left: 16px !important;
}
.insta-btn .elementor-icon:hover {
    opacity: 0.85 !important;
    transform: scale(1.08) !important;
}
.insta-btn .elementor-icon i,
.insta-btn .elementor-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}


/* ── 12. BLOG POST CARDS ────────────────────────────────────*/
.elementor-posts .elementor-post {
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--color-border) !important;
    overflow: hidden !important;
    transition: box-shadow var(--transition), transform var(--transition) !important;
}
.elementor-posts .elementor-post:hover {
    box-shadow: 0 8px 32px rgba(59, 31, 107, 0.12) !important;
    transform: translateY(-3px) !important;
}
.elementor-posts .elementor-post__title a {
    font-family: var(--font-heading) !important;
    color: var(--color-deep-purple) !important;
}
.elementor-posts .elementor-post__title a:hover {
    color: var(--color-gold) !important;
}
.elementor-posts .elementor-post-date {
    color: var(--color-mist) !important;
    font-size: 12px !important;
}
.elementor-posts .elementor-post__read-more {
    color: var(--color-deep-purple) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.elementor-posts .elementor-post__read-more:hover {
    color: var(--color-gold) !important;
}


/* ── 13. CONTACT FORM ───────────────────────────────────────*/
.elementor-form .elementor-field-group label {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-deep-purple) !important;
    letter-spacing: 0.04em !important;
}
.elementor-form .elementor-field {
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.elementor-form .elementor-field:focus {
    border-color: var(--color-deep-purple) !important;
    box-shadow: 0 0 0 3px rgba(59,31,107,0.1) !important;
    outline: none !important;
}
.elementor-form .elementor-button {
    background: var(--color-deep-purple) !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-btn) !important;
    padding: 12px 32px !important;
    border: none !important;
    width: 100% !important;
    font-size: 15px !important;
    transition: background var(--transition), transform var(--transition) !important;
}
.elementor-form .elementor-button:hover {
    background: var(--color-gold) !important;
    color: #111111 !important;
    transform: translateY(-1px) !important;
}


/* ── 14. FOOTER ─────────────────────────────────────────────*/
.site-footer,
footer.elementor-location-footer {
    background: #0A1520 !important;
}


/* ── 15. RESPONSIVE ADJUSTMENTS ─────────────────────────────*/
@media (max-width: 768px) {
    h1, .elementor-heading-title.elementor-size-xl { font-size: 28px; }
    h2, .elementor-heading-title.elementor-size-large { font-size: 22px; }

    .buy-btn .elementor-button,
    a.buy-btn {
        font-size: 13px !important;
        padding: 9px 18px !important;
    }

    .book-cover img {
        max-width: 160px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .buy-btn .elementor-button,
    a.buy-btn {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin-bottom: 8px !important;
    }
}


/* ── 16. SMOOTH SCROLLING & MISC ────────────────────────────*/
html { scroll-behavior: smooth; }

/* Remove Hello Elementor's default page padding */
.elementor-page .elementor { padding-top: 0 !important; }

/* Ensure sections go full width */
.elementor-section.elementor-section-stretched {
    max-width: 100% !important;
}