/**
 * Universal Responsive CSS Enhancer
 * Version 1.0.0
 * License: MIT
 <link rel="stylesheet" href="https://raw.githubusercontent.com/Khuzema-code/abcdefghijklmnopqrstuvwxyz/main/responsiver.css">

 */

/* ==========================================================================
   1. Root and Typography Scaling
   ========================================================================== */
:root {
  --size-base: 16px;
  --size-min: 12px;
  --size-max: 24px;
  --size-scale: 1vw;

  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
  --breakpoint-ultra: 2560px;

  --ratio-standard: 16/9;
  --ratio-square: 1/1;
  --ratio-portrait: 9/16;
}

html {
  font-size: clamp(var(--size-min), var(--size-scale), var(--size-max));
}

body {
  line-height: 1.6;
  word-wrap: break-word;
  box-sizing: border-box;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   2. Typography Elements
   ========================================================================== */
h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.75rem); }
h5 { font-size: clamp(1rem, 2vw, 1.5rem); }
h6 { font-size: clamp(0.9rem, 1.8vw, 1.25rem); }
p, li, a, label, span {
  font-size: clamp(0.875rem, 1.6vw, 1.125rem);
}

/* ==========================================================================
   3. Responsive Dimension Fixes (Inline + Attributes)
   ========================================================================== */
[style*="px"], 
[width], 
[height], 
[style*="width:"], 
[style*="height:"] {
  max-width: 100% !important;
  height: auto !important;
}

[style*="width"]:not([style*="%"]) {
  width: clamp(
    calc(var(--min-width, 100px) * 0.8),
    calc(var(--responsive-width, 80vw)),
    var(--max-width, 100%)
  ) !important;
}

[style*="height"]:not([style*="%"]) {
  height: auto !important;
  min-height: clamp(
    calc(var(--min-height, 100px) * 0.8),
    calc(var(--responsive-height, 80vh)),
    var(--max-height, 100%)
  ) !important;
}

[width="300"], [width="300px"], [style*="width:300px"] {
  width: clamp(250px, 80vw, 300px) !important;
}

[width="500"], [width="500px"], [style*="width:500px"] {
  width: clamp(300px, 90vw, 500px) !important;
}

/* ==========================================================================
   4. Block Elements & Common Layout Classes
   ========================================================================== */
div, section, article, aside {
  max-width: 100% !important;
  width: auto !important;
  overflow-x: auto !important;
  box-sizing: border-box;
}

.content, .main, .section, .fixed-width, .box, .wrapper {
  width: 100% !important;
  max-width: clamp(300px, 90vw, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Containers */
[class*="container"], [class*="wrapper"] {
  width: 100% !important;
  max-width: clamp(300px, 90vw, 1400px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(0.5rem, 3vw, 2rem) !important;
}

/* ==========================================================================
   5. Media Elements
   ========================================================================== */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--ratio-standard);
}

img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* ==========================================================================
   6. Spacing Overrides
   ========================================================================== */
[style*="padding"], [style*="margin"] {
  padding: clamp(0.5rem, 2vw, 1.5rem) !important;
  margin: clamp(0.5rem, 2vw, 1.5rem) !important;
}

/* ==========================================================================
   7. Flex/Grid Auto-Scaling
   ========================================================================== */
[style*="grid-template-columns"], 
[style*="flex"] {
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 300px), 1fr)) !important;
  gap: clamp(0.5rem, 2vw, 1.5rem) !important;
}

/* ==========================================================================
   Footer Responsiveness Fix
   ========================================================================== */

footer, [class*="footer"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: clamp(1rem, 3vw, 2rem) !important;
  margin-top: clamp(1rem, 5vw, 3rem) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  display: block !important;
  flex-wrap: wrap !important;
  font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
}

/* Make inner elements of footer wrap responsively */
footer *, [class*="footer"] * {
  max-width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box;
  overflow-x: auto;
}


/* ==========================================================================
   8. Forms
   ========================================================================== */
