/* ============================================
   Hebrew RTL Author Website - Minimal Design
   ============================================ */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root Variables - Color Palette */
:root {
    --bg-color: #ffffff;        /* White */
    --primary-color: #2c3e50;   /* Deep muted blue */
    --accent-color: #d4c5b0;    /* Soft sand/beige */
    --text-color: #333333;
    --text-light: #666666;
    --border-color: #e0e0e0;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --bg-color: #1a1a1a;        /* Very dark gray */
    --primary-color: #4a90a4;   /* Lighter muted blue */
    --accent-color: #8b7a6b;     /* Darker sand/beige */
    --text-color: #e0e0e0;       /* Light gray */
    --text-light: #b0b0b0;       /* Medium gray */
    --border-color: #404040;     /* Dark gray */
}

/* Typography - Mobile First */
body {
    font-family: 'Assistant', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px; /* Base mobile size */
    line-height: 1.9; /* Increased for better Hebrew readability */
    color: var(--text-color);
    background-color: var(--bg-color);
    direction: rtl;
    text-align: right;
}

/* Desktop typography */
@media (min-width: 769px) {
    body {
        font-size: 20px;
        line-height: 1.8;
    }
}

/* Modern Hebrew font fallback - using system fonts that support Hebrew well */
@supports (font-variation-settings: normal) {
    body {
        font-family: 'Segoe UI Variable', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}

h1 {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--primary-color);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

p {
    margin-bottom: 1.5rem;
    color: var(--text-color);
    max-width: 100%; /* Mobile: full width with padding */
    line-height: 1.9; /* Better for Hebrew text */
}

/* Desktop paragraph width */
@media (min-width: 769px) {
    p {
        max-width: 65ch; /* Optimal reading width */
    }
}

.intro {
    font-size: 1.15rem;
    color: var(--text-light);
    line-height: 1.9;
    max-width: 700px;
    margin: 0 auto 3rem;
    text-align: right;
}

/* Layout - Mobile First */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards; /* Faster on mobile */
}

/* Desktop animations */
@media (min-width: 769px) {
    body {
        animation: fadeIn 0.5s ease-in forwards;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image optimization for mobile */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    body,
    main {
        animation: none !important;
        opacity: 1;
    }
}

/* Header & Navigation */
header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.125rem 0; /* Reduced by 25% from 1.5rem */
    position: sticky;
    top: 0;
    z-index: 100;
    /* backdrop-filter: blur(10px); - Removed for better performance, using solid background instead */
}

[data-theme="dark"] header {
    background-color: rgba(26, 26, 26, 0.95);
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem; /* Further reduced spacing between elements */
    position: relative;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    margin-left: 1rem;
}

.theme-toggle:hover {
    background-color: var(--border-color);
    opacity: 0.8;
}

.author-name {
    height: auto;
    max-height: 3.5rem; /* 70% of header height (header ~5rem: 2.25rem padding + ~2.75rem content) */
    width: auto;
    margin: 0;
    margin-left: 0.5rem; /* Further reduced spacing from nav */
    display: block;
}

/* Mobile Menu Button (Hamburger) */
.mobile-menu-toggle {
    display: none;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.mobile-menu-toggle:hover {
    background-color: var(--border-color);
}

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2.5px;
    background-color: var(--primary-color);
    margin: 3.5px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
    flex-shrink: 0;
}

[data-theme="dark"] .mobile-menu-toggle span {
    background-color: var(--text-color);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 0; /* Remove gap to allow separators to work */
    flex-wrap: nowrap; /* Prevent wrapping, reduce spacing instead */
    align-items: center;
    flex-shrink: 1; /* Allow list to shrink */
}

.nav-list li {
    display: flex;
    align-items: center;
}

.nav-list li:not(:last-child)::after {
    content: '|';
    color: var(--text-light);
    margin: 0 clamp(0.5rem, 1.5vw, 1.5rem); /* Flexible margin that shrinks with window */
    font-weight: normal;
}

.nav-list a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 0.75rem clamp(0.5rem, 1vw, 1rem); /* Flexible padding that shrinks with window */
    position: relative;
    white-space: nowrap; /* Prevent text wrapping within links */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    display: block;
    min-height: 44px; /* Touch target minimum */
    display: flex;
    align-items: center;
}

