/*
Theme Name: Lightning Child
Template: lightning
Description: Child theme for Lightning with LP color palette integration.
Version: 1.2.0
Author: Ogawa Ryuya
*/

/* =============================================================================
   1. Theme Variables & Base Styles
   ============================================================================= */

:root {
    /* Colors */
    --primary-dark: #1d1d1d;
    --primary-main: #2a2a2a;
    --primary-light: #3c3c3c;
    --accent-gold: #c9b068;
    --accent-gold-light: #e0ca86;
    --accent-gold-dark: #ad954d;
    --bg-primary: #141414;
    --bg-secondary: #1f1f1f;
    --bg-tertiary: #2d2d2d;
    --text-primary: #f5f5f5;
    --text-secondary: #c4c4c4;
    --text-muted: #8a8a8a;
    --text-inverse: #1a1a1a;

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, var(--accent-gold-dark) 0%, var(--accent-gold) 50%, var(--accent-gold-light) 100%);

    /* Fonts */
    --font-primary: 'Noto Sans JP', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Effects */
    --radius-lg: 0.75rem;
    --transition-base: 0.3s ease-in-out;
    --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.3);
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    word-break: auto;
    overflow-wrap: break-word;
    /* Fixed Header Spacer */
    padding-top: 100px; /* Header Height */
}

body.admin-bar {
    padding-top: 132px; /* Header Height + Admin Bar Height */
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-top: 146px; /* Header Height + Mobile Admin Bar Height */
    }
}

/* =============================================================================
   2. Custom Header Layout & Admin Bar Integration
   ============================================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(31, 31, 31, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--accent-gold);
    transition: all 0.3s ease-in-out;
}

/* Adjust for WP Admin Bar */
body.admin-bar .header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .header {
        top: 46px;
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 130px; /* Initial height */
    padding: 0 var(--space-md);
    transition: height 0.3s ease-in-out;
}

.header.scrolled .header-content {
    height: 90px; /* Scrolled height - adjusted for tagline */
}

.logo a {
    text-decoration: none;
}

.header .logo h1 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent-gold);
    margin: 0;
    transition: font-size 0.3s ease-in-out;
}

.header.scrolled .logo h1 {
    font-size: 1.25rem;
}

.header .logo span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 300;
    transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.header.scrolled .logo span {
    font-size: 0.7rem; /* Slightly smaller on scroll */
}

.nav-list {
    display: flex;
    list-style: none;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
}

.header .nav-list a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-base);
}

.header .nav-list a:hover {
    color: var(--accent-gold);
}

.line-btn-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: #00C300 !important;
    color: #212529;
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: var(--transition-base);
    box-shadow: var(--shadow-glow);
}

.line-btn-header:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(201, 176, 104, 0.5);
    background: #00C300 !important;
    color: #212529;
}

.line-btn-header .fab {
    font-size: 1.25rem; /* Larger icon */
    line-height: 1;
}

/* Specific hover style to ensure color change */
.line-btn-header:hover,
.line-btn-header:focus,
.line-btn-header:active {
    color: #212529; /* Ensure text color stays black */
}

/*
.vk_icon-for-mobile-nav .line-link-btn {
    color: #fff;
    background: var(--accent-gold);
    border-radius: var(--radius-lg);
}
*/

/* =============================================================================
   3. CTA Button Hover Effect Customization
   ============================================================================= */

.page-template-page-lp .line-btn-primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-2xl);
    background: #00C300 !important;
    color: #212529;
    text-decoration: none;
    border-radius: var(--radius-xl);
    font-weight: 600;
    transition: var(--transition-base);
    box-shadow: var(--shadow-xl);
}
.page-template-page-lp .line-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    color: #212529;
}

.page-template-page-lp .line-btn-fixed {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: #00C300 !important;
    color: #212529;
    text-decoration: none;
    border-radius: var(--radius-xl);
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    transition: var(--transition-base);
}
.page-template-page-lp .line-btn-fixed:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    color: #212529;
}

/*
.line-btn-header:hover,
.line-btn-header:hover i,
.page-template-page-lp .line-btn-primary:hover,
.page-template-page-lp .line-btn-primary:hover i,
.page-template-page-lp .line-btn-fixed:hover,
.page-template-page-lp .line-btn-fixed:hover i {
    color: #06C755 !important;
}
*/

/* =============================================================================
   4. Footer Customization
   ============================================================================= */

.site-footer {
    border-top: 3px solid var(--accent-gold);
}

.site-footer a:hover {
    color: var(--accent-gold-dark);
    text-decoration: underline;
}

/* =============================================================================
   2. Single Post & Page Styles
   ============================================================================= */

/* Apply white background to content sections, leaving body background dark */
body.single-post #breadcrumb,
body.page #breadcrumb,
body.single-post .site-body,
body.page .site-body,
body.single-post .site-body-bottom,
body.page .site-body-bottom {
    background-color: #ffffff;
}

/* Contain margins within the .site-body-bottom element */
body.single-post .site-body-bottom,
body.page .site-body-bottom {
    overflow: hidden;
}

/* Set text colors for readability on white background */
body.single-post #main,
body.page #main,
body.single-post #side,
body.page #side,
body.single-post #breadcrumb,
body.page #breadcrumb {
    color: var(--text-inverse);
}

/* Specific color for headings and widgets */
body.single-post .entry-title,
body.page .entry-title,
body.single-post .entry-content h1,
body.page .entry-content h1,
body.single-post .entry-content h2,
body.page .entry-content h2,
body.single-post .entry-content h3,
body.page .entry-content h3,
body.single-post .entry-content h4,
body.page .entry-content h4,
body.single-post .entry-content h5,
body.page .entry-content h5,
body.single-post .entry-content h6,
body.page .entry-content h6,
body.single-post #side .widget-title,
body.page #side .widget-title {
    color: var(--text-inverse);
}

/* Specific color for links */
body.single-post #main a,
body.page #main a,
body.single-post #side a,
body.page #side a,
body.single-post #breadcrumb a,
body.page #breadcrumb a {
    color: #0073aa;
}

body.single-post #main a:hover,
body.page #main a:hover,
body.single-post #side a:hover,
body.page #side a:hover,
body.single-post #breadcrumb a:hover,
body.page #breadcrumb a:hover {
    color: #0099d7;
}

/* Hide page header on single posts */
body.single-post .page-header {
    display: none;
}

body.single-post .page-header {
    margin-bottom: 2rem;
}

.sub-section-title {
    color: #333; /* Set a darker color for better visibility on white backgrounds */
}

/* SNS Share Button Adjustments */
.veu_socialSet a {
    color: #fff !important; /* Ensure text/icon color is white for better contrast */
    text-decoration: none;
}

.veu_socialSet .sb_facebook_sb_icon a {
    background-color: #1877f2; /* Facebook Blue */
}

.veu_socialSet .sb_twitter_sb_icon a {
    background-color: #000; /* X Black */
}

.veu_socialSet .sb_copy_sb_icon a {
    background-color: #777; /* Neutral Gray for Copy */
}

.veu_socialSet a:hover {
    opacity: 0.8;
}