input, textarea, select, button {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important;
  padding: clamp(0.5rem, 1.5vw, 1rem) !important;
}

/* ==========================================================================
   9. Responsive Root Scale by Breakpoint
   ========================================================================== */
@media (min-width: 320px) {
  :root { --size-scale: 1.2vw; }
}
@media (min-width: 768px) {
  :root { --size-scale: 1vw; }
  [style*="width"]:not([style*="%"]) {
    --responsive-width: 70vw;
  }
}
@media (min-width: 1024px) {
  :root { --size-scale: 0.8vw; }
  [style*="width"]:not([style*="%"]) {
    --responsive-width: 60vw;
  }
}
@media (min-width: 1440px) {
  :root { --size-scale: 0.6vw; }
  [style*="width"]:not([style*="%"]) {
    --responsive-width: 50vw;
  }
}
@media (min-width: 2560px) {
  :root {
    --size-scale: 0.4vw;
    --size-max: 28px;
  }
}

/* ==========================================================================
   10. Optional Dark Mode Support
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark light;
  }
  body {
    background-color: #111;
    color: #eee;
  }
}

/* ==========================================================================
   11. IE11 Fallback
   ========================================================================== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  [style*="width"]:not([style*="%"]) {
    width: 90% !important;
  }
  [style*="height"]:not([style*="%"]) {
    height: auto !important;
  }
}

/* ==========================================================================
   12. Print Styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  [style*="width"]:not([style*="%"]) {
    width: 100% !important;
  }
}

/* ==========================================================================
   1. Bootstrap Grid Fixes
   ========================================================================== */

/* Fix Bootstrap container widths */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(0.5rem, 3vw, 2rem) !important;
  padding-right: clamp(0.5rem, 3vw, 2rem) !important;
  box-sizing: border-box !important;
}

/* Fix Bootstrap columns */
[class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box;
}

/* Bootstrap rows */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force .img-fluid behavior on images */
img.img-fluid {
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   2. Tailwind Utility Overrides
   ========================================================================== */

/* Fix Tailwind's fixed widths like w-[1000px] */
[class*="w-["] {
  width: clamp(300px, 90vw, 1000px) !important;
  max-width: 100% !important;
}

/* Force max-width override if needed */
[class*="max-w-["] {
  max-width: 100% !important;
}

/* Fix Tailwind container if not responsive */
.container {
  width: 100% !important;
  max-width: clamp(300px, 90vw, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 5vw, 2rem) !important;
  padding-right: clamp(1rem, 5vw, 2rem) !important;
}

/* Tailwind image + video defaults */
img, video {
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   3. Utility-Based Class Normalizations
   ========================================================================== */

/* Fix common utility widths */
[class*="w-1/"], [class*="w-2/"], [class*="w-full"] {
  max-width: 100% !important;
}

/* Force responsiveness on any height class */
[class*="h-["] {
  height: auto !important;
  max-height: 100% !important;
}

/* Overflow and positioning sanitization */
[class*="absolute"], [class*="fixed"] {
  position: relative !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
}

/* ==========================================================================
   4. Utility Debugging Helpers (optional for dev)
   ========================================================================== */
/* Uncomment during development
* {
  outline: 1px dashed rgba(0, 255, 255, 0.15);
}
*/

/* ==========================================================================
   5. Framework Interop Fallbacks
   ========================================================================== */

/* Handle both frameworks side-by-side */
[class*="container"], [class*="wrapper"], [class*="row"], [class*="grid"], [class*="flex"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  flex-wrap: wrap !important;
}

/* ==========================================================================
   6. Safe Reset for Margin/Padding Utilities
   ========================================================================== */
[class*="p-"], [class*="px-"], [class*="pl-"], [class*="pr-"],
[class*="m-"], [class*="mx-"], [class*="ml-"], [class*="mr-"] {
  padding: clamp(0.25rem, 1vw, 1rem) !important;
  margin: clamp(0.25rem, 1vw, 1rem) !important;
}