.nav-list a:hover {
    color: var(--primary-color);
    transform: translateY(-2px); /* Slight lift effect */
    opacity: 0.9; /* Slight opacity change for subtle effect */
}

.nav-list a.active {
    color: var(--primary-color);
    font-weight: 500;
}

.nav-list a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2px;
    background-color: var(--primary-color);
}

/* Main Content */
main {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 2rem;
    width: 100%;
    animation: fadeInUp 0.6s ease-out;
}

.hero {
    text-align: center;
    margin-bottom: 0.5rem; /* Reduced gap between title and content */
    padding-bottom: 0.5rem; /* Reduced padding */
    border-bottom: 1px solid var(--border-color);
}

.hero .space-title {
    text-align: right !important; /* Right-aligned for space-title (visual right in RTL) */
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important; /* Match nav width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 2rem !important; /* Match nav padding */
    box-sizing: border-box !important;
}

.content {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Index page specific content alignment */
.index-page .content {
    max-width: 900px;
}

/* Top Section - Outside frame */
.top-section {
    max-width: 1200px;
    margin: 2rem auto 2rem;
    padding: 0 2rem;
    text-align: center;
}

/* Index Page Frame */
.index-frame {
    max-width: 1200px;
    margin: 0 auto 2rem; /* Removed top margin since top-section is separate */
    padding: 1.5rem; /* Reduced from 2.5rem */
    border: 1px solid var(--border-color);
    background-color: #DBE7E3; /* RGB(219, 231, 227) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px; /* Slightly rounded corners */
}

[data-theme="dark"] .index-frame {
    background-color: #1a2a2b; /* Match dark mode index page background */
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .top-section {
        margin: 1.5rem auto 1.5rem;
        padding: 0 1rem;
    }
    
    .index-frame {
        margin: 0 auto 1.5rem; /* Removed top margin */
        padding: 1rem; /* Reduced padding */
    }
    
    /* Ensure dark mode buttons are readable on mobile */
    [data-theme="dark"] .extras-page .content-button {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
        min-height: 50px; /* Ensure touch-friendly size */
    }
    
    /* Ensure dark mode form inputs are readable on mobile */
    [data-theme="dark"] .contact-page .form-group input,
    [data-theme="dark"] .contact-page .form-group textarea {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

@media (max-width: 480px) {
    .top-section {
        margin: 1rem auto 1rem;
        padding: 0 1rem;
    }
    
    .index-frame {
        margin: 0 auto 1rem; /* Removed top margin */
        padding: 0.75rem; /* Reduced padding */
    }
    
    /* Ensure dark mode buttons are readable on mobile */
    [data-theme="dark"] .extras-page .content-button {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
        min-height: 48px; /* Touch-friendly size */
        font-size: 0.9rem;
    }
    
    /* Ensure dark mode form inputs are readable on mobile */
    [data-theme="dark"] .contact-page .form-group input,
    [data-theme="dark"] .contact-page .form-group textarea {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 0.7rem 0.9rem;
    }
}

/* About Page Layout */
.about-layout {
    display: flex;
    gap: 1.5rem; /* Reduced gap to match other pages */
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 0; /* Remove top margin to reduce gap from hero */
}

.about-image {
    flex: 0 0 auto;
    overflow: hidden;
    max-height: 85%;
}

/* About Page Background */
.about-page {
    background-color: #d6eae5; /* RGB(214, 234, 229) */
}

[data-theme="dark"] .about-page {
    background-color: #1a2a2b; /* Dark version */
}

[data-theme="dark"] .space-page {
    background-color: #1a2a2b; /* Match about-page dark mode background */
}

.about-photo {
    max-width: 250px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
    clip-path: inset(0 0 15% 0);
}

.about-text {
    flex: 1;
    min-width: 300px;
    margin-top: 0; /* Remove top margin for compact spacing */
}

/* Space Page Layout */
.space-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: nowrap; /* Keep side-by-side layout, only wrap on mobile */
}

.space-text {
    flex: 1 1 auto; /* Allow text to grow and shrink */
    min-width: 0; /* Allow text to shrink below content size */
    max-width: none; /* Remove any max-width constraints */
}

.book-cover-side {
    flex: 0 0 auto; /* Keep image at fixed size */
    text-align: center;
    width: 300px; /* Fixed width for image container */
}

/* Book Cover */
.book-cover-container {
    margin: 1.5rem 0;
    text-align: center;
}

.book-cover {
    max-width: 300px; /* Increased by 20% from 250px for wide screens */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Smooth image rendering for photographs */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

.cover-credit {
    font-size: 0.7rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.75rem;
    line-height: 1.5;
}

/* Space Page Content */
.space-content {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-top: 0; /* Remove top margin to reduce gap from title */
    max-width: 1200px; /* Match nav width for alignment */
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem; /* Match nav padding */
    width: 100%;
}

.space-content .space-subtitle {
    margin-top: 1rem; /* Space after the border line */
    margin-bottom: 1.5rem; /* Space before the paragraphs */
    padding: 0; /* Remove any padding to align with title */
}

.space-content p {
    margin-bottom: 1rem;
    max-width: none; /* Allow paragraphs to expand fully */
}

.chapter-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem auto;
    max-width: 700px;
    width: 100%;
}

.chapter-footer-text {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.8;
}

.form-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.form-link:hover {
    color: #286884;
    text-decoration: underline;
}

/* Mobile: underline form-link to indicate it's clickable */
@media (max-width: 768px) {
    .form-link {
        text-decoration: underline;
    }
}

/* Space Page Title */
.space-title {
    font-size: 1.8rem;
    line-height: 1.3;
    text-align: right; /* Right-aligned (visual right in RTL) */
    margin-bottom: 0.5rem; /* Reduced gap below title */
    max-width: 1200px; /* Match nav width for alignment */
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem; /* Match nav padding */
    width: 100%;
}

.space-subtitle {
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: right; /* Right-aligned (visual right in RTL) */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    max-width: 700px; /* Match content width for center alignment */
    margin-left: auto;
    margin-right: 0;
    color: var(--text-color);
    font-weight: 400;
}

/* Extras Sections */
.extras-section {
    margin-bottom: 2rem;
}

.extras-section h2 {
    margin-bottom: 1rem;
    text-align: right;
    font-size: 1.1rem; /* Further decreased from 1.3rem */
}

/* Extras Page Title */
.extras-title {
    font-size: 1.6rem; /* Decreased from 1.8rem */
    line-height: 1.3;
    text-align: center;
    margin-bottom: 0.5rem;
}

.extras-intro {
    margin-bottom: 1rem;
    font-size: 1rem; /* Decreased from default 1.15rem */
}

/* Extras Page Content */
.extras-content {
    font-size: 0.85rem; /* Decreased from 0.95rem */
    line-height: 1.7;
}

/* Content Buttons */
.buttons-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1rem 0;
}

.content-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem; /* Mobile-first: smaller padding */
    border: 1px solid #1a7a7a; /* Dark turquoise */
    background-color: #ffffff; /* White */
    color: #1a7a7a; /* Dark turquoise */
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease; /* Smooth transition for hover effects */
    border-radius: 10px;
    width: 100%; /* Mobile: full width */
    max-width: 400px; /* Desktop max width */
    min-height: 44px; /* Touch-friendly minimum */
    height: auto; /* Allow content to determine height */
    align-self: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Desktop button sizing */
@media (min-width: 769px) {
    .content-button {
        padding: 1.25rem 2rem;
        width: 400px;
        height: 60px;
    }
}

[data-theme="dark"] .content-button {
    background-color: #2a3a3b;
    border-color: #4a90a4;
    color: #e0e0e0;
}

[data-theme="dark"] .content-button:hover {
    background-color: #3a4a4b; /* Slightly lighter on hover */
    border-color: #5aa0b4; /* Lighter border on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 12px rgba(74, 144, 164, 0.2); /* Subtle shadow on hover */
}

[data-theme="dark"] .extras-page .content-button {
    background-color: #000000; /* Black background for extras page */
    border-color: #000000;
    color: #ffffff; /* White text */
}

[data-theme="dark"] .extras-page .content-button:hover {
    background-color: #1a1a1a; /* Slightly lighter black on hover */
    border-color: #333333; /* Subtle border change */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Subtle shadow on hover */
}

.content-button:hover {
    border-color: #2a9a9a; /* Slightly lighter turquoise on hover */
    background-color: #f5fafa; /* Very light turquoise tint */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 12px rgba(26, 122, 122, 0.15); /* Subtle shadow on hover */
}

.button-image {
    height: 30px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

/* Ensure both logo images are loaded for theme switching */
.logo-light,
.logo-dark {
    /* Both images should load regardless of display state for smooth theme switching */
    content-visibility: auto;
}

.button-text {
    font-weight: 500;
}

/* Images Section */
/* Gentle animation for book release line */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.book-release-line {
    text-align: center;
    font-weight: bold;
    margin: 0 auto 1rem; /* Reduced bottom margin */
    font-size: 1.1rem;
    color: #224D60;
    width: 100%;
    max-width: 100%;
    display: block;
    animation: fadeInUp 1.2s ease-out;
    animation-fill-mode: both;
    animation-delay: 0.3s; /* Delay to appear after page and images start loading */
}

[data-theme="dark"] .book-release-line {
    color: #6ab8c4; /* Lighter turquoise/cyan for better contrast in dark mode */
}

.chapter-button-flash {
    display: block;
    width: 100%;
    max-width: 280px; /* Same width as chapter button */
    margin: 0 auto 0; /* No margin - spacing handled by top-section */
    padding: 0.6rem 1.2rem; /* Reduced padding */
    background-color: #6EB1B5; /* New color */
    color: #000000; /* Black text */
    text-decoration: none;
    text-align: center;
    font-size: calc(1rem + 2px); /* Increased by 2 points */
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    animation: fadeInUp 1.2s ease-out, gentleFlash 2s ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 0.3s;
    transition: background-color 0.2s ease;
    min-height: auto; /* Remove fixed min-height to allow smaller button */
}

.chapter-button-flash:hover {
    background-color: #7fc1c5; /* Lighter shade for hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(110, 177, 181, 0.3);
}

@keyframes gentleFlash {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 rgba(110, 177, 181, 0);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 0 15px rgba(110, 177, 181, 0.4);
    }
}

[data-theme="dark"] .chapter-button-flash {
    background-color: #6EB1B5;
}

[data-theme="dark"] .chapter-button-flash:hover {
    background-color: #7fc1c5;
    box-shadow: 0 2px 8px rgba(110, 177, 181, 0.3);
}

.book-title-link {
    color: #224D60 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    position: relative !important;
    cursor: pointer !important;
}

.book-title-link:hover {
    color: #286884 !important; /* Slightly lighter shade */
    transform: translateY(-2px) !important; /* Slight lift effect */
    opacity: 0.9 !important;
}

.cover-image-link {
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 1 !important;
    line-height: 0; /* Remove extra space */
}

.cover-image-link img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: none !important; /* Prevent image from blocking clicks */
    transition: inherit; /* Inherit transition from parent */
}

