/* ------------------------------------------------------------------
   1) Imports & CSS Variables
------------------------------------------------------------------- */

@import url("https://use.typekit.net/wrw0qeg.css");

:root {
  --global-primary-text-color: #000000;
  --global-primary-font-family: "neue-kabel", Arial, Helvetica, sans-serif;
  /* NOTE: var(--global-senary-accent-colour) is referenced below but not defined here. */
}


/* ------------------------------------------------------------------
   2) Base / Resets / Global
------------------------------------------------------------------- */

body { /* Global page base styles */
  font-family: var(--global-primary-font-family) !important;
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Radial gradient backdrop fixed behind everything */
body::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  padding-bottom: calc(var(--vh, 1vh) * 100);
  z-index: -1;
  background: radial-gradient(
    circle,
    rgb(100, 173, 217) 13%,
    rgb(66, 149, 202) 25%,
    rgb(30, 123, 187) 50%,
    rgb(21, 116, 183) 100%
  );
}


/* ------------------------------------------------------------------
   3) Layering / Background Textures
------------------------------------------------------------------- */

.bg-background { /* Ensure content sits above page backdrop */
  position: relative;
  z-index: 1;
  background:linear-gradient(180deg, #0b7cc1 0%, #2d93db 100%);
}

/* Site-wide tiled background, subtle overlay */
.bg-background::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("https://www.monopolylifesized.com/app/themes/Farlo/dist/assets/media/site-background.png");
  background-repeat: repeat;
  background-size: 700px 700px;
  mix-blend-mode: hard-light;
  opacity: 0.5;
}

/* Header: gradient bar with texture overlay */
header {
  position: relative;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(180deg, #eb1f30 0%, #85121b 100%);
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.monopolylifesized.com/app/themes/Farlo/dist/assets/media/site-background.webp");
  background-repeat: repeat;
  background-size: 700px auto;
  mix-blend-mode: saturation;
}

/* Stacking context helper */
.container {
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------------
   4) Typography & Color Utilities
------------------------------------------------------------------- */

.text-primary { /* Brand red text */
  color: #de082a;
}

/* Keep this ultra-specific utility override as provided */
.text-muted-foreground {
  color: #000c2f;
  font-size: 16px;
}

/* Very specific selector from original; preserving behavior */
.text-sm.text-primary.font-semibold.flex.items-center.pt-2 {
  color: #000000;
}

/* SVG utility: override tailwind-like green stroke to brand red */
svg.text-green-500 {
  stroke: #de082a;
}


/* ------------------------------------------------------------------
   5) Cards & Containers
------------------------------------------------------------------- */

/* Squared cards with border when these combos appear inside .container */
.container .bg-card.text-card-foreground,
.container .bg-card.text-center {
  border: 3px solid #000;
  border-radius: 0;
}

/* Generic .bg-card inside .container: square corners */
.container .bg-card {
  border-radius: 0;
}

/* White boxed cards inside a .space-y-4 stack */
.space-y-4 .border.rounded-lg {
  background-color: #ffffff;
  border: 3px solid #000;
  border-radius: 0;
}

/* Headings inside that stack: white text (assuming dark bg layer) */
.space-y-4 .text-2xl {
  color: #ffffff;
}

.space-y-4 .text-2xl.items-center {
  color:#fff;
}


/* ------------------------------------------------------------------
   6) Links & Buttons
------------------------------------------------------------------- */

/* Primary CTA link button */
a.bg-primary {
  /* Layout */
  display: block;               /* removed duplicate display */
  width: max-content;
  margin: 0 auto;

  /* Box */
  position: relative;
  border: none;
  border-radius: 0 !important;  /* keep sharp edges per original */
  box-shadow: 1px 4px 4px 0 rgba(0, 0, 0, 0.25);
  outline: none;

  /* Spacing & Typography */
  padding: 10px 15px; 
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  font-family: var(--global-primary-font-family);
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff !important;
  cursor: pointer;
  font-size:14px;
  z-index: 1;

  /* Color/Background (fallback + gradient) */
  background-color: #eb9b0e;    /* fallback solid */
  background-image: linear-gradient(
    94deg,
    #fbbb2c 2.06%,
    #f77d22 16.47%,
    var(--global-senary-accent-colour) 37.06%,
    #fbbb2c 54.04%,
    #f77d22 77.72%,
    var(--global-senary-accent-colour) 101.91%
  );
}

a.bg-primary::before { /* Inner bevel/shine */
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: linear-gradient(180deg, #f77d22 0%, #fbbb2c 89.77%);
}

a.bg-primary:hover {
  /* remove outer hard shadow, add inset glow */
  box-shadow:
    1px 2px 0 1px rgba(0, 0, 0, 0),
    0 0 10px 0 #000c2f inset;
}

/* Button base (was .rounded-md but we square it) */
button.rounded-md {
  appearance: none;
  border: none;
  border-radius: 0 !important;  /* unified */
  box-shadow: 1px 4px 4px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  margin: 0 auto;
  outline: none;

  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  font-family: var(--global-primary-font-family);
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;

  transition: all 0.3s;
}

button.rounded-md:hover {
  box-shadow: 1px 4px 4px 0 rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

/* Green variant */
button.rounded-md.bg-green-500 {
  background-color: #00ab67;
}
button.rounded-md.bg-green-500:hover {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Accent variant (utility) */
button.bg-accent {
  background-color: #fbbb2c !important;
}


/* ------------------------------------------------------------------
   7) Media
------------------------------------------------------------------- */

img.rounded-md {
  position: relative;
  margin-bottom: 40px;
  border: 9px solid #ffffff;
  border-radius: 6px; /* keep the image with soft corners */
  background: var(--global-primary-colour);
  box-shadow: 0 2.527px 10.489px 0 rgba(0, 0, 0, 0.4);
}

video.object-cover {
  border-bottom: 4px solid #000;
}


/* ------------------------------------------------------------------
   8) Forms
------------------------------------------------------------------- */

input {
  border: none;
  border-bottom: 3px solid #000 !important;
  border-radius: 0 !important;
  background-color: hsl(var(--secondary)) !important;

}

  input.bg-background {
    background:#e5e5e5!important;
  }


/* ------------------------------------------------------------------
   9) Tables
------------------------------------------------------------------- */

table span {
  font-size: 22px;
  font-weight: 600 !important;
  color: #000000; /* fixed from 'font-color' */
  font-family: var(--global-primary-font-family) !important;
}


/* ------------------------------------------------------------------
   10) Overrides / Utilities
------------------------------------------------------------------- */

/* Force fully rounded utilities to be squared instead */
.rounded-full {
  border-radius: 0 !important;
}

/* Footer text color */
footer {
  color: #ffffff !important;
}