/**
 * Global CSS.
 * 
 * It holds all the repeatitive style.
 *
 * @package roofing
 * @author Masood HQ <hey@masoodhq.com>
 * @version 1.0
 */

:root {
  /* Font Family */
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-secondary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Font Sizes */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.25rem;      /* 20px */
  --fs-xl: 1.5rem;       /* 24px */
  --fs-xl-plus: 1.75rem; /* 28px */
  --fs-xxl: 2rem;        /* 32px */
  --fs-xxxl: 2.5rem;     /* 40px */
  --fs-huge: 3rem;       /* 48px */

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.6;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;

  /* Colors */
  --color-primary: #6366F1;
  --color-secondary: #0F1C23;
  --color-heading: #1a1a2e;
  --color-warning: #ffc107;
  --color-text: #2d2f45;
  --color-description: #676993;
  --color-light-bg: #F8FAFC;
  --color-bg: #ffffff;
  --color-border: #d1d1ff45;
  --color-border-solid: #E2E8F0;
  --color-border-focus: #d1d1ff;
  --color-overlay: rgba(0, 0, 0, 0.6);

  /* Frozen copies of the tokens above, always resolved against this :root
     value no matter what redeclares --color-heading/text/description/border*
     further down the tree (e.g. the .bg-dark utility class in
     roofing-kit/assets/css/utility-classes.css). A custom property declared
     as var(--x) freezes to --x's value at the element that declares it, so
     these always carry the real Customizer color regardless of section.
     Components that always render on their own fixed light surface (cards,
     badges, the form card, FAQ items...) reset back to these so their
     contents stay readable inside a dark section. */
  --color-heading-fixed: var(--color-heading);
  --color-text-fixed: var(--color-text);
  --color-description-fixed: var(--color-description);
  --color-border-fixed: var(--color-border);
  --color-border-solid-fixed: var(--color-border-solid);

  /* Spacing scale */
  --space-3xs: 0.125rem;  /* 2px */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.25rem;    /* 20px */
  --space-xl: 1.5rem;     /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 2.5rem;    /* 40px */
  --space-4xl: 3rem;      /* 48px */

  /* Layout */
  --container-max: 77.5rem;       /* 1240px */
  --container-padding: 1.875rem;  /* 30px */
  --content-max: 75rem;           /* 1200px */
  --grid-gutter: 0.9375rem;       /* 15px */

  /* Border Radius */
  --radius-xs: 0.25rem;    /* 4px */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-pill: 3.125rem; /* 50px */
  --radius-round: 50%;

  /* Shadows */
  --shadow-color-soft: rgba(0, 0, 0, 0.05);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-strong: rgba(0, 0, 0, 0.15);

  --shadow-xs: 0 0.125rem 0.125rem var(--shadow-color-soft);
  --shadow-sm: 0 0.0625rem 0.1875rem var(--shadow-color);
  --shadow-soft: 0 0.25rem 0.375rem var(--shadow-color-soft);
  --shadow-md: 0 0.25rem 0.375rem var(--shadow-color);
  --shadow-lg: 0 0.625rem 0.9375rem var(--shadow-color-strong);
  --shadow-xl: 0 0.625rem 1.875rem var(--shadow-color-soft);
  --shadow-hover: 0 0.5rem 1.25rem var(--shadow-color-strong);
  --shadow-drawer: -0.0625rem 0 0.25rem var(--shadow-color);

  /* Border */
  --border-light: 1px solid var(--color-border);
  --border-dark: 1px solid var(--color-heading);
  --border-solid: 1px solid var(--color-border-solid);

  /* Form */
  --form-input-bg: var(--color-bg);
  --form-input-color: var(--color-heading);
  --form-input-font-size: var(--fs-base);
  --form-input-padding: 0 var(--space-md);
  --form-input-padding-block: var(--space-sm) var(--space-md);
  --form-input-radius: var(--radius-sm);
  --form-input-height: 2.5rem;    /* 40px */
  --form-input-border: var(--border-light);
  --form-input-border-focus: 1px solid var(--color-border-focus);
  --form-input-transition: all 0.2s ease;
  --form-input-placeholder: #999;
}

/**
 * Fluid semantic tokens (roofkit widgets).
 *
 * clamp()-based tokens for scalar properties (font-size, spacing, icon size)
 * so widget sizing scales smoothly with the viewport instead of jumping at
 * fixed breakpoints. Named by content role, not by scale step.
 * Radius/shadow/border variants intentionally reuse the static scale above
 * (--radius-*, --shadow-*, --border-*) instead of new clamp tokens, since
 * those properties don't benefit from viewport-fluid scaling.
 */
