/* ================================
   CPCC BASE LAYOUT SYSTEM
   Educational Site - Nearly Full Width
   ================================ */

/* ================================
   ROOT VARIABLES
   ================================ */
:root {
  /* Colors */
  --cpcc-color-gold: #B4A269;
  --cpcc-color-gold-hover: #9A8A56;
  --cpcc-color-white: #FFFFFF;
  --cpcc-color-black: #151617;
  --cpcc-color-focus: #4A90D9;
  --cpcc-color-teal: #005D83;
  --cpcc-color-teal-dark: #004a69;
  --cpcc-color-purple: #672666;
  --cpcc-color-gray: #54565A;
  --cpcc-color-gray-light: #EEEEEE;
  --cpcc-color-cyan: #4ECDC4;

  /* Layout */
  --cpcc-header-height: 90px;
  --cpcc-header-height-mobile: 90px;
  --cpcc-transition-speed: 0.3s;

  /* Container - Nearly Full Width */
  --cpcc-container-max-width: 1920px;

  /* Spacing - Default (above 1440px) */
  --cpcc-section-spacing: 120px;
  --cpcc-gutter: 120px;
}

/* ================================
   RESPONSIVE VARIABLES
   ================================ */
@media (max-width: 1920px) {
  :root {
    --cpcc-section-spacing: 100px;
    --cpcc-gutter: 100px;
  }
}

@media (max-width: 1440px) {
  :root {
    --cpcc-section-spacing: 80px;
    --cpcc-gutter: 80px;
  }
}

@media (max-width: 1024px) {
  :root {
    --cpcc-section-spacing: 50px;
    --cpcc-gutter: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --cpcc-section-spacing: 30px;
    --cpcc-gutter: 20px;
  }
}

/* ================================
   SECTION PADDING
   ================================ */
.padding-all {
  padding-top: var(--cpcc-section-spacing);
  padding-bottom: var(--cpcc-section-spacing);
}

.padding-top {
  padding-top: var(--cpcc-section-spacing);
  padding-bottom: 0;
}

.padding-bottom {
  padding-top: 0;
  padding-bottom: var(--cpcc-section-spacing);
}

.padding-none {
  padding-top: 0;
  padding-bottom: 0;
}

/* ================================
   CONTAINER LAYOUTS
   ================================ */
.cpcc-container-full {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.cpcc-container-default,
.cpcc-container-both {
  width: 100%;
  max-width: calc(var(--cpcc-container-max-width) + (var(--cpcc-gutter) * 2));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cpcc-gutter);
  padding-right: var(--cpcc-gutter);
}

.cpcc-container-left {
  width: 100%;
  max-width: calc(50vw + (var(--cpcc-container-max-width) / 2) + var(--cpcc-gutter));
  margin-left: auto;
  margin-right: 0;
  padding-left: var(--cpcc-gutter);
  padding-right: 0;
}

.cpcc-container-right {
  width: 100%;
  max-width: calc(50vw + (var(--cpcc-container-max-width) / 2) + var(--cpcc-gutter));
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: var(--cpcc-gutter);
}

@media (max-width: 768px) {
  .cpcc-container-left,
  .cpcc-container-right {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cpcc-gutter);
    padding-right: var(--cpcc-gutter);
  }
}

/* ================================
   BACKGROUND COLORS
   ================================ */
.cpcc-bg-white-wrap {
  background-color: var(--cpcc-color-white);
}

.cpcc-bg-golden-wrap {
  background-color: var(--cpcc-color-gold);
}

.cpcc-bg-dark-wrap {
  background-color: var(--cpcc-color-black);
  color: var(--cpcc-color-white);
}

.cpcc-bg-gray-wrap {
  background-color: var(--cpcc-color-gray);
  color: var(--cpcc-color-white);
}

.cpcc-bg-grey-wrap {
  background-color: var(--cpcc-color-gray);
  color: var(--cpcc-color-white);
}

.cpcc-bg-gray-light-wrap {
  background-color: var(--cpcc-color-gray-light);
}

.cpcc-bg-teal-wrap {
  background-color: var(--cpcc-color-teal);
  color: var(--cpcc-color-white);
}

.cpcc-bg-purple-wrap {
  background-color: var(--cpcc-color-purple);
  color: var(--cpcc-color-white);
}

.cpcc-bg-cyan-wrap {
  background-color: var(--cpcc-color-cyan);
}

.cpcc-bg-black-wrap {
  background-color: var(--cpcc-color-black);
  color: var(--cpcc-color-white);
}
/* ================================
   FIXED PADDING UTILITIES (Pixels)
   ================================ */

