/*
Theme Name: Twenty Twenty-Two
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 5.6
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: 0 solid;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
	margin-left: auto !important;
	margin-right: auto !important;
	width: inherit;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--custom--spacing--outer);
	padding-bottom: var(--wp--custom--spacing--large);
	padding-right: var(--wp--custom--spacing--outer);
	padding-left: var(--wp--custom--spacing--outer);
}

/*
 * Improves spacing for the legacy Post Comments block.
 * https://core.trac.wordpress.org/ticket/57560
 */

.wp-block-post-comments ol.commentlist ul.children {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.wp-block-post-comments ol.commentlist li.comment:not(:last-child) {
	margin-bottom: 1rem;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */

:where(pre) {
	overflow-x: auto;
}

/* ==========================================================================
   Spelling Boost Theme Styling Overrides
   ========================================================================== */

/* Font Family Fallback for Heading blocks (enforces Roboto) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
    font-family: var(--wp--preset--font-family--roboto), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Comparison Cards - Green left border (Boost Way) */
.wp-block-group.is-style-comparison-card-boost {
    border-left: 6px solid #22c55e !important;
}

/* Comparison Cards - Red left border (Traditional Way) */
.wp-block-group.is-style-comparison-card-traditional {
    border-left: 6px solid #e53e3e !important;
}

/* Regional Card Hover Animation & Elevation */
.wp-block-group.is-style-regional-card-interactive {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    cursor: pointer;
}

.wp-block-group.is-style-regional-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.08) !important;
    background-color: #f1f5f9 !important;
}

/* Link wrapper helper to cover full card area */
.wp-block-group.is-style-regional-card-interactive a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.wp-block-group.is-style-regional-card-interactive:hover .card-arrow {
    transform: translateX(4px);
}

/* Custom Tables */
.custom-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.05);
    border: 1px solid rgba(0, 51, 102, 0.08);
    margin: 2.5rem 0;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background: #ffffff;
}

.custom-table th {
    background: #003366;
    color: #ffffff;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.custom-table td {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 51, 102, 0.04);
    font-size: 0.92rem;
    color: #4a5568;
    vertical-align: middle;
}

.custom-table tr:last-child td {
    border-bottom: none;
}

.custom-table tr:hover td {
    background-color: rgba(0, 102, 153, 0.015);
}

.custom-table tr.highlighted-row td {
    background-color: rgba(0, 81, 162, 0.03);
    font-weight: 500;
}

/* Checkmark Lists */
.wp-block-list.is-style-checkmark-list {
    list-style-type: none !important;
    padding-left: 0 !important;
}

.wp-block-list.is-style-checkmark-list li {
    position: relative;
    padding-left: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    color: #4a5568 !important;
}

.wp-block-list.is-style-checkmark-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0051a2;
    font-weight: bold;
}

/* Verdict Callout Boxes */
.wp-block-group.is-style-verdict-box {
    background: #f7fafc !important;
    border-left: 4px solid #0051a2 !important;
    padding: 1.25rem 1.75rem !important;
    border-radius: 0 12px 12px 0 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

.wp-block-group.is-style-verdict-box p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #4a5568 !important;
    margin: 0 !important;
}

/* App Comparison Card */
.wp-block-group.is-style-app-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.wp-block-group.is-style-app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.05) !important;
    border-color: rgba(0, 51, 102, 0.12) !important;
}

.wp-block-group.is-style-app-card.is-style-app-card-highlighted {
    border: 2px solid #0051a2 !important;
    position: relative !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(235, 248, 255, 0.4) 100%) !important;
}

/* Pedagogical Info Cards */
.wp-block-group.is-style-pedagogical-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 1.75rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border-top: 5px solid #0051a2 !important;
}

.wp-block-group.is-style-pedagogical-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.04) !important;
}

/* Custom list items inside comparisons */
.checkmark-yes {
    color: #2b6cb0 !important;
    font-weight: 600 !important;
}

.checkmark-no {
    color: #a0aec0 !important;
}

/* App Cards Category Badges */
.app-card-badge {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 1.25rem !important;
}

.badge-pick {
    background: #ebf8ff !important;
    color: #2b6cb0 !important;
}

.badge-gamified {
    background: #faf5ff !important;
    color: #6b46c1 !important;
}

.badge-school {
    background: #f0fff4 !important;
    color: #2f855a !important;
}

.badge-adaptive {
    background: #fffaf0 !important;
    color: #dd6b20 !important;
}

.badge-dyslexia {
    background: #fff5f5 !important;
    color: #c53030 !important;
}

.badge-calm {
    background: #f7fafc !important;
    color: #4a5568 !important;
}

/* Download play buttons */
.download-play-btn {
    display: inline-block !important;
    background: #000000 !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.download-play-btn:hover {
    background: #2d3748 !important;
    transform: translateY(-1px) !important;
}

/* Author Callout Box */
.author-box {
    background: #f7fafc !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    margin-top: 4rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    gap: 1.5rem !important;
    align-items: center !important;
}

