/* Local Fonts (Roboto Condensed) */
/* cyrillic-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19a7DRs5.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-1967DRs5.woff2)
    format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19G7DRs5.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-1927DRs5.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DRs5.woff2)
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19a7DRs5.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-1967DRs5.woff2)
    format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19G7DRs5.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-1927DRs5.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DRs5.woff2)
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19a7DRs5.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-1967DRs5.woff2)
    format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19G7DRs5.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-1927DRs5.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DRs5.woff2)
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/custom/websdt_theme_master/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
 * Logic: Defines the color palette, gradients, and visual effects (shadows).
 * Usage: Source of Truth for all color-related variables.
 */

:root {
  /* Colors */
  --color-primary: #333333;
  --color-secondary: #660000;
  --bg-body: #ffffff;
  --text-main: #333333;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.8);
  --bg-card: #ffffff;
  --bg-gray-light: #f8f8f8;
  --bg-gray-lighter: #f0f0f0;
  --bg-gray-medium: #eaeaea;
  --border-light: #dddddd;
  --border-lighter: #eeeeee;
  --border-faint: rgba(0, 0, 0, 0.1);
  --border-on-dark: rgba(255, 255, 255, 0.1);
  --border-cta-light: rgba(255, 255, 255, 0.3);
  --divider-cta: rgba(255, 255, 255, 0.15);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-card-top: rgba(0, 0, 0, 0.05);
  --color-switch-inactive: #cccccc;

  /* Context Variables */
  --link-light-bg: var(--color-secondary);
  --link-light-bg-hover: var(--color-primary);
  --link-dark-bg: #ffffff;
  --link-dark-bg-hover: var(--color-secondary);

  /* UI Colors */
  --nav-bg-idle: rgba(0, 0, 0, 0.4);
  --nav-bg-hover: rgba(0, 0, 0, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.65);
  --overlay-gradient-top: rgba(0, 0, 0, 0.1);
  --overlay-gradient-bottom: rgba(0, 0, 0, 0.6);

  /* Shadows (Visuals) */
  --shadow-strong: 2px 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-card-idle: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 15px 30px rgba(0, 0, 0, 0.1);
  --shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 5px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body {
  color: var(--text-main);
  background-color: var(--bg-body);
}

p {
  color: var(--text-main);
}

/* --- Default Link Style (Light Background) --- */
a {
  color: var(--link-light-bg);
}

a:hover {
  color: var(--link-light-bg-hover);
}

/* Image Placeholder Color */
img {
  background-color: #f0f0f0;
}

blockquote {
  border-left-color: var(--color-secondary);
  background-color: #f5f5f5;
  color: var(--color-primary);
}

/* --- Link on Dark Background (Explicit Class) --- */
.link-on-dark a,
a.link-on-dark {
  color: var(--link-dark-bg);
  transition: color 0.3s ease;
}

.link-on-dark a:hover,
a.link-on-dark:hover {
  color: var(--link-dark-bg-hover);
}

/* --- Context Classes (Legacy Support) --- */
/* Dark Context */
.context-dark a {
  color: var(--link-dark-bg);
}

.context-dark a:hover {
  color: var(--link-dark-bg-hover);
}

.context-dark p,
.context-dark h1,
.context-dark h2,
.context-dark h3 {
  color: var(--text-on-dark);
}

.context-dark-content * {
  color: var(--text-on-dark) !important;
}

/* Headings Colors */
h1,
h2,
h3 {
  color: var(--color-primary);
}

.wsdt-block h2 {
  color: var(--color-secondary);
}

.wsdt-block h2::after {
  background-color: var(--color-secondary);
}

/* Footer Overrides */
.wsdt-footer .wsdt-block h2 {
  color: #ffffff;
}

.wsdt-footer .wsdt-block h2::after {
  background-color: #ffffff;
}

/* Form Elements Colors */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  border-color: var(--border-light);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--color-secondary);
}

/* Accessibility Colors */
.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  background-color: var(--color-secondary);
  color: var(--text-on-dark);
  border: 2px solid var(--text-on-dark) !important;
  box-shadow: var(--shadow-strong);
}

/* --- CTA / Button Colors --- */
.btn-primary,
.wsdt-slide-link,
.wsdt-button-link,
.websdt-btn-primary,
.link-cta,
#edit-actions input[type="submit"],
#user-login-form .form-submit {
  color: var(--text-on-dark);
  background-image: linear-gradient(
    to right,
    var(--text-on-dark) 50%,
    var(--color-secondary) 50%
  );
  border-left-color: rgba(255, 255, 255, 0.8);
  border-right-color: transparent;
}

