/* =============================================================================
   Template Name : The Vault — Escape Room HTML Template
   File          : assets/css/components.css
   Author        : VaultStudio
   Version       : 1.0.0
   Description   : Reusable Tailwind @layer component classes.
                   These classes are consumed throughout the HTML templates
                   and ensure design consistency across all pages.
   =============================================================================

   TABLE OF CONTENTS
   -----------------
    1.  Primary Button Variants
    2.  Outline Button Variants
    3.  Section Label

   ============================================================================= */

@layer components {

    /* =========================================================================
       1. PRIMARY BUTTON VARIANTS
       Solid brand-red buttons with a white hover state.
       Three sizes: default (responsive), desktop-only, and small.
       ========================================================================= */

    /* TODO: To change the primary button color, replace 'bg-brand-red' with
             another Tailwind color (e.g., bg-emerald-500) and update the
             matching color in tailwind.config inside each HTML file.
             You must update all three .tx-btn-primary variants below. */

    /* Default — responsive padding  (used on most pages) */
    .tx-btn-primary {
        @apply bg-brand-red text-white font-mono font-bold px-4 md:px-10 py-4 md:py-5 text-sm uppercase tracking-widest
               hover:bg-white hover:text-black transition-colors duration-300;
        /* TODO: To change the hover state, replace hover:bg-white hover:text-black with
                 hover:bg-brand-red/80 for a subtler tint effect. */
    }

    /* Desktop-only — fixed large padding (used when mobile is handled separately) */
    .tx-btn-primary-desktop {
        @apply bg-brand-red text-white font-mono font-bold px-10 py-5 text-sm uppercase tracking-widest
               hover:bg-white hover:text-black transition-colors duration-300;
    }

    /* Small — compact padding (used in inline CTAs and card footers) */
    .tx-btn-primary-sm {
        @apply bg-brand-red text-white font-mono font-bold px-8 py-4 text-sm uppercase tracking-widest
               hover:bg-white hover:text-black transition-colors duration-300;
        /* TODO: To reduce this button further (e.g., for a chip-style CTA),
                 change px-8 py-4 to px-5 py-2 and text-sm to text-xs. */
    }


    /* =========================================================================
       2. OUTLINE BUTTON VARIANTS
       Transparent buttons with a white/brand-red border and hover effect.
       Two sizes: default and small.
       ========================================================================= */

    /* TODO: To change the outline button border opacity, update border-white/40
             (e.g., border-white/60 for a stronger border). */
    /* TODO: To change the hover color, replace hover:border-brand-red and
             hover:text-brand-red with your preferred color. */

    /* Default outline */
    .tx-btn-outline {
        @apply border border-white/40 text-white font-mono font-bold px-10 py-5 text-sm uppercase tracking-widest
               hover:border-brand-red hover:text-brand-red transition-colors duration-300;
    }

    /* Small outline */
    .tx-btn-outline-sm {
        @apply border border-white/40 text-white font-mono font-bold px-8 py-4 text-sm uppercase tracking-widest
               hover:border-brand-red hover:text-brand-red transition-colors duration-300;
    }


    /* =========================================================================
       3. SECTION LABEL
       Small mono-spaced label that appears above section headings.
       Includes a "// " prefix added via CSS content to signal a code/terminal
       aesthetic. Example: "// Active Operations"
       ========================================================================= */

    /* TODO: To change the label text color, update text-brand-red to another color.
             Remember to also update the light mode override in style.css
             under the html.tx-light-mode .tx-section-label rule. */
    /* TODO: To increase the letter spacing (wider look), change tracking-[0.4em]
             to a larger value (e.g., tracking-[0.6em]). */
    /* TODO: To remove the "// " prefix, delete the ::before pseudo-element block below. */
    .tx-section-label {
        @apply font-mono text-brand-red text-xs tracking-[0.4em] uppercase;
        /* TODO: Change text-brand-red here to update all section labels site-wide. */
    }

    .tx-section-label::before {
        content: "// ";
        /* TODO: To use a different prefix character (e.g., "➤ " or "# "),
                 replace "// " with your preferred string. */
    }
}