.cover-image-link:hover {
    transform: scale(1.02) translateY(-3px) !important; /* Gentle zoom and lift */
    opacity: 0.95 !important;
    filter: brightness(1.05) !important; /* Slight brightness increase */
}

.cover-image-link:hover img {
    transform: inherit; /* Inherit transform from parent */
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .book-release-line {
        animation: none;
    }
    
    .chapter-button-flash {
        animation: fadeInUp 1.2s ease-out;
    }
    
    .book-title-link:hover,
    .cover-image-link:hover {
        transform: none;
    }
}

.images-section {
    margin: 1.5rem 0 2.5rem;
    padding: 0.5rem 0;
}

.images-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align top edges */
    gap: 4.24rem; /* Increased by 112%: 2rem * 2.12 = 4.24rem */
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    /* No transition - images remain static */
}

.image-left-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Remove gap to allow overlap */
    justify-content: flex-start; /* Start from top */
    align-self: flex-start;
    flex: 0 0 auto;
    /* Calculate to match right side height - will be handled by content */
    /* No transition - images remain static */
}

.image-left,
.image-right {
    height: auto;
    display: block;
    object-fit: contain;
    /* No transition - images remain static */
}

.image-left {
    width: 100%;
    max-width: 207px; /* Increased by 15%: 180px * 1.15 = 207px */
    background: transparent;
    background-color: transparent;
    transform: scaleX(-1); /* Flip horizontally */
    object-fit: cover;
    object-position: top;
    clip-path: inset(0 0 15% 0); /* Crop bottom 15% */
    margin: 0;
    padding: 0;
    display: block;
    align-self: center; /* Center align with text box and button */
    border: none;
    outline: none;
    flex-shrink: 0; /* Prevent shrinking */
    position: relative;
    z-index: 0; /* Behind the text box */
}