/* Padding Left */
.cpcc-pl-0 { padding-left: 0; }
.cpcc-pl-10 { padding-left: 10px; }
.cpcc-pl-20 { padding-left: 20px; }
.cpcc-pl-30 { padding-left: 30px; }
.cpcc-pl-40 { padding-left: 40px; }
.cpcc-pl-50 { padding-left: 50px; }
.cpcc-pl-60 { padding-left: 60px; }
.cpcc-pl-80 { padding-left: 80px; }
.cpcc-pl-100 { padding-left: 100px; }
.cpcc-pl-120 { padding-left: 120px; }

/* Padding Right */
.cpcc-pr-0 { padding-right: 0; }
.cpcc-pr-10 { padding-right: 10px; }
.cpcc-pr-20 { padding-right: 20px; }
.cpcc-pr-30 { padding-right: 30px; }
.cpcc-pr-40 { padding-right: 40px; }
.cpcc-pr-50 { padding-right: 50px; }
.cpcc-pr-60 { padding-right: 60px; }
.cpcc-pr-80 { padding-right: 80px; }
.cpcc-pr-100 { padding-right: 100px; }
.cpcc-pr-120 { padding-right: 120px; }

/* Padding Top */
.cpcc-pt-0 { padding-top: 0; }
.cpcc-pt-10 { padding-top: 10px; }
.cpcc-pt-20 { padding-top: 20px; }
.cpcc-pt-30 { padding-top: 30px; }
.cpcc-pt-40 { padding-top: 40px; }
.cpcc-pt-50 { padding-top: 50px; }
.cpcc-pt-60 { padding-top: 60px; }
.cpcc-pt-80 { padding-top: 80px; }
.cpcc-pt-100 { padding-top: 100px; }
.cpcc-pt-120 { padding-top: 120px; }

/* Padding Bottom */
.cpcc-pb-0 { padding-bottom: 0; }
.cpcc-pb-10 { padding-bottom: 10px; }
.cpcc-pb-20 { padding-bottom: 20px; }
.cpcc-pb-30 { padding-bottom: 30px; }
.cpcc-pb-40 { padding-bottom: 40px; }
.cpcc-pb-50 { padding-bottom: 50px; }
.cpcc-pb-60 { padding-bottom: 60px; }
.cpcc-pb-80 { padding-bottom: 80px; }
.cpcc-pb-100 { padding-bottom: 100px; }
.cpcc-pb-120 { padding-bottom: 120px; }

/* Padding Horizontal (Left & Right) */
.cpcc-px-0 { padding-left: 0; padding-right: 0; }
.cpcc-px-10 { padding-left: 10px; padding-right: 10px; }
.cpcc-px-20 { padding-left: 20px; padding-right: 20px; }
.cpcc-px-30 { padding-left: 30px; padding-right: 30px; }
.cpcc-px-40 { padding-left: 40px; padding-right: 40px; }
.cpcc-px-50 { padding-left: 50px; padding-right: 50px; }
.cpcc-px-60 { padding-left: 60px; padding-right: 60px; }
.cpcc-px-80 { padding-left: 80px; padding-right: 80px; }
.cpcc-px-100 { padding-left: 100px; padding-right: 100px; }
.cpcc-px-120 { padding-left: 120px; padding-right: 120px; }

/* Padding Vertical (Top & Bottom) */
.cpcc-py-0 { padding-top: 0; padding-bottom: 0; }
.cpcc-py-10 { padding-top: 10px; padding-bottom: 10px; }
.cpcc-py-20 { padding-top: 20px; padding-bottom: 20px; }
.cpcc-py-30 { padding-top: 30px; padding-bottom: 30px; }
.cpcc-py-40 { padding-top: 40px; padding-bottom: 40px; }
.cpcc-py-50 { padding-top: 50px; padding-bottom: 50px; }
.cpcc-py-60 { padding-top: 60px; padding-bottom: 60px; }
.cpcc-py-80 { padding-top: 80px; padding-bottom: 80px; }
.cpcc-py-100 { padding-top: 100px; padding-bottom: 100px; }
.cpcc-py-120 { padding-top: 120px; padding-bottom: 120px; }

/* ================================
   FIXED MARGIN UTILITIES (Pixels)
   ================================ */

/* Margin Left */
.cpcc-ml-0 { margin-left: 0; }
.cpcc-ml-10 { margin-left: 10px; }
.cpcc-ml-20 { margin-left: 20px; }
.cpcc-ml-30 { margin-left: 30px; }
.cpcc-ml-40 { margin-left: 40px; }
.cpcc-ml-50 { margin-left: 50px; }
.cpcc-ml-60 { margin-left: 60px; }
.cpcc-ml-80 { margin-left: 80px; }
.cpcc-ml-100 { margin-left: 100px; }
.cpcc-ml-120 { margin-left: 120px; }
.cpcc-ml-auto { margin-left: auto; }