.author-avatar {
    width: 80px !important;
    height: 80px !important;
    background: #003366 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1.8rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

.author-details h4 {
    margin: 0 0 0.5rem 0 !important;
    font-size: 1.2rem !important;
    color: #003366 !important;
}

.author-details p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: #4a5568 !important;
    line-height: 1.5 !important;
}

@media (max-width: 600px) {
    .author-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
}

/* ==========================================================================
   Spelling Boost UI Components & Reusable Elements
   ========================================================================== */

/* Article Typography and Layout */
.spelling-test-article,
.spelling-apps-article,
.spelling-test-article p,
.spelling-apps-article p,
.spelling-test-article li,
.spelling-apps-article li,
.spelling-test-article h2,
.spelling-apps-article h2,
.spelling-test-article h3,
.spelling-apps-article h3,
.spelling-test-article td,
.spelling-apps-article td {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.spelling-test-article p,
.spelling-apps-article p {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #4a5568 !important;
    margin-bottom: 1.5rem !important;
}

.spelling-test-article h2,
.spelling-apps-article h2 {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin-top: 3.5rem !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 2px solid rgba(0, 51, 102, 0.06) !important;
    padding-bottom: 0.6rem !important;
    letter-spacing: -0.01em !important;
}

.spelling-test-article h3,
.spelling-apps-article h3 {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.01em !important;
}

/* Details / Accordions */
.wp-block-details {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid rgba(0, 51, 102, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.02) !important;
    transition: box-shadow 0.2s ease !important;
}
.wp-block-details:hover {
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.05) !important;
}
.wp-block-details summary {
    font-weight: 700 !important;
    color: #003366 !important;
    cursor: pointer !important;
    font-size: 1.15rem !important;
    padding: 0.25rem 0 !important;
    outline: none !important;
    user-select: none !important;
}
.wp-block-details[open] summary {
    border-bottom: 2px solid rgba(0, 51, 102, 0.06) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

/* Custom Comparison Tables */
.custom-comparison-table-wrapper,
.custom-table-wrapper {
    overflow-x: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.05) !important;
    border: 1px solid rgba(0, 51, 102, 0.08) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.custom-comparison-table,
.custom-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
    background: #ffffff !important;
}
.custom-comparison-table th,
.custom-table th {
    background: #003366 !important;
    color: #ffffff !important;
    padding: 20px 24px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
    border: none !important;
}
.custom-comparison-table td,
.custom-table td {
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(0, 51, 102, 0.04) !important;
    font-size: 0.92rem !important;
    color: #4a5568 !important;
    vertical-align: middle !important;
}
.custom-comparison-table tr:last-child td,
.custom-table tr:last-child td {
    border-bottom: none !important;
}
.custom-comparison-table tr:hover td,
.custom-table tr:hover td {
    background-color: rgba(0, 102, 153, 0.01) !important;
}
.custom-comparison-table tr.highlighted-row td,
.custom-table tr.highlighted-row td {
    background-color: rgba(0, 81, 162, 0.03) !important;
    font-weight: 500 !important;
}

/* Side-by-Side Feature Comparison Cards */
.comparison-card {
    border-radius: 16px !important;
    padding: var(--wp--preset--spacing--30) !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 51, 102, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.comparison-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.06) !important;
}
.comparison-card.boost-way,
.is-style-comparison-card-boost {
    border-left: 6px solid #22c55e !important;
}
.comparison-card.traditional-way,
.is-style-comparison-card-traditional {
    border-left: 6px solid #e53e3e !important;
}

/* Regional Grid Cards */
.regional-card {
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    cursor: pointer !important;
}
.regional-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.08) !important;
    background-color: #f1f5f9 !important;
}
.regional-card-link {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}
.regional-card:hover .card-arrow {
    transform: translateX(4px) !important;
}

/* Pedagogical Grid Layout */
.pedagogical-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.75rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.pedagogical-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 1.75rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border-top: 5px solid #0051a2 !important;
}
.pedagogical-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.04) !important;
}
.pedagogical-card h4 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #003366 !important;
    letter-spacing: -0.01em !important;
}

/* WordPress Block Table Styles (wp-block-table) */
.wp-block-table {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    overflow-x: auto !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.05) !important;
    border: 1px solid rgba(0, 51, 102, 0.1) !important;
    background: #ffffff !important;
}

.wp-block-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.95rem !important;
    text-align: left !important;
    border: none !important;
}

.wp-block-table thead th {
    background-color: #003366 !important;
    color: #ffffff !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    border: none !important;
    font-size: 1rem !important;
}

.wp-block-table td,
.wp-block-table th {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(0, 51, 102, 0.08) !important;
    color: #2d3748 !important;
    vertical-align: middle !important;
}

.wp-block-table tbody tr:nth-child(even),
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: rgba(0, 51, 102, 0.025) !important;
}

.wp-block-table tbody tr:last-child td {
    border-bottom: none !important;
}

.wp-block-table tbody td:last-child {
    background-color: rgba(0, 81, 162, 0.04) !important;
    font-weight: 500 !important;
}