/*
Theme Name: Raseedna
Theme URI: https://raseedna.com
Author: Design Arena
Description: Custom Block Theme for Raseedna - The interactive digital companion to "The Little Millionaire".
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: raseedna
Tags: full-site-editing, custom-colors, custom-typography, rtl-language-support
*/

/* 
  Note: In Block Themes (FSE), most styling is handled via theme.json.
  We only add custom CSS here for highly specific interactive elements 
  like the flip cards and the Growth Line animation that Gutenberg native 
  blocks don't support out of the box.
*/

body {
    direction: rtl;
}

/* Flip Card CSS for Glossary */
.raseedna-flip-card {
    perspective: 1000px;
    height: 200px;
    cursor: pointer;
}

.raseedna-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.raseedna-flip-card:hover .raseedna-flip-card-inner {
    transform: rotateY(-180deg);
}

.raseedna-flip-card-front,
.raseedna-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.raseedna-flip-card-front {
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--line-soft);
    color: var(--wp--preset--color--ink-teal);
}

.raseedna-flip-card-back {
    background-color: var(--wp--preset--color--ink-teal);
    color: var(--wp--preset--color--paper);
    transform: rotateY(-180deg);
    text-align: center;
}

/* Growth Line SVG Container */
.raseedna-growth-line-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5%;
    width: 100px;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    .raseedna-growth-line-container {
        display: none;
    }
}