:root {
  /* Typography */
  --eyebrow-size:          clamp(0.75rem, 0.708rem + 0.167vw, 0.875rem);   /* 12-14px: badge sm, chamber badge */
  --small-text-size:       clamp(0.875rem, 0.854rem + 0.083vw, 0.9375rem); /* 14-15px: secondary text */
  --body-text-size:        clamp(1rem, 0.958rem + 0.167vw, 1.125rem);      /* 16-18px: default body copy */
  --card-title-size:       clamp(1.125rem, 1.083rem + 0.167vw, 1.25rem);   /* 18-20px: card/item headings */
  --subsection-title-size: clamp(1.25rem, 1.167rem + 0.333vw, 1.5rem);     /* 20-24px: sub-section/form titles */
  --section-title-size:    clamp(1.75rem, 1.5rem + 1vw, 2.5rem);           /* 28-40px */
  --hero-title-size:       clamp(2rem, 1.667rem + 1.333vw, 3rem);          /* 32-48px */
  --stat-number-size:      clamp(2rem, 1.5rem + 2vw, 3.5rem);              /* 32-56px: counter */

  /* Spacing */
  --block-gap:       clamp(1rem, 0.833rem + 0.667vw, 1.5rem);   /* 16-24px */
  --card-padding:    clamp(1.25rem, 1rem + 1vw, 2rem);          /* 20-32px */
  --card-gap:        clamp(1rem, 0.833rem + 0.667vw, 1.5rem);   /* 16-24px, for future grid parents */
  --section-spacing: clamp(2.5rem, 1.5rem + 5vw, 5rem);         /* 40-80px, for future section wrappers */

  /* Large spacing scale - fluid so the big utility-class steps (Spacing /
     Gap 5XL-8XL) don't force their full desktop value on small screens.
     Each one's mobile floor reuses a value from the base --space-* scale
     above (xl/2xl/3xl/4xl) - distinct steps on mobile too, not just on
     desktop, while still noticeably smaller than the desktop max. */
  --space-5xl: clamp(1.5rem, 0.75rem + 3vw, 3.75rem);   /* 24-60px */
  --space-6xl: clamp(2rem, 1rem + 4vw, 5rem);           /* 32-80px */
  --space-7xl: clamp(2.5rem, 1.25rem + 5vw, 6.25rem);   /* 40-100px */
  --space-8xl: clamp(3rem, 1.5rem + 6vw, 7.5rem);       /* 48-120px */

  /* Section spacing scale - vertical rhythm between sections (margin-top /
     margin-bottom only, see the "Margin Top" / "Margin Bottom" utility
     classes), deliberately a separate, larger scale from --space-*. Same
     proportional-floor approach as the scale above. */
  --section-spacing-sm: clamp(1.5rem, 0.75rem + 3vw, 3.75rem);     /* 24-60px */
  --section-spacing-md: clamp(2.25rem, 1.125rem + 4.5vw, 5.625rem); /* 36-90px */
  --section-spacing-lg: clamp(3rem, 1.5rem + 6vw, 7.5rem);         /* 48-120px */

  /* Icon size */
  --icon-size-xs:     clamp(0.875rem, 0.833rem + 0.167vw, 1rem);    /* 14-16px */
  --icon-size-sm:     clamp(1rem, 0.917rem + 0.333vw, 1.25rem);     /* 16-20px */
  --icon-size-md:     clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);    /* 22-28px */
  --icon-size-lg:     clamp(1.75rem, 1.583rem + 0.667vw, 2.25rem);  /* 28-36px */
  --icon-box-size-sm: clamp(2.5rem, 2.333rem + 0.667vw, 3rem);      /* 40-48px */
  --icon-box-size-md: clamp(3rem, 2.667rem + 1.333vw, 4rem);        /* 48-64px */
  --icon-box-size-lg: clamp(4rem, 3.667rem + 1.333vw, 5rem);        /* 64-80px */

  /* Button */
  --btn-padding-block-sm:  clamp(0.5rem, 0.458rem + 0.167vw, 0.625rem);
  --btn-padding-inline-sm: clamp(0.875rem, 0.792rem + 0.333vw, 1.125rem);
  --btn-font-size-sm:      clamp(0.8125rem, 0.792rem + 0.083vw, 0.875rem);
  --btn-padding-block-md:  clamp(0.75rem, 0.708rem + 0.167vw, 0.875rem);
  --btn-padding-inline-md: clamp(1.25rem, 1.083rem + 0.667vw, 1.75rem);
  --btn-font-size-md:      clamp(0.875rem, 0.833rem + 0.167vw, 1rem);
  --btn-padding-block-lg:  clamp(1rem, 0.917rem + 0.333vw, 1.25rem);
  --btn-padding-inline-lg: clamp(1.75rem, 1.583rem + 0.667vw, 2.25rem);
  --btn-font-size-lg:      clamp(1rem, 0.958rem + 0.167vw, 1.125rem);

  /* Widget-specific gap-fillers */
  --form-textarea-min-h: clamp(5rem, 4.667rem + 1.667vw, 6.25rem);
  --form-textarea-max-h: clamp(7.5rem, 6.833rem + 3.333vw, 9.0625rem);
  --review-logo-h:       clamp(1.5rem, 1.417rem + 0.333vw, 1.75rem);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-position: outside;
  list-style-type: none;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-secondary);
  line-height: var(--lh-base);
  font-size: var(--fs-base);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-heading);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-tight);
  margin: 0 0 0.75em 0;
}

