/*

Theme Name: Casimo

Theme URI: https://casimo.org

Author: Casimo Team

Author URI: https://casimo.org

Description: Professional WordPress theme for casino and slots reviews

Version: 1.0.0

Requires at least: 5.0

Tested up to: 6.4

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: casimo

Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/



:root {

    --color-primary: #0d2f5a;

    --color-accent: #e69900;

    --color-accent-dark: #c68100;

    --color-light: #f8f9fa;

    --color-dark: #212529;

    --color-success: #198754;

    --color-warning: #ffc107;

    --color-danger: #dc3545;

    --color-gray: #6c757d;

    --color-gray-light: #e9ecef;

    --border-radius: 8px;

    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    --transition: all 0.3s ease;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Open Sans', sans-serif;

    line-height: 1.6;

    color: var(--color-dark);

    background-color: #fff;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}



a {

    color: var(--color-accent);

    text-decoration: none;

    transition: var(--transition);

}



a:hover {

    color: var(--color-accent-dark);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1rem;

}



/* WordPress specific */

.alignleft {

    float: left;

    margin-right: 1.5rem;

}



.alignright {

    float: right;

    margin-left: 1.5rem;

}



.aligncenter {

    display: block;

    margin-left: auto;

    margin-right: auto;

}







/* Casino Cards */

.casinos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1.5rem;

    margin-bottom: 3rem;

}



.casino-card {

    background: white;

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: var(--box-shadow);

    transition: var(--transition);

    display: flex;

    flex-direction: column;

}



.casino-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.casino-card__header {

    padding: 1.5rem;

    text-align: center;

    border-bottom: 1px solid #e9ecef;

}



.casino-card__logo {

    max-height: 60px;

    margin: 0 auto;

    object-fit: contain;

}



.casino-card__rating {

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    background-color: var(--color-success);

    color: white;

    font-size: 0.875rem;

    font-weight: 600;

    padding: 0.25rem 0.75rem;

    border-radius: 50px;

    margin-top: 0.75rem;

}



.casino-card__body {

    padding: 1.5rem;

    flex-grow: 1;

}



.casino-card__bonus {

    font-weight: 600;

    color: var(--color-primary);

    margin-bottom: 1rem;

}



.casino-card__features {

    list-style: none;

    margin-bottom: 1.5rem;

}



.casino-card__feature {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

    font-size: 0.875rem;

}



.casino-card__feature svg {

    width: 16px;

    height: 16px;

    fill: var(--color-success);

    flex-shrink: 0;

}



.casino-card__footer {

    padding: 0 1.5rem 1.5rem;

}



.btn {

    display: inline-block;

    width: 100%;

    text-align: center;

    padding: 0.75rem 1.5rem;

    background-color: var(--color-accent);

    color: white;

    font-weight: 600;

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    transition: var(--transition);

}



.btn:hover {

    background-color: var(--color-accent-dark);

    color: white;

}



.btn--secondary {

    background-color: transparent;

    color: var(--color-gray);

    border: 1px solid #dee2e6;

    margin-top: 0.5rem;

}



.btn--secondary:hover {

    background-color: #f8f9fa;

    color: var(--color-dark);

}



/* Hub Navigation */

.hub-nav {

    margin: 3rem 0;

}



.hub-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1.5rem;

}



.hub-card {

    background: white;

    border-radius: var(--border-radius);

    padding: 1.5rem;

    box-shadow: var(--box-shadow);

    transition: var(--transition);

    text-align: center;

}



.hub-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);

}



.hub-card__icon {

    font-size: 2rem;

    margin-bottom: 1rem;

    color: var(--color-primary);

}



.hub-card__title {

    font-family: 'Montserrat', sans-serif;

    font-size: 1.25rem;

    margin-bottom: 0.5rem;

}



.hub-card__link {

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    margin-top: 1rem;

}



.hub-card__link::after {

    content: "→";

    transition: var(--transition);

}



.hub-card__link:hover::after {

    transform: translateX(4px);

}



/* Trust Section */

.trust-section {

    background-color: var(--color-light);

    padding: 3rem 0;

    margin: 3rem 0;

    text-align: center;

}



.trust-section__title {

    font-family: 'Montserrat', sans-serif;

    font-size: 1.75rem;

    margin-bottom: 2rem;

}



.trust-criteria {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    max-width: 900px;

    margin: 0 auto;

}



.criterion {

    text-align: center;

}



.criterion__icon {

    width: 48px;

    height: 48px;

    margin: 0 auto 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--color-primary);

    color: white;

    border-radius: 50%;

    font-size: 1.5rem;

}



.criterion__title {

    font-family: 'Montserrat', sans-serif;

    font-size: 1.125rem;

    margin-bottom: 0.5rem;

}



/* FAQ Section */

.faq-section {

    margin: 3rem 0;

}



.accordion {

    list-style: none;

    max-width: 800px;

    margin: 0 auto;

}



.accordion__item {

    border-bottom: 1px solid #e9ecef;

}



.accordion__question {

    width: 100%;

    padding: 1.5rem 0;

    text-align: left;

    background: none;

    border: none;

    font-family: 'Montserrat', sans-serif;

    font-weight: 600;

    font-size: 1.125rem;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

}



.accordion__question::after {

    content: "+";

    font-size: 1.5rem;

    color: var(--color-gray);

    flex-shrink: 0;

}



.accordion__item[open] .accordion__question::after {

    content: "-";

}



.accordion__answer {

    padding: 0 0 1.5rem;

    color: var(--color-gray);

}