/* Index Page Background */
.index-page {
    background-color: #d1e1e5; /* RGB(209, 225, 229) */
}

[data-theme="dark"] .index-page {
    background-color: #1a2a2b; /* Match other pages dark mode background */
}

/* Space Page Background */
.space-page {
    background-color: #e3f9f7; /* RGB(227, 249, 247) */
}

.space-page main {
    max-width: 1200px; /* Match nav width for alignment */
    padding: 2rem 0; /* Remove horizontal padding, let content handle it */
}

/* Extras Page Background */
.extras-page {
    background-color: #e4faf8; /* RGB(228, 250, 248) */
}

[data-theme="dark"] .extras-page {
    background-color: #1a2a2b; /* Match about-page dark mode background */
}

/* Contact Page Background */
.contact-page {
    background-color: #d6eae8; /* RGB(214, 234, 232) */
}

[data-theme="dark"] .contact-page {
    background-color: #1a2a2b; /* Match about-page dark mode background */
}

.image-right {
    width: 100%;
    max-width: 378px; /* Increased by 10%: 344 * 1.1 = 378.4 */
    align-self: flex-start; /* Align to top */
    object-fit: contain; /* Maintain aspect ratio */
    object-position: top; /* Align image to top */
    flex: 0 0 auto;
    display: block;
    margin-top: 17px; /* Move down by 5% of original size: 344 * 0.05 = 17.2 */
}