.btn-primary:hover,
.wsdt-slide-link:hover,
.wsdt-button-link:hover,
.websdt-btn-primary:hover,
.link-cta:hover,
#edit-actions input[type="submit"]:hover,
#user-login-form .form-submit:hover {
  color: var(--color-secondary);
  border-left-color: transparent;
  border-right-color: var(--color-secondary);
}
/*
 * Logic: Defines font families, sizes, weights, and line-heights.
 * Usage: Source of Truth for all typography.
 */

:root {
  /* Typography Scale */
  --font-size-xxs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-xs: 0.85rem;
  --font-size-base: 1rem; /* 16px */
  --font-size-h3: 1.25rem; /* 20px (Mobile) */
  --font-size-h2: 1.5rem; /* 24px (Mobile) */
  --font-size-h1: 1.8rem; /* 28.8px (Mobile) */

  /* Fonts */
  --font-primary: "Roboto Condensed", sans-serif;
  --font-heading: "Roboto Condensed", sans-serif;
}

/* Responsive Typography */
@media (min-width: 1024px) {
  :root {
    --font-size-base: 1.1rem; /* Slightly larger text on desktop */
    --font-size-h3: 1.75rem; /* 28px */
    --font-size-h2: 2.25rem; /* 36px */
    --font-size-h1: 3rem; /* 48px */
  }
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

p {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

blockquote {
  font-size: 1.1rem;
  font-style: italic;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
}

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

h3 {
  font-size: var(--font-size-h3);
}

.wsdt-block h2 {
  font-size: var(--font-size-h2);
}

label {
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
}

/* CTA & Button Typography Logic */
.btn-primary,
.wsdt-slide-link,
.wsdt-button-link,
.websdt-btn-primary,
.link-cta,
#edit-actions input[type="submit"],
#user-login-form .form-submit {
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  text-decoration: none;
}
/*
 * Logic: Defines spacing, margins, paddings, and layout sizes.
 * Usage: Source of Truth for geometry.
 */

:root {
  /* Spacing Scale */
  --space-xs: 5px;
  --space-sm: 10px; /* Mobile: 10px */
  --space-md: 15px; /* Mobile: 15px */
  --space-lg: 30px; /* Mobile: 30px */
  --space-xl: 50px; /* Mobile: 50px */
  --block-spacing: var(--space-xl); /* Dynamic Block Spacing */
  --space-block-padding-mobile: var(--space-lg);

  /* Sizing */
  --icon-size-sm: 18px;
  --icon-size-md: 24px;
  --top-header-height: 45px;
  --header-height: 80px;
  --nav-breakpoint: 9999px;
  --icon-wrapper-size: calc(var(--icon-size-sm) * 1.5);
  --touch-target-size: 44px;

  /* Decoration Elements */
  --decoration-line-width: 30px;
  --decoration-line-height: 2px;

  /* Layout & Positioning */
  --container-max-width: 1200px;
  --size-full: 100%;
  --pos-center: 50%;
  --slide-caption-bottom: 20%;

  /* Component Specifics */
  --cookie-text-max-width: 800px;
  --cookie-reopen-size: 50px;
  --modal-width-mobile: 90%;
  --modal-max-width: 600px;
  --modal-max-height: 90vh;
  --blur-amount: 3px;
  --switch-height: 24px;
  --switch-slider-size: 18px;
  --switch-slider-offset: 3px;
  --switch-translate: 20px;
  --card-min-height: 4rem;
  --border-width-lg: 3px;
  --cta-column-gap: 80px;
  --sidebar-width: 300px;
}

/* Tablet Spacing */
@media (min-width: 768px) {
  :root {
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 80px;
  }
}

/* Desktop Spacing */
@media (min-width: 1200px) {
  :root {
    --space-lg: 50px;
    --space-xl: 100px; /* More breathing room on large screens */
  }
}

/* Base Elements Spacing */
p {
  margin-bottom: var(--space-md);
}

blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
}

blockquote p:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.wsdt-block {
  margin-bottom: var(--block-spacing);
}

.wsdt-region--header-right #block-websdt-main-menu.wsdt-block {
  margin-bottom: 0;
}

.wsdt-block:last-child {
  margin-bottom: 0;
}

.wsdt-block h2 {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
}

label {
  margin-bottom: var(--space-xs);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  padding: var(--space-sm);
}

.wsdt-region-padding {
  padding: var(--space-xl) 0;
}

.wsdt-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  top: var(--space-sm) !important;
  left: var(--space-sm) !important;
  margin: 0 !important;
  padding: var(--space-md) var(--space-lg);
}

.btn-primary,
.wsdt-slide-link,
.wsdt-button-link,
.websdt-btn-primary,
#edit-actions input[type="submit"],
#user-login-form .form-submit {
  padding: var(--space-sm) var(--space-lg);
}
/*
 * Logic: Defines transitions, keyframes, and animation variables.
 * Usage: Source of Truth for motion.
 */

:root {
  /* Global Transitions */
  --transition-main: all 0.4s ease-out;

  /* Slide Fill Effect Variables */
  --bg-slide-size: 200% 100%;
  --bg-slide-pos-start: 100% 0;
  --bg-slide-pos-end: 0 0;

  /* UI Transitions */
  --transition-card: transform 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
}

a {
  transition: var(--transition-main);
}

img {
  transition: opacity 0.3s ease;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  transition: var(--transition-main);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.hover-lift:hover {
  transform: translateY(-3px);
}

.link-fill-animation {
  background-size: var(--bg-slide-size);
  background-position: var(--bg-slide-pos-start);
  transition: background-position 0.4s ease-in-out, color 0.3s ease;
}

.link-fill-animation:hover {
  background-position: var(--bg-slide-pos-end);
}

.btn-primary,
.wsdt-slide-link,
.wsdt-button-link,
.websdt-btn-primary,
#edit-actions input[type="submit"],
#user-login-form .form-submit {
  background-size: var(--bg-slide-size);
  background-position: var(--bg-slide-pos-start);
  transition: var(--transition-main);
}

.btn-primary:hover,
.wsdt-slide-link:hover,
.wsdt-button-link:hover,
.websdt-btn-primary:hover,
#edit-actions input[type="submit"]:hover,
#user-login-form .form-submit:hover {
  background-position: var(--bg-slide-pos-end);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
/*
 * Logic: Defines the structural skeleton, resets, z-indexes, and border-radius.
 * Usage: Source of Truth for layout primitives.
 */

:root {
  /* Z-Index Scale */
  --z-negative: -1;
  --z-base: 0;
  --z-normal: 1;
  --z-dropdown: 100;
  --z-header: 1000;
  --z-slide-overlay: 5;
  --z-slide-caption: 10;
  --z-overlay: 1999;
  --z-drawer: 2000;
  --z-modal: 9000;
  --z-cookie: 9999;

  /* Border Radius Scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Image Aspect Ratios */
  --hero-aspect-ratio: 21 / 9;
  --card-aspect-ratio: 4 / 3;
}

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  position: relative;
  margin: 0;
}

blockquote {
  border-left-style: solid;
  border-left-width: 5px;
}

a {
  text-decoration: none;
}

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

.wsdt-block-system-branding-block img {
  background-color: transparent !important;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wsdt-block {
  position: relative;
}

.wsdt-block h2 {
  text-align: center;
  position: relative;
}

.wsdt-block h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
}

.wsdt-footer .wsdt-block h2 {
  text-align: left;
}

.wsdt-footer .wsdt-block h2::after {
  left: 0;
  transform: none;
}

label {
  display: block;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

fieldset legend {
  display: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.wsdt-container {
  width: 100%;
}

.grid-align-center {
  display: grid;
  place-items: center;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  display: block !important;
  z-index: 99999;
  border-radius: var(--radius-sm);
}

.link-fill-animation {
  display: inline-block;
}

.btn-primary,
.wsdt-slide-link,
.wsdt-button-link,
.websdt-btn-primary,
#edit-actions input[type="submit"],
#user-login-form .form-submit {
  display: inline-block;
  border-left-style: solid;
  border-left-width: 4px;
  border-right-style: solid;
  border-right-width: 4px;
  border-top: none;
  border-bottom: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
}

/* ==========================================================================
   SHARED LAYOUT UTILITIES (DRY Implementation)
   ========================================================================== */

/* 1. Full Cover Images */
.img-cover,
.front-page-services-item-right img,
.wsdt-portfolio-image img,
.wsdt-news-image img,
.top-intro-fieldset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 2. Flex Center (Absolute Centering) */
.flex-center,
.wsdt-social-list li,
.wsdt-social-list a,
.pager__link,
.wsdt-portfolio-title,
.wsdt-news-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. Inline Flex Center (For Tags, Buttons, Tabs) */
.inline-flex-center,
.field--name-field-news-categories a,
.field--name-field-news-tags a,
.field--name-field-services-reference a,
.wsdt-block-local-tasks-block a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}