h1 {
  font-size: var(--fs-xxxl);
}

h2 {
  font-size: var(--fs-xxl);
}

h3 {
  font-size: var(--fs-xl-plus);
}

h4 {
  font-size: var(--fs-xl);
}

h5 {
  font-size: var(--fs-lg);
}

h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi-bold);
}

h3 span {
  display: block;
}

h3 span.highlight {
  display: inline-block;
}

strong {
  font-weight: var(--fw-semi-bold);
}

p {
  font-size: var(--fs-base);
  margin: 0 0 1em 0;
  line-height: var(--lh-base);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-padding);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--grid-gutter) * -1);
}

/* Basic Column Classes */
.col {
  flex: 1 0 0%;
  padding: 0 var(--grid-gutter);
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  padding: 0 var(--grid-gutter);
}

/* Fixed Width Columns (1-12) */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; padding: 0 var(--grid-gutter); }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; padding: 0 var(--grid-gutter); }
.col-3 { flex: 0 0 25%; max-width: 25%; padding: 0 var(--grid-gutter); }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 var(--grid-gutter); }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; padding: 0 var(--grid-gutter); }
.col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 var(--grid-gutter); }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; padding: 0 var(--grid-gutter); }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 var(--grid-gutter); }
.col-9 { flex: 0 0 75%; max-width: 75%; padding: 0 var(--grid-gutter); }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; padding: 0 var(--grid-gutter); }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; padding: 0 var(--grid-gutter); }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 var(--grid-gutter); }

/** 
 * ------------------------------
 *  Global 
 * ------------------------------
*/

.font-primary {
  font-family: var(--font-primary);
}

.font-secondary {
  font-family: var(--font-secondary);
}

.text-center {
  text-align: center;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.shrink {
  max-width: var(--content-max);
  margin: 0 auto;
}

.highlight {
  color: var(--color-primary);
}

.underline { text-decoration: underline; }

.fs-xs        { font-size: var(--fs-xs); }
.fs-sm        { font-size: var(--fs-sm); }
.fs-base      { font-size: var(--fs-base); }
.fs-md        { font-size: var(--fs-md); }
.fs-lg        { font-size: var(--fs-lg); }
.fs-xl        { font-size: var(--fs-xl); }
.fs-xl-plus   { font-size: var(--fs-xl-plus); }
.fs-xxl       { font-size: var(--fs-xxl); }
.fs-xxxl      { font-size: var(--fs-xxxl); }
.fs-huge      { font-size: var(--fs-huge); }

.fw-regular   { font-weight: var(--fw-regular); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semi-bold { font-weight: var(--fw-semi-bold); }
.fw-bold      { font-weight: var(--fw-bold); }

.tt-uppercase  { text-transform: uppercase; }
.tt-lowercase  { text-transform: lowercase; }
.tt-capitalize { text-transform: capitalize; }
.tt-normal     { text-transform: none; }

/** 
 * ------------------------------
 *  Button 
 * ------------------------------
*/

.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-bg);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.btn-simple {
  border-bottom: var(--border-dark);
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Variants */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-bg);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-small {
  padding: 0.4em 0.8em;
  font-size: var(--fs-xs);
}

.btn-large {
  padding: 0.8em 1.6em;
  font-size: var(--fs-md);
}

.btn-fullwidth {
  width: 100%;
  padding: 0.8em 0;
  font-size: var(--fs-md);
  border-radius: var(--radius-lg);
}

.btn-loader {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--color-bg);
  border-top: 2px solid transparent;
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
  display: none; /* hidden by default */
}

.btn .btn-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi-bold);
  color: var(--color-bg);
}

.btn.loading .btn-text {
  display: none; /* hide text when loading */
}

.btn.loading .btn-loader {
  display: inline-block; /* show loader */
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/** 
 * ------------------------------
 *  Form 
 * ------------------------------
*/

/* === Input, Select, Textarea Reset === */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  appearance: none;
  background-color: var(--form-input-bg);
  color: var(--form-input-color);
  font-size: var(--form-input-font-size);
  padding: var(--form-input-padding);
  border: var(--form-input-border);
  border-radius: var(--form-input-radius);
  width: 100%;
  box-sizing: border-box;
  transition: var(--form-input-transition);
  line-height: var(--form-input-height);
  height: var(--form-input-height);
}

textarea {
  height: auto;
  line-height: var(--lh-base);
  padding: var(--form-input-padding-block);
  min-height: 10rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border: var(--form-input-border-focus);
}

/* === Placeholder Styling === */
::placeholder {
  color: var(--form-input-placeholder);
  opacity: 1;
}

/* === Label Reset === */
label {
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2xs);
  display: block;
  color: var(--form-input-color);
}