.author-info {
    margin: 0;
    margin-top: -30px; /* Increased negative margin to overlap image more and reduce gap */
    padding: 0.75rem 1rem; /* Reduced padding to minimize borders */
    border: none;
    color: var(--text-color);
    font-size: 1.075rem;
    line-height: 1.6;
    text-align: right;
    width: 100%;
    max-width: 280px;
    background-color: #A8CDD6; /* Updated color */
    box-sizing: border-box;
    min-height: fit-content;
    position: relative; /* Allow overlap */
    z-index: 1; /* Ensure text box appears above image if overlapping */
    border-radius: 6px; /* Rounded corners */
    /* No transition - images remain static */
}

[data-theme="dark"] .author-info {
    background-color: #2a3a3b; /* Dark version of light blue-gray */
}

.chapter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px; /* Same width as text box */
    margin-top: 1.5rem; /* Increased gap between textbox and button */
    margin-right: auto;
    margin-left: auto;
    padding: 1rem 1.5rem; /* Touch-friendly padding */
    background-color: #2E6880; /* RGB(46, 104, 128) */
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px; /* Rounded corners */
    transition: all 0.2s ease; /* Smooth transition for hover effects */
    box-sizing: border-box;
    min-height: 44px; /* Touch-friendly minimum */
}

.chapter-button:hover {
    background-color: #3a7a94; /* Lighter, slightly brighter shade for hover */
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 2px 8px rgba(46, 104, 128, 0.3); /* Subtle shadow on hover */
}

[data-theme="dark"] .chapter-button {
    background-color: #2E6880;
}

[data-theme="dark"] .chapter-button:hover {
    background-color: #3a7a94; /* Lighter shade for dark mode hover */
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 2px 8px rgba(74, 144, 164, 0.3); /* Subtle shadow on hover */
    transition: all 0.2s ease; /* Smooth transition */
}

/* Story Text */
.story-text {
    color: #1a7a7a; /* Dark turquoise */
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    text-align: right;
    padding: 0 2rem;
    box-sizing: border-box;
}

[data-theme="dark"] .story-text {
    color: #6ab8c4; /* Lighter turquoise for dark mode */
}

.story-text p {
    margin-bottom: 1rem;
    color: #1a7a7a; /* Dark turquoise */
}

.story-text .italic-line {
    font-style: italic;
}

/* Contact Page Title */
.contact-title {
    font-size: 1.8rem;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 1rem;
}

.contact-intro {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0; /* Remove gap before form */
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 0 auto 0; /* Remove top margin to eliminate gap */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}