/* Margin Right */
.cpcc-mr-0 { margin-right: 0; }
.cpcc-mr-10 { margin-right: 10px; }
.cpcc-mr-20 { margin-right: 20px; }
.cpcc-mr-30 { margin-right: 30px; }
.cpcc-mr-40 { margin-right: 40px; }
.cpcc-mr-50 { margin-right: 50px; }
.cpcc-mr-60 { margin-right: 60px; }
.cpcc-mr-80 { margin-right: 80px; }
.cpcc-mr-100 { margin-right: 100px; }
.cpcc-mr-120 { margin-right: 120px; }
.cpcc-mr-auto { margin-right: auto; }

/* Margin Top */
.cpcc-mt-0 { margin-top: 0; }
.cpcc-mt-10 { margin-top: 10px; }
.cpcc-mt-20 { margin-top: 20px; }
.cpcc-mt-30 { margin-top: 30px; }
.cpcc-mt-40 { margin-top: 40px; }
.cpcc-mt-50 { margin-top: 50px; }
.cpcc-mt-60 { margin-top: 60px; }
.cpcc-mt-80 { margin-top: 80px; }
.cpcc-mt-100 { margin-top: 100px; }
.cpcc-mt-120 { margin-top: 120px; }

/* Margin Bottom */
.cpcc-mb-0 { margin-bottom: 0; }
.cpcc-mb-10 { margin-bottom: 10px; }
.cpcc-mb-20 { margin-bottom: 20px; }
.cpcc-mb-30 { margin-bottom: 30px; }
.cpcc-mb-40 { margin-bottom: 40px; }
.cpcc-mb-50 { margin-bottom: 50px; }
.cpcc-mb-60 { margin-bottom: 60px; }
.cpcc-mb-80 { margin-bottom: 80px; }
.cpcc-mb-100 { margin-bottom: 100px; }
.cpcc-mb-120 { margin-bottom: 120px; }

/* Margin Horizontal (Left & Right) */
.cpcc-mx-0 { margin-left: 0; margin-right: 0; }
.cpcc-mx-10 { margin-left: 10px; margin-right: 10px; }
.cpcc-mx-20 { margin-left: 20px; margin-right: 20px; }
.cpcc-mx-30 { margin-left: 30px; margin-right: 30px; }
.cpcc-mx-40 { margin-left: 40px; margin-right: 40px; }
.cpcc-mx-50 { margin-left: 50px; margin-right: 50px; }
.cpcc-mx-60 { margin-left: 60px; margin-right: 60px; }
.cpcc-mx-80 { margin-left: 80px; margin-right: 80px; }
.cpcc-mx-100 { margin-left: 100px; margin-right: 100px; }
.cpcc-mx-120 { margin-left: 120px; margin-right: 120px; }
.cpcc-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Vertical (Top & Bottom) */
.cpcc-my-0 { margin-top: 0; margin-bottom: 0; }
.cpcc-my-10 { margin-top: 10px; margin-bottom: 10px; }
.cpcc-my-20 { margin-top: 20px; margin-bottom: 20px; }
.cpcc-my-30 { margin-top: 30px; margin-bottom: 30px; }
.cpcc-my-40 { margin-top: 40px; margin-bottom: 40px; }
.cpcc-my-50 { margin-top: 50px; margin-bottom: 50px; }
.cpcc-my-60 { margin-top: 60px; margin-bottom: 60px; }
.cpcc-my-80 { margin-top: 80px; margin-bottom: 80px; }
.cpcc-my-100 { margin-top: 100px; margin-bottom: 100px; }
.cpcc-my-120 { margin-top: 120px; margin-bottom: 120px; }

/* ================================
   CONTAINER-LIKE PADDING UTILITIES
   Use inside full-width containers
   to mimic container spacing
   ================================ */

/* Behaves like cpcc-container-both (padding both sides) */
.cpcc-gutter-both {
  padding-left: var(--cpcc-gutter);
  padding-right: var(--cpcc-gutter);
}

/* Behaves like cpcc-container-left (padding left only) */
.cpcc-gutter-left {
  padding-left: var(--cpcc-gutter);
  padding-right: 0;
}

/* Behaves like cpcc-container-right (padding right only) */
.cpcc-gutter-right {
  padding-left: 0;
  padding-right: var(--cpcc-gutter);
}

/* Behaves like cpcc-container-full (no padding) */
.cpcc-gutter-none {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 768px) {
  .cpcc-gutter-left,
  .cpcc-gutter-right {
    padding-left: var(--cpcc-gutter);
    padding-right: var(--cpcc-gutter);
  }
}