/* ================================
   Global Fonts (already included)
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
@font-face {
    font-family: 'Headline';
    src: url('/wp-content/themes/mkrst-child/assets/fonts/headline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: var(--font-primary);
    font-size:16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ================================
   CSS Variables / Custom Properties
   ================================ */
:root {
    /* Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-light: #e0e0e0;
    --color-gray-lighter: #e6e6e6;
    --color-gray-border: #d9d9d9;
    --color-gray-text: #aaa;
    --color-gray-dark: #333;
    --color-gray-footer: #ddd;
    --color-gray-strong: #b1b1b1;
    --color-border-dark: #222;
    --color-border-darker: #1f1f1f;
    --color-purple: #7A00FF;
    --color-dark-blue: #1b005f;
    
    /* Typography */
    --font-primary: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;

  /* Font families */
  --font-primary: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Base size */
  --font-size-base: 1rem; /* 16px */

  /* Heading scale (1.25 modular scale) */
  --font-size-h1: 2.5rem;  /* 40px */
  --font-size-h2: 2rem;    /* 32px */
  --font-size-h3: 1.75rem; /* 28px */
  --font-size-h4: 1.5rem;  /* 24px */
  --font-size-h5: 1.25rem; /* 20px */
  --font-size-h6: 1.125rem;/* 18px */

  /* Body sizes */
  --font-size-body: 1rem;   /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-tiny: 0.75rem;   /* 12px */

  /* Line heights */
  --line-height-base: 1.6;
  --line-height-heading: 1.2;
    
    /* Layout */
    --container-max: 1440px;
    --container-padding: 1.5rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
}

/* ================================
   Reusable Components
   ================================ */

/* Container utility */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

/* Button base styles */
.button,
.wp-element-button,
.wp-block-button__link,
button[type="submit"] {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Half-and-half columns (Reusable) */
.columns-half {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.columns-half > div {
    padding: var(--spacing-md);
}

/* Optional center divider for columns */
.columns-half--divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 860px) {
    .columns-half {
        grid-template-columns: 1fr;
    }
    
    .columns-half--divider::before {
        display: none;
    }
}

/* ================================
   Button Variables
   ================================ */
:root {
    /* Button Colors */
    --btn-color-white: #ffffff;
    --btn-color-black: #000000;
    --btn-color-primary: var(--color-purple, #7A00FF);
    
    /* Button Sizes */
    --btn-height-sm: 36px;
    --btn-height-md: 44px;
    --btn-height-lg: 52px;
    --btn-height-xl: 60px;
    
    /* Button Padding */
    --btn-padding-sm: 0.5rem 0.5rem;
    --btn-padding-md: 0.75rem 0.75rem;
    --btn-padding-lg: 1rem 1rem;
    --btn-padding-xl: 1.25rem 1.25rem;
    
    /* Button Font Sizes */
    --btn-font-sm: 0.875rem;
    --btn-font-md: 1rem;
    --btn-font-lg: 1.125rem;
    --btn-font-xl: 1.25rem;
    
    /* Button Borders */
    --btn-border-width: 1px;
    --btn-border-radius: 0px;
    
    /* Button Transitions */
    --btn-transition: all 0.3s ease;
}

/* ================================
   Base Button Styles
   ================================ */
.btn,
.btn-outline,
.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -0.025rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--btn-transition);
    border: var(--btn-border-width) solid;
    border-radius: var(--btn-border-radius);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    
    /* Default size (medium) */
    height: var(--btn-height-md);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-md);
}

/* Ensure button text doesn't get underlined on hover */
.btn:hover,
.btn-outline:hover,
.btn-solid:hover {
    text-decoration: none;
}

/* ================================
   Button Variants
   ================================ */

/* Outline Button (White on Dark) */
.btn-outline {
    background: transparent;
    color: var(--btn-color-white);
    border-color: var(--btn-color-white);
}

