/*
Theme Name: Infield
Theme URI: https://wordpress.com/themes/infield/
Description: A passionate sports fan blog celebrating your favorite game.
Version: 1.0.1
Author: Automattic
Author URI: https://automattic.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: infield
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--secondary);
}

.wp-block-table figcaption {
    font-size: var(--wp--preset--font-size--small);
    text-align: center;
}

* {
    box-sizing: border-box;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
    text-decoration-thickness: 0.0625em !important;
    text-underline-offset: 0.15em;
}

/*
 * Navigation Block
 * Reset the padding from List block
 * https://github.com/WordPress/gutenberg/issues/50486
 */
.wp-block-navigation ul {
    padding: unset;
}

/* ==== LAYOUT & DISPLAY ==== */
.w-full {
    width: 100%;
}
.hidden {
    display: none;
}
.block {
    display: block;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.flex-col {
    flex-direction: column;
}

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.fixed {
    position: fixed;
}

.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* Centering utilities */
.items-start {
    align-items: flex-start;
}
.items-center {
    align-items: center;
}
.items-end {
    align-items: flex-end;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}

/* Max width */
.max-w-\[600px\] {
    max-width: 600px;
}

/* Min width */
.min-w-\[310px\] {
    min-width: 310px;
}

/* Margins */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-10 {
    margin-top: 2.5rem;
}
.mb-4 {
    margin-bottom: 1rem;
}

/* Padding */
.p-0 {
    padding: 0;
}
.pt-6 {
    padding-top: 1.5rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Gaps */
.gap-1 {
    gap: 0.25rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-8 {
    gap: 2rem;
}
.p-4 {
    padding: 1rem;
}
.border-\[1px\] {
    border-width: 1px;
}
.border-navy {
    --tw-border-opacity: 1;
    border-style: solid;
    border-color: rgb(24 48 76 / var(--tw-border-opacity));
}
.border-b-navy {
    --tw-border-opacity: 1;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(24 48 76 / var(--tw-border-opacity, 1));
}
.rounded-\[32px\] {
    border-radius: 32px;
}
.overflow-hidden {
    overflow: hidden;
}
.flex-wrap {
    flex-wrap: wrap;
}

/* Width & height */
.w-1\/2 {
    width: 50%;
}
.w-\[68px\] {
    width: 68px;
}
.w-\[75px\] {
    width: 75px;
}
.w-\[80px\] {
    width: 80px;
}
.w-\[44px\] {
    width: 44px;
}

.h-\[35px\] {
    height: 35px;
}
.h-\[38px\] {
    height: 38px;
}
.h-\[44px\] {
    height: 44px;
}

/* Important width utilities */
.\!w-1\/2 {
    width: 50% !important;
}

/* Z-index */
.z-\[100\] {
    z-index: 100;
}
.z-50 {
    z-index: 50;
}

/* Position helpers */
.top-full {
    top: 100%;
}
.-left-24 {
    left: -6rem;
}

/* ==== COLORS ==== */
.bg-\[\#06020d\] {
    background-color: #06020d;
}
.bg-\[\#18304C\] {
    background-color: #18304c;
}
.bg-\[\#6B47ED\] {
    background-color: #6b47ed;
}

.border {
    border-width: 1px;
    border-style: solid;
}
.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-\[\#1A2F4A\] {
    border-color: #1a2f4a;
}
.border-b-\[\#0E2137\] {
    border-bottom-color: #0e2137;
}

.text-white {
    color: #ffffff;
}
/* Guessing icy-mist; adjust to your brand color if different */
.text-icy-mist {
    color: #e1eaf2;
}
.text-\[\#18304C\] {
    color: #18304c;
}

/* ==== TYPOGRAPHY ==== */
.inter-medium {
    font-weight: 500;
} /* adjust if needed */
.text-lg {
    font-size: 1.125rem;
}
.text-\[12px\] {
    font-size: 12px;
}
.text-\[16px\] {
    font-size: 16px;
}
.text-\[18px\] {
    font-size: 18px;
}

.uppercase {
    text-transform: uppercase;
}

/* Hover utilities that appeared as classes (like hover:underline) */
.hover\:underline:hover {
    text-decoration: underline;
}

/* ==== RADIUS ==== */
.rounded-\[16px\] {
    border-radius: 16px;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-\[999px\] {
    border-radius: 999px;
}

/* ==== TRANSITIONS & TRANSFORMS ==== */
.transition-all {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.transition-transform {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}

.ease-in-out {
    transition-timing-function: ease-in-out;
}

.rotate-180 {
    transform: rotate(180deg);
}
.translate-y-0 {
    transform: translateY(0);
}
.-translate-y-2 {
    transform: translateY(-0.5rem);
}

/* Opacity & visibility */
.opacity-100 {
    opacity: 1;
}
.opacity-0 {
    opacity: 0;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}

/* ==== ICON PLACEHOLDERS ==== */
.logo-virgopay {
    display: inline-block;
    /* you can size or add background-image here */
}

.icon-up-arrow,
.icon-paper-plane,
.icon-transaction,
.icon-redirection,
.icon-file {
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* ==== MOBILE HEADER WRAPPER ==== */
.mobile-header-wrapper {
    top: 0;
}

/* Mobile menu toggle base */
.mobile-menu-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ==== HAMBURGER (approx from your module CSS) ==== */
.hamburger_box {
    display: inline-block;
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger_inner,
.hamburger_inner::before,
.hamburger_inner::after {
    width: 24px;
    height: 2px;
    background-color: white;
    position: absolute;
    left: 0;
    transition: all 0.3s;
}

.hamburger_inner {
    top: 8px;
}

.hamburger_inner::before {
    content: "";
    top: -6px;
}

.hamburger_inner::after {
    content: "";
    top: 6px;
}

/* Active state */
.hamburger_inner_active {
    background-color: transparent;
}

.hamburger_inner_active::before {
    transform: rotate(45deg);
    top: 0;
}

.hamburger_inner_active::after {
    transform: rotate(-45deg);
    top: 0;
}

/* ==== DROPDOWN MENU BEHAVIOR HELPERS (for your JS) ==== */
/* When you add JS, you can toggle these classes on the dropdown container */
.buy-sell-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
}

.buy-sell-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==== RESPONSIVE (sm:) CLASSES ==== */
/* Tailwind sm: = min-width: 800px */
@media (min-width: 800px) {
    .sm\:block {
        display: block;
    }
    .sm\:hidden {
        display: none;
    }

    .sm\:border-b {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .sm\:border-b-\[1px\] {
        border-bottom-width: 1px;
    }
    .sm\:border-b-navy {
        border-bottom-color: #06020d;
    }

    .sm\:w-\[1280px\] {
        width: 1280px;
    }

    .sm\:\!w-fit {
        width: fit-content !important;
    }

    .sm\:w-\[80px\] {
        width: 80px;
    }
    .sm\:h-\[38px\] {
        height: 38px;
    }
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.no-underline {
    text-decoration-line: none;
}

.cursor-pointer {
    cursor: pointer;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

a:hover {
    color: #40a9ff;
}

.has-accent-1-background-color {
    background-color: #06020d !important;
}

/* ======================
   HAMBURGER BASE
   ====================== */

/* Container for the 3 lines */
.hamburger-box {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
}

/* The middle line */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

/* Center bar */
.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

/* Top bar */
.hamburger-inner::before {
    top: -8px;
}

/* Bottom bar */
.hamburger-inner::after {
    top: 8px;
}

/* ======================
   ACTIVE STATE (OPEN)
   ====================== */

.hamburger-inner-active {
    background-color: transparent !important; /* hide middle line */
}

.hamburger-inner-active::before {
    top: 0;
    transform: rotate(45deg);
}

.hamburger-inner-active::after {
    top: 0;
    transform: rotate(-45deg);
}