/* Mobile form layout - stack vertically */
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem; /* Minimized gap */
        margin-bottom: 1rem; /* Reduced spacing between form groups */
    }
    
    .form-group label {
        flex: none;
        width: 100%;
        margin-bottom: 0.05rem; /* Minimized margin */
        padding-bottom: 0; /* Remove any padding */
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
        flex: none;
        margin-top: 0; /* Ensure no top margin */
    }
}

.form-group label {
    display: block;
    flex: 0 0 80px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1rem;
    text-align: right;
}

.form-group input,
.form-group textarea {
    flex: 1;
    padding: 1rem; /* Touch-friendly padding */
    font-size: 1rem; /* Prevent zoom on iOS */
    font-family: inherit;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    color: var(--text-color);
    border-radius: 2px;
    transition: border-color 0.2s ease;
    direction: rtl;
    text-align: right;
    min-height: 44px; /* Touch-friendly minimum */
    -webkit-appearance: none; /* Remove iOS styling */
    appearance: none;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background-color: #2a2a2a;
    border-color: #404040;
    color: var(--text-color);
}

[data-theme="dark"] .contact-page .form-group input,
[data-theme="dark"] .contact-page .form-group textarea {
    background-color: #000000; /* Black background for contact page */
    border-color: #000000;
    color: #ffffff; /* White text */
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.form-group:has(textarea) {
    align-items: flex-start;
}

.form-group:has(textarea) label {
    padding-top: 0.75rem;
}

.submit-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem; /* Mobile-first: adequate padding */
    font-size: 1.1rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    font-weight: 500;
    display: block;
    margin-right: 0; /* Mobile: full width */
    margin-left: 0;
    width: 100%; /* Mobile: full width */
    max-width: none;
    min-height: 44px; /* Touch-friendly minimum */
}

/* Desktop submit button */
@media (min-width: 769px) {
    .submit-btn {
        padding: 1rem 2.5rem;
        margin-right: 96px;
        margin-left: auto;
        width: calc(100% - 96px);
    }
}

[data-theme="dark"] .submit-btn {
    background-color: #4a90a4;
}

[data-theme="dark"] .submit-btn:hover {
    background-color: #5aa0b4;
}

.submit-btn:hover {
    background-color: #34495e;
}

.submit-btn:active {
    transform: translateY(1px);
}

/* Social Section */
.social-section {
    margin: 2rem 0 1.5rem;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.social-intro {
    text-align: right;
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    width: 100%;
    padding-right: 0;
}

.social-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem; /* Touch-friendly padding */
    border: 1px solid #1a7a7a; /* Dark turquoise */
    background-color: #ffffff; /* White */
    color: #1a7a7a; /* Dark turquoise */
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border-radius: 10px;
    width: 100%; /* Mobile: full width */
    max-width: none;
    margin-right: 0; /* Mobile: no margin */
    margin-left: 0;
    font-weight: 500;
    min-height: 44px; /* Touch-friendly minimum */
}

/* Desktop social button */
@media (min-width: 769px) {
    .social-button {
        width: calc(100% - 96px);
        margin-right: 96px;
        margin-left: auto;
    }
}

[data-theme="dark"] .social-button {
    background-color: #2a3a3b;
    border-color: #4a90a4;
    color: #e0e0e0;
}

.social-button:hover {
    border-color: #2a9a9a; /* Lighter turquoise on hover */
    background-color: #f5fafa; /* Very light turquoise tint */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 10px rgba(26, 122, 122, 0.2); /* Subtle shadow */
}

[data-theme="dark"] .social-button:hover {
    background-color: #3a4a4b; /* Slightly lighter dark background */
    border-color: #5aa0b4; /* Lighter blue border */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 10px rgba(74, 144, 164, 0.2); /* Subtle shadow */
}

@media (prefers-reduced-motion: reduce) {
    .social-button:hover {
        transform: none; /* Disable transform for reduced motion */
    }
    
    [data-theme="dark"] .social-button:hover {
        transform: none; /* Disable transform for reduced motion */
    }
}