.btn-outline:hover {
    background: var(--btn-color-white);
    color: var(--btn-color-black);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Outline Dark (Black on Light) */
.btn-outline--dark {
    background: transparent;
    color: var(--btn-color-black);
    border-color: var(--btn-color-black);
}

.btn-outline--dark:hover {
    background: var(--btn-color-black);
    color: var(--btn-color-white);
}

/* Solid Button */
.btn-solid {
    background: var(--btn-color-white);
    color: var(--btn-color-black);
    border-color: var(--btn-color-white);
}

.btn-solid:hover {
    background: transparent;
    color: var(--btn-color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* Solid Dark */
.btn-solid--dark {
    background: var(--btn-color-black);
    color: var(--btn-color-white);
    border-color: var(--btn-color-black);
}

.btn-solid--dark:hover {
    background: transparent;
    color: var(--btn-color-black);
}

/* Primary/Purple Button */
.btn-primary {
    background: var(--btn-color-primary);
    color: var(--btn-color-white);
    border-color: var(--btn-color-primary);
}

.btn-primary:hover {
    background: transparent;
    color: var(--btn-color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(122, 0, 255, 0.3);
}

/* ================================
   Button Sizes
   ================================ */

/* Small */
.btn--sm {
    height: var(--btn-height-sm);
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
}

/* Medium (default, no class needed) */
.btn--md {
    height: var(--btn-height-md);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-md);
}

/* Large */
.btn--lg,
.btn--lge {
    height: var(--btn-height-lg);
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-lg);
}

/* Extra Large */
.btn--xl {
    height: var(--btn-height-xl);
    padding: var(--btn-padding-xl);
    font-size: var(--btn-font-xl);
}

/* ================================
   Button Width Variants
   ================================ */

/* Full Width */
.btn--full,
.btn-outline--full {
    width: 100%;
}

/* Fixed Width */
.btn--fixed {
    min-width: 200px;
}

.btn--fixed-lg {
    min-width: 280px;
}

/* ================================
   Button Icon Support
   ================================ */
.btn__icon,
.btn-outline__icon {
    display: inline-flex;
    align-items: center;
    font-size: 1.2em;
    margin-left: 0.25rem;
}

/* Arrow icon */
.btn__arrow {
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn:hover .btn__arrow,
.btn-outline:hover .btn__arrow {
    transform: translateX(4px);
}

/* ================================
   Button Group
   ================================ */
.btn-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.btn-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.btn-group--centered {
    align-items: center;
    margin: 0 auto;
}

/* ================================
   Footer Specific Button Styles
   ================================ */
.footer .btn-outline,
.footer-buttons .btn-outline {
    /* Ensure buttons look correct on black background */
    background: transparent;
    color: var(--btn-color-white);
    border-color: var(--btn-color-white);
}

.footer .btn-outline:hover,
.footer-buttons .btn-outline:hover {
    background: var(--btn-color-white);
    color: var(--btn-color-black);
}

/* Footer button container */
.footer-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 320px;
    margin: 2rem 0;
}

.footer-buttons .btn-outline {
    width: 100%;
    justify-content: space-between;
    text-align: left;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 768px) {
    /* Make buttons slightly smaller on mobile */
    .btn--lg,
    .btn--lge {
        height: var(--btn-height-md);
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-md);
    }
    
    .btn--xl {
        height: var(--btn-height-lg);
        padding: var(--btn-padding-lg);
        font-size: var(--btn-font-lg);
    }
    
    /* Stack button groups on mobile */
    .btn-group--horizontal {
        flex-direction: column;
    }
}

/* ================================
   Button State Styles
   ================================ */
.btn:disabled,
.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn:focus-visible,
.btn-outline:focus-visible {
    outline: 2px solid var(--btn-color-primary);
    outline-offset: 2px;
}

/* Loading state */
.btn--loading {
    color: transparent;
    pointer-events: none;
}

.btn--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}


/* Modal Full Page on Mobile */