/*
Theme Name: TaskHero
Theme URI: https://taskhero.example.com
Author: TaskHero Team
Author URI: https://taskhero.example.com
Description: תבנית וורדפרס מודרנית ל-TaskHero - מערכת שהופכת מטלות למשחק משפחתי. כוללת עיצוב RTL מלא בעברית, אזורי וידג'טים, תפריטים ניתנים להתאמה, ותמיכה מלאה בעורך הבלוקים.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taskhero
Tags: rtl-language-support, one-column, custom-logo, custom-menu, custom-colors, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ====== Reset & Base ====== */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* prevent iOS font size bump on orientation change */
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f9fafb;
    color: #1f2937;
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport for mobile browsers */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* prevent horizontal scroll on mobile */
    overflow-x: clip;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* iOS: removes 300ms click delay */
}
input, textarea, select {
    font-family: inherit;
    font-size: 16px; /* iOS: prevents zoom on focus when font-size is less than 16px */
}

/* ====== Utility ====== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.btn-bounce { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.btn-bounce:hover { transform: scale(1.05); }
.glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
.hero-gradient { background: radial-gradient(circle at top right, #f0f7ff 0%, #ffffff 100%); }
.text-balance { text-wrap: balance; }

/* ====== Navigation ====== */
.site-header {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 50;
    border-bottom: 1px solid #f3f4f6;
}
.nav-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-logo { display: flex; align-items: center; gap: 0.75rem; }
.site-logo img { height: 40px; width: 40px; object-fit: contain; border-radius: 0.5rem; }
.site-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: -0.025em;
}
.main-menu { display: none; gap: 2rem; font-weight: 700; color: #4b5563; list-style: none; margin: 0; padding: 0; }
.main-menu a { transition: color 0.2s; }
.main-menu a:hover { color: #2563eb; }
.header-cta {
    background: #2563eb;
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(191, 219, 254, 0.5);
}
.menu-toggle {
    display: block;
    background: transparent;
    padding: 0.5rem;
}
.menu-toggle svg { width: 28px; height: 28px; stroke: #1e3a8a; }
@media (min-width: 768px) {
    .main-menu { display: flex; }
    .menu-toggle { display: none; }
}

/* Mobile menu panel */
.mobile-menu {
    display: none;
    position: fixed;
    top: 72px; right: 0; left: 0;
    background: #fff;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu a { font-weight: 700; color: #1f2937; }

/* ====== Hero ====== */
.hero {
    padding: 8rem 0 5rem;
    overflow: hidden;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 768px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #eff6ff;
    color: #2563eb;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
}
.hero h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin: 1.5rem 0;
}
@media (min-width: 768px) {
    .hero h1 { font-size: 4.5rem; }
}
.hero h1 .accent {
    color: #2563eb;
    font-style: italic;
}
.hero p {
    font-size: 1.25rem;
    color: #4b5563;
    max-width: 32rem;
    margin-bottom: 2rem;
}
.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 640px) {
    .hero-buttons { flex-direction: row; }
}
.btn-primary {
    background: #2563eb;
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    display: inline-block;
    text-align: center;
}
.btn-secondary {
    background: #fff;
    border: 2px solid #f3f4f6;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    transition: background 0.2s;
    display: inline-block;
    text-align: center;
}
.btn-secondary:hover { background: #f9fafb; }

/* Phone mockup */
.hero-visual { position: relative; }
.phone-mockup {
    position: relative;
    z-index: 10;
    background: #fff;
    border-radius: 2.5rem;
    padding: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    border: 8px solid #0f172a;
    width: 300px;
    margin: 0 auto;
}
.phone-header {
    background: #2563eb;
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 1.5rem;
    color: #fff;
    text-align: center;
}
.phone-header .label { font-size: 0.875rem; opacity: 0.8; font-style: italic; }
.phone-header .points { font-size: 2.25rem; font-weight: 900; }
.phone-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    border: 1px solid #dbeafe;
    font-weight: 700;
}
.task-row .points { color: #2563eb; }
.phone-cta {
    width: 100%;
    padding: 0.75rem;
    background: #2563eb;
    color: #fff;
    border-radius: 0.75rem;
    font-weight: 700;
    margin-top: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.blur-blob { position: absolute; border-radius: 9999px; filter: blur(48px); pointer-events: none; }
.blob-yellow { top: 50%; right: -2.5rem; width: 6rem; height: 6rem; background: #fbbf24; opacity: 0.3; }
.blob-blue { bottom: 2.5rem; left: -2.5rem; width: 8rem; height: 8rem; background: #60a5fa; opacity: 0.2; }

/* ====== How It Works ====== */
.section { padding: 5rem 0; }
.section-title {
    font-size: 2.25rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 4rem;
    font-style: italic;
    color: #1e3a8a;
}
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 768px) {
    .steps-grid { grid-template-columns: repeat(3, 1fr); }
}
.step-item { text-align: center; }
.step-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s;
}
.step-icon svg { width: 2.5rem; height: 2.5rem; }
.step-icon.blue { background: #dbeafe; color: #2563eb; }
.step-icon.purple { background: #f3e8ff; color: #9333ea; }
.step-icon.yellow { background: #fef3c7; color: #ca8a04; }
.step-item:hover .step-icon.blue { background: #2563eb; color: #fff; }
.step-item:hover .step-icon.purple { background: #9333ea; color: #fff; }
.step-item:hover .step-icon.yellow { background: #ca8a04; color: #fff; }
.step-item h3 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.step-item p { color: #6b7280; font-size: 1.125rem; }

/* ====== Features ====== */
.features-section { background: #f8fafc; }
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 768px) {
    .features-grid { grid-template-columns: 1fr 1fr; }
}
.features-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.feature-card {
    padding: 1.5rem;
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid #eff6ff;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}
.feature-card.offset { transform: translateY(2rem); }
.feature-card svg { width: 24px; height: 24px; margin-bottom: 1rem; }
.feature-card h4 { font-weight: 700; margin: 0 0 0.5rem; }
.feature-card p { font-size: 0.875rem; color: #6b7280; margin: 0; }

.features-text h2 { font-size: 2.25rem; font-weight: 900; margin-bottom: 1.5rem; }
.features-text h2 .underline { color: #2563eb; text-decoration: underline; text-decoration-color: #fbbf24; text-decoration-thickness: 4px; }
.features-text p { font-size: 1.25rem; color: #4b5563; margin-bottom: 1.5rem; }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.check-list li { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; }
.check-list svg { color: #2563eb; width: 20px; height: 20px; flex-shrink: 0; }

/* ====== Pricing ====== */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 64rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr 1fr; }
}
.price-card {
    padding: 2rem;
    border-radius: 2rem;
    border: 2px solid #f3f4f6;
    text-align: right;
    position: relative;
    transition: border-color 0.3s;
}
.price-card:hover { border-color: #2563eb; }
.price-card h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; }
.price-card .price { font-size: 2.25rem; font-weight: 900; margin-bottom: 1.5rem; }
.price-card .price span { font-size: 1.125rem; color: #9ca3af; font-weight: 400; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1rem; color: #4b5563; }
.price-card ul li { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.price-card ul svg { width: 20px; height: 20px; color: #2563eb; flex-shrink: 0; }
.price-card-btn {
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    background: #f3f4f6;
    color: #1f2937;
    font-weight: 700;
    transition: all 0.2s;
}
.price-card:hover .price-card-btn { background: #2563eb; color: #fff; }

.price-card-featured {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(191, 219, 254, 0.6);
    overflow: hidden;
}
.price-card-featured h3, .price-card-featured .price { color: #fff; }
.price-card-featured .price span { color: rgba(255,255,255,0.6); }
.price-card-featured ul { color: #eff6ff; }
.price-card-featured ul svg { color: #fbbf24; }
.price-card-featured .price-card-btn { background: #fff; color: #2563eb; }
.featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #fbbf24;
    color: #1e3a8a;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: -0.025em;
}
.pricing-note { margin-top: 2rem; color: #9ca3af; text-align: center; }

/* ====== Footer ====== */
.site-footer {
    background: #0f172a;
    color: #fff;
    padding: 4rem 0 2rem;
}
.footer-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .footer-grid { flex-direction: row; }
}
.footer-brand { text-align: right; }
.footer-brand .site-logo { margin-bottom: 1rem; }
.footer-brand .site-title { color: #fff; font-style: italic; }
.footer-brand p { color: #94a3b8; max-width: 20rem; }
.footer-social { display: flex; gap: 1.5rem; }
.footer-social a {
    width: 3rem;
    height: 3rem;
    background: #1e293b;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.footer-social a:hover { background: #2563eb; }
.footer-bottom {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #1e293b;
    color: #64748b;
    font-size: 0.875rem;
}

/* ====== WordPress Core ====== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}
.alignleft { float: right; margin: 0 0 1rem 1.5rem; } /* RTL swap */
.alignright { float: left; margin: 0 1.5rem 1rem 0; }
.aligncenter { display: block; margin-right: auto; margin-left: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; color: #6b7280; text-align: center; }
.sticky { display: block; }
.bypostauthor { display: block; }

/* Posts/pages default content */
.entry-content { max-width: 48rem; margin: 0 auto; padding: 6rem 1.5rem 4rem; }
.entry-content h1, .entry-content h2, .entry-content h3 { font-weight: 700; margin-top: 2rem; }
.entry-content h1 { font-size: 2.5rem; }
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content p { margin: 1rem 0; }
.entry-content a { color: #2563eb; text-decoration: underline; }
.entry-content blockquote {
    border-right: 4px solid #2563eb;
    padding: 0.5rem 1.5rem;
    background: #f9fafb;
    margin: 1.5rem 0;
    font-style: italic;
}

/* Comments */
.comments-area { max-width: 48rem; margin: 2rem auto; padding: 0 1.5rem 4rem; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; margin-bottom: 1rem; }

/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   Tested on: iPhone SE/12/14/15 Pro, iPad, Pixel, Galaxy
   ============================================================ */

/* Safe area for iPhone notches/home-indicators */
.site-header {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}
.site-footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* ===== Small phones: iPhone SE (375px), older Androids ===== */
@media (max-width: 380px) {
    .container { padding: 0 1rem; }
    .nav-wrap { padding: 0.75rem 1rem; }
    .site-title { font-size: 1.25rem; }
    .header-cta { padding: 0.4rem 1rem; font-size: 0.875rem; }

    .hero { padding: 6rem 0 3rem; }
    .hero h1 { font-size: 2.25rem; line-height: 1.15; }
    .hero p { font-size: 1rem; }

    .phone-mockup { width: 260px; }
    .btn-primary, .btn-secondary { font-size: 1rem; padding: 0.875rem 1.5rem; }

    .section { padding: 3rem 0; }
    .section-title { font-size: 1.75rem; margin-bottom: 2.5rem; }

    .features-cards { grid-template-columns: 1fr; }
    .feature-card.offset { transform: none; }
    .features-text h2 { font-size: 1.75rem; }

    .price-card { padding: 1.5rem; }
    .price-card .price { font-size: 1.75rem; }

    .entry-content { padding: 5rem 1rem 2rem; }
    .entry-content h1 { font-size: 1.75rem; }
    .entry-content h2 { font-size: 1.375rem; }
}

/* ===== Standard phones: iPhone 14/15, most Androids (381px-640px) ===== */
@media (max-width: 640px) {
    .hero { padding: 7rem 0 3rem; }
    .hero h1 { font-size: 2.75rem; line-height: 1.15; }
    .hero-grid { gap: 2rem; }

    .section { padding: 3.5rem 0; }
    .section-title { font-size: 2rem; margin-bottom: 2.5rem; }

    .steps-grid { gap: 2rem; }
    .step-item h3 { font-size: 1.25rem; }
    .step-item p { font-size: 1rem; }

    .features-cards { gap: 0.75rem; }
    .feature-card { padding: 1rem; }
    .feature-card h4 { font-size: 0.95rem; }
    .feature-card p { font-size: 0.8125rem; }
    .feature-card.offset { transform: translateY(1rem); }
    .features-text h2 { font-size: 2rem; }
    .features-text p { font-size: 1.125rem; }

    .pricing-grid { gap: 1.5rem; }
    .price-card h3 { font-size: 1.25rem; }

    .footer-social a { width: 2.5rem; height: 2.5rem; }

    /* Make primary button full-width on mobile */
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary { width: 100%; }
}

/* ===== Tablets: iPad Mini, iPad, Android tablets (641px-1024px) ===== */
@media (min-width: 641px) and (max-width: 1024px) {
    .container { padding: 0 2rem; }
    .hero h1 { font-size: 3.5rem; }
    .hero-grid { gap: 2rem; }
    .phone-mockup { width: 280px; }
    .section-title { font-size: 2.5rem; }
    .features-text h2 { font-size: 2.5rem; }
}

/* ===== Landscape mode on small phones ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding-top: 5rem; padding-bottom: 2rem; }
    .hero h1 { font-size: 2rem; }
    .phone-mockup { display: none; } /* hide mockup in landscape - too cramped */
    .hero-grid { grid-template-columns: 1fr; }
}

/* ===== iOS-specific fixes ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari sometimes renders 100vh wrong (includes browser UI) */
    .hero { min-height: auto; }

    /* Prevent iOS rubber-band scrolling overflow issues */
    body { position: relative; }

    /* iOS fixes background-attachment: fixed flicker */
    .hero-gradient {
        background-attachment: scroll;
    }
}

/* ===== High-DPI / Retina displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .phone-mockup { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); }
    .card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08); }
}

/* ===== Tap targets: ensure minimum 44x44 (iOS) and 48x48 (Android) ===== */
@media (pointer: coarse) {
    .main-menu a,
    .mobile-menu a,
    .footer-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .btn-primary, .btn-secondary, .header-cta, .phone-cta, .price-card-btn {
        min-height: 48px;
    }
}

/* ===== Reduced motion preference ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Dark mode (respect OS preference for entry content only) ===== */
@media (prefers-color-scheme: dark) {
    /* Keep landing page design as-is, only adjust post content */
    .entry-content { color: #1f2937; }
}

/* ===== Print styles ===== */
@media print {
    .site-header, .site-footer, .menu-toggle, .mobile-menu,
    .header-cta, .hero-buttons, .price-card-btn {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    .hero { padding: 1rem 0; }
    a { color: #000; text-decoration: underline; }
}