/*
Theme Name: Tchoukball
Theme URI: https://example.com/themes/tchoukball
Author: Codex Assistant
Author URI: https://example.com
Description: Mobile-first WordPress theme for the tchoukball project with Tailwind-powered design and modern responsive patterns.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.6
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: tchoukball
Tags: custom-background, custom-logo, custom-menu, featured-images, flexible-header, block-styles, wide-blocks
*/

/* Basic fallback styles in case Tailwind fails to load */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0f172a;
    color: #1e293b;
    margin: 0;
    line-height: 1.6;
}

a {
    color: #2563eb;
}

.container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

img,
video,
.entry-content img,
.entry-content video,
.wp-block-image img,
.wp-block-embed__wrapper img {
    max-width: 100%;
    height: auto;
}

figure,
.wp-block-image,
.wp-block-embed,
.wp-block-embed__wrapper {
    max-width: 100%;
}

.entry-content iframe,
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
    width: 100%;
    max-width: 100%;
    display: block;
}

iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="youtube-nocookie.com"] {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Prevent media from overflowing inside post content */
.prose iframe,
.prose embed,
.prose object,
.prose video,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
    display: block;
    width: 100%;
    max-width: 100%;
}

.prose iframe,
.entry-content iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.prose .wp-caption,
.entry-content .wp-caption,
.prose figure,
.entry-content figure {
    max-width: 100%;
}

.prose .wp-caption img,
.entry-content .wp-caption img {
    width: 100%;
    height: auto;
}

.prose .alignright,
.prose .alignleft,
.entry-content .alignright,
.entry-content .alignleft {
    float: none;
    margin: 1.5rem auto;
    max-width: 100%;
}

@media (min-width: 768px) {
    .prose .alignright,
    .prose .alignleft,
    .entry-content .alignright,
    .entry-content .alignleft {
        float: none;
        margin: 1.5rem auto;
    }
}

a {
    color: inherit;
}

.mobile-nav-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }