/* Shellton Expo Center - Main Styles */
/* Using CSS variables from Theme Options + Local Font Fallbacks */

/* Root Variables */
:root {
  /* Typography */
  --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-heading: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-size-base: 16px;
  --font-weight-body: 400;
  --font-style-body: normal;
  --font-weight-heading: 700;
  --font-style-heading: normal;
  --font-color-body: #222;
  --font-color-heading: #000;

  /* Layout */
  --max-width: 1280px;
  --color-background: #ffffff;

  /* Links */
  --color-link: #004885;
  --color-accent: #ff6600;

  /* Buttons */
  --btn-bg: #004885;
  --btn-text: #ffffff;
  --btn-border-color: #004885;
  --btn-hover-bg: #ff6600;
  --btn-hover-text: #ffffff;
  --btn-radius: 6px;
  --btn-width: auto;
  --btn-height: auto;
  --btn-font-weight: 600;
  --btn-font-style: normal;
  --btn-font-size: 1rem;
  --btn-letter-spacing: 0.5px;

  /* Logos */
  --logo-width: 180px;
  --logo-height: 60px;
  --logo-padding: 0;
  --logo-light: url('/wp-content/uploads/logo-light.svg');
  --logo-dark: url('/wp-content/uploads/logo-dark.svg');
  --logo-description: 'B2B Platform – Where Opportunity Meets Connection';
}

/* Base layout */
body {
  background-color: var(--color-background, #fff);
  color: var(--font-color-body, #222);
  font-family: var(--font-body, 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif);
  font-weight: var(--font-weight-body, 400);
  font-style: var(--font-style-body, normal);
  font-size: var(--font-size-base, 16px);
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 1rem;
}

a {
  color: var(--color-link, #004885);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent, #ff6600);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--font-weight-heading, 700);
  font-style: var(--font-style-heading, normal);
  color: var(--font-color-heading, #000);
}

/* Buttons */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: var(--btn-bg, #004885);
  color: var(--btn-text, #fff);
  border: 1px solid var(--btn-border-color, #004885);
  border-radius: var(--btn-radius, 6px);
  width: var(--btn-width, auto);
  height: var(--btn-height, auto);
  cursor: pointer;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: var(--btn-font-weight, 600);
  font-style: var(--btn-font-style, normal);
  font-size: var(--btn-font-size, 1rem);
  letter-spacing: var(--btn-letter-spacing, 0.5px);
  transition: all 0.3s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: var(--btn-hover-bg, #ff6600);
  color: var(--btn-hover-text, #fff);
  opacity: 0.9;
}

/* Logo display */
.logo-light {
  background-image: var(--logo-light);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: var(--logo-width, 180px);
  height: var(--logo-height, 60px);
  padding: var(--logo-padding, 0);
}

.logo-dark {
  background-image: var(--logo-dark);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: var(--logo-width, 180px);
  height: var(--logo-height, 60px);
  padding: var(--logo-padding, 0);
}

/* Logo description */
.logo-description::after {
  content: var(--logo-description, '');
  display: block;
  font-size: 0.9rem;
  color: var(--font-color-body, #444);
  margin-top: 0.5rem;
}

/* Container utility */
.container {
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 1rem;
}

/* Responsive adjustments */

/* ≤ 1200px */
@media (max-width: 1200px) {
  body {
    font-size: calc(var(--font-size-base, 16px) * 0.95);
  }

  button,
  .button {
    width: auto;
    height: auto;
    padding: 0.6rem 1.2rem;
  }
}

/* ≤ 950px */
@media (max-width: 950px) {
  body {
    font-size: calc(var(--font-size-base, 16px) * 0.9);
    padding: 0.8rem;
  }

  .logo-light,
  .logo-dark {
    width: calc(var(--logo-width, 180px) * 0.8);
    height: calc(var(--logo-height, 60px) * 0.8);
  }
}

/* ≤ 795px */
@media (max-width: 795px) {
  body {
    font-size: calc(var(--font-size-base, 16px) * 0.85);
    padding: 0.5rem;
  }

  h1, h2, h3 {
    font-size: 1.2em;
  }

  .logo-light,
  .logo-dark {
    width: calc(var(--logo-width, 180px) * 0.7);
    height: calc(var(--logo-height, 60px) * 0.7);
  }
}

/* ≤ 365px */
@media (max-width: 365px) {
  body {
    font-size: calc(var(--font-size-base, 16px) * 0.8);
    padding: 0.4rem;
  }

  h1, h2, h3 {
    font-size: 1em;
  }

  button,
  .button {
    padding: 0.5rem 1rem;
    font-size: calc(var(--btn-font-size, 1rem) * 0.9);
  }

  .logo-light,
  .logo-dark {
    width: calc(var(--logo-width, 180px) * 0.6);
    height: calc(var(--logo-height, 60px) * 0.6);
  }
}