/* Basic Reset or Global Styles */
body {
    font-family: sans-serif; /* Placeholder font */
    /* Example: Define global text color if not using Tailwind's text-foreground extensively */
}

/* 
Tailwind Custom Color Placeholders / Examples 
If you set up a local Tailwind CSS environment, you would define these in your tailwind.config.js.
For now, using the CDN, these specific class names (bg-primary, text-muted-foreground, etc.) 
will mostly fall back to Tailwind defaults or might not have an effect unless they are default Tailwind names.

:root {
    --color-primary: #HEXCODE; 
    --color-secondary: #HEXCODE;
    --color-accent: #HEXCODE;
    --color-background: #HEXCODE; 
    --color-foreground: #HEXCODE; 
    --color-muted-foreground: #HEXCODE;
    --color-card: #HEXCODE;
    --color-border: #HEXCODE;
}

.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:bg-primary\/90:hover { background-color: hsla(var(--primary-hsl), 0.9); } // Assuming HSL conversion for opacity

.bg-secondary { background-color: var(--color-secondary); }

.bg-accent { background-color: var(--color-accent); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }
.text-accent-foreground { color: var(--color-foreground); } // Assuming accent foreground is same as main foreground for now
.hover\:text-accent-foreground:hover { color: var(--color-foreground); }

.bg-background { background-color: var(--color-background); }
.text-foreground { color: var(--color-foreground); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.bg-card { background-color: var(--color-card); }
.border-input { border-color: var(--color-border); } // Or just 'border-border'
.border-border { border-color: var(--color-border); }

*/

/* Custom scrollbar hiding for gallery (if needed and not handled by Tailwind plugin) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Additional custom styles can be added here */ 

/* You can add your own custom CSS here */

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Share Buttons Section */
.share-section {
    padding: 2rem 1rem;
    background-color: #27272a; /* zinc-800 */
    border-radius: 0.5rem;
    text-align: center;
    max-width: 800px;
    margin: 3rem auto;
}

.share-buttons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px; /* rounded-full */
    color: white;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.share-button:hover {
    transform: scale(1.1);
}

.share-button svg {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

/* Social Media Colors */
.share-button.facebook { background-color: #1877F2; }
.share-button.twitter { background-color: #14171A; } /* X/Twitter Black */
.share-button.reddit { background-color: #FF4500; }
.share-button.linkedin { background-color: #0A66C2; }
.share-button.pinterest { background-color: #E60023; }
.share-button.copy-link { background-color: #6b7280; } /* gray-500 */

.copy-feedback {
    display: inline-block;
    margin-left: 0.75rem;
    color: #16a34a; /* green-600 */
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Lite YouTube Embed Styles */
.lite-youtube-embed {
    position: relative;
    display: block;
    contain: content;
    cursor: pointer;
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

.lite-youtube-embed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Show a play button overlay */
.lite-youtube-embed::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s;
}

.lite-youtube-embed:hover::before {
    background-color: rgba(0, 0, 0, 0.2);
}

.lite-youtube-embed::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.63-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="%23f00"></path><path d="M27 34.54V13.46l18 10.54z" fill="%23fff"></path></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    transition: transform 0.2s;
}

.lite-youtube-embed:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Hide the thumbnail and play button and style the iframe when loaded */
.lite-youtube-embed.is-loaded {
    cursor: default;
}

.lite-youtube-embed.is-loaded::before,
.lite-youtube-embed.is-loaded::after {
    display: none;
}

.lite-youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}