.social-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Footer */
footer {
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
    padding: 1.5rem;
    text-align: center !important; /* Ensure center alignment */
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 2rem;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

footer p {
    text-align: center !important;
    margin: 0 auto; /* Center the paragraph */
    width: 100%;
    display: block; /* Ensure it's a block element */
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .intro {
        font-size: 1.05rem;
    }

    main {
        padding: 2rem 1.25rem; /* Mobile: adequate horizontal padding */
    }
    
    /* Limit line width for better readability on mobile */
    p, .intro, .content {
        max-width: 100%;
    }
    
    /* Increase font size for better mobile readability */
    body {
        font-size: 19px; /* Slightly larger for mobile */
        line-height: 2; /* Better line spacing for Hebrew */
    }
    
    p {
        line-height: 2; /* Increased for Hebrew text readability */
        padding: 0 0.25rem; /* Small padding for text */
    }

    nav {
        padding: 0 1.25rem; /* Mobile: adequate padding */
        position: relative;
    }
    
    /* Mobile Menu Button (Hamburger) */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
    }

    .nav-list {
        display: none !important;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background-color: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-top: 1rem;
        width: 100%;
    }
    
    [data-theme="dark"] .nav-list {
        background-color: #1a1a1a;
    }
    
    .nav-list.active {
        display: flex !important;
    }
    
    .nav-list li {
        width: 100%;
        padding: 0.75rem 2rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-list li:not(:last-child)::after {
        display: none;
    }

    .nav-list a {
        display: block;
        width: 100%;
        font-size: 1rem;
    }
    
    .theme-toggle {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        margin-left: 0.5rem;
    }
    
    .author-name {
        max-height: 2.8rem; /* 70% of header height on mobile */
    }

    .hero {
        margin-bottom: 0.5rem; /* Reduced gap between title and content on mobile */
        padding-bottom: 0.5rem; /* Reduced padding */
    }
    
    .space-content {
        margin-top: 0 !important; /* Remove top margin on mobile */
    }
    
    .space-title {
        margin-bottom: 0.5rem !important; /* Reduced gap below title on mobile */
        text-align: right !important; /* Right-aligned on mobile (visual right in RTL) */
    }
    
    .about-layout {
        margin-top: 0 !important; /* Remove top margin on mobile */
        gap: 1rem !important; /* Reduced gap on mobile */
    }
    
    .about-text {
        margin-top: 0 !important; /* Remove top margin on mobile */
    }

    .content {
        max-width: 100%;
    }

    .contact-form {
        max-width: 100%;
    }

    .social-section {
        margin: 2rem 0 1.5rem;
    }

    .social-button {
        width: 100%; /* Mobile: full width */
        max-width: none;
        margin-right: 0;
        margin-left: 0;
        padding: 1rem 1.5rem; /* Touch-friendly */
        font-size: 0.95rem;
    }

    .social-icon {
        width: 18px;
        height: 18px;
    }

    .content-button {
        width: 100%; /* Mobile: full width */
        max-width: 400px;
        min-height: 44px; /* Touch-friendly */
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .buttons-container {
        gap: 1.25rem;
    }

    .images-section {
        margin: 2rem 0 3rem;
    }

    .images-container {
        gap: 3.18rem; /* Increased by 112%: 1.5rem * 2.12 = 3.18rem */
    }

    .image-left {
        max-width: 173px; /* Increased by 15%: 150px * 1.15 = 172.5px */
    }

    .image-right {
        max-width: 316px; /* Increased by 10%: 287 * 1.1 = 315.7 */
        margin-top: 14px; /* Move down by 5%: 287 * 0.05 = 14.35 */
    }

    .author-info {
        max-width: 250px;
        padding: 1.25rem;
        font-size: 0.9rem;
    }

    .space-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .book-cover {
        max-width: 90%; /* Increased to fit text width on mobile */
    }

    .book-cover-side {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the image container */
        width: 100%;
        margin: 0 auto; /* Center the container */
    }

    .space-text .chapter-button {
        display: block;
        margin-right: auto;
        margin-left: auto; /* Center the button */
    }

    .extras-section {
        margin-bottom: 2rem;
    }

    .extras-section h2 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    /* Optimize animations for mobile - faster and lighter */
    body {
        animation-duration: 0.3s;
    }
    
    main {
        animation-duration: 0.4s;
        transform: translateY(10px); /* Smaller movement on mobile */
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.3rem;
        margin-top: 2rem;
    }

    /* Mobile Menu Styles */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
    }
    
    .nav-list {
        display: none !important;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background-color: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    [data-theme="dark"] .nav-list {
        background-color: #1a1a1a;
    }
    
    .nav-list.active {
        display: flex !important;
    }
    
    .nav-list li {
        width: 100%;
        padding: 0.75rem 2rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-list li:not(:last-child)::after {
        display: none;
    }
    
    .nav-list a {
        display: block;
        width: 100%;
        font-size: 1.1rem;
        padding: 0.5rem 0;
    }
    
    .theme-toggle {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        margin-left: 0.5rem;
    }
    
    nav {
        position: relative;
        flex-wrap: wrap;
    }
    
    .author-name {
        max-height: 2.8rem; /* 70% of header height on mobile */
    }

    main {
        padding: 1.5rem 1rem;
    }
    
    .hero {
        margin-bottom: 0.5rem !important; /* Reduced gap on narrow mobile */
        padding-bottom: 0.5rem !important;
    }
    
    .space-content {
        margin-top: 0 !important; /* Remove top margin on narrow mobile */
    }
    
    .space-title {
        margin-bottom: 0.5rem !important; /* Reduced gap below title */
        text-align: right !important; /* Right-aligned (visual right in RTL) */
    }

    header {
        padding: 1.125rem 0; /* Reduced by 25% from 1.5rem */
    }

    .images-section {
        margin: 1.5rem 0 2rem;
    }

    .images-container {
        flex-direction: column;
        gap: 2.12rem; /* Increased by 112%: 1rem * 2.12 = 2.12rem */
    }

    .image-left,
    .image-right {
        max-width: 100%;
    }

    .author-info {
        max-width: 100%;
        padding: 1rem;
        font-size: 0.85rem;
    }

    .social-section {
        margin: 1.5rem 0 1rem;
    }

    .social-intro {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .social-button {
        width: 100%; /* Mobile: full width */
        max-width: none;
        margin-right: 0;
        margin-left: 0;
        padding: 1rem 1.5rem; /* Touch-friendly */
        font-size: 0.95rem;
    }

    .social-icon {
        width: 16px;
        height: 16px;
    }

    .content-button {
        width: 100%; /* Mobile: full width */
        max-width: 400px;
        min-height: 44px; /* Touch-friendly */
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .button-image {
        height: 25px;
        max-width: 80px;
    }

    .buttons-container {
        gap: 1rem;
    }

    .contact-form {
        padding: 0;
    }

    .form-group {
        margin-bottom: 1rem; /* Reduced spacing between form groups */
        gap: 0.05rem !important; /* Minimize gap between label and field */
    }
    
    .form-group label {
        margin-bottom: 0 !important; /* Remove all margin below label */
        padding-bottom: 0;
    }
    
    .form-group input,
    .form-group textarea {
        margin-top: 0 !important; /* Remove all margin above input */
    }

    .submit-btn {
        width: 100%;
        padding: 0.9rem 2rem;
        font-size: 1rem;
    }
    
    /* Ensure dark mode submit button is readable on mobile */
    [data-theme="dark"] .submit-btn {
        background-color: #4a90a4;
        color: #ffffff;
    }
    
    [data-theme="dark"] .submit-btn:hover {
        background-color: #5aa0b4;
    }

    .story-text {
        font-size: 1rem;
        line-height: 1.8;
    }

    .about-layout {
        flex-direction: column;
        gap: 1rem !important; /* Reduced gap on narrow mobile */
        margin-top: 0 !important; /* Remove top margin */
    }
    
    .about-text {
        margin-top: 0 !important; /* Remove top margin */
    }

    .about-photo {
        max-width: 100%;
    }

    .space-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .book-cover {
        max-width: 90%; /* Increased to fit text width on narrow mobile */
    }

    .book-cover-side {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the image container */
        width: 100%;
        margin: 0 auto; /* Center the container */
    }

    .space-text .chapter-button {
        display: block;
        margin-right: auto;
        margin-left: auto; /* Center the button */
    }

    .extras-section {
        margin-bottom: 1.5rem;
    }

    .extras-section h2 {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .buttons-container {
        gap: 1rem;
        margin: 0.75rem 0;
    }

    .content-button {
        width: 90%;
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    header {
        position: static;
    }

    .nav-list {
        display: none;
    }

    footer {
        border-top: none;
    }
}