/*
 * SPCC Helper Classes
 * Utility classes for spacing, sizing, and alignment.
 * Adapted from the shared ClearPH helper set (3rd & 3rd / Mira Mar / BTI).
 *
 * Color helpers (.navy, .blue, .red, .gray) and typography helpers
 * (.eyebrow, .italic, .center-me, .uppercase) live in style.css.
 */

/* ==========================================================================
   DESKTOP HELPERS (>= 1000px)
   ========================================================================== */

@media (min-width: 1000px) {

  /* TEXT WIDTH HELPERS */
  .text-width-40 { max-width: 40% !important; }
  .text-width-45 { max-width: 45% !important; }
  .text-width-50 { max-width: 50% !important; }
  .text-width-55 { max-width: 55% !important; }
  .text-width-60 { max-width: 60% !important; }
  .text-width-65 { max-width: 65% !important; }
  .text-width-70 { max-width: 70% !important; }
  .text-width-75 { max-width: 75% !important; }
  .text-width-80 { max-width: 80% !important; }
  .text-width-85 { max-width: 85% !important; }
  .text-width-90 { max-width: 90% !important; }
  .text-width-95 { max-width: 95% !important; }

  /* MARGIN TOP */
  .m-t-10  { margin-top: 10px  !important; }
  .m-t-20  { margin-top: 20px  !important; }
  .m-t-30  { margin-top: 30px  !important; }
  .m-t-40  { margin-top: 40px  !important; }
  .m-t-50  { margin-top: 50px  !important; }
  .m-t-60  { margin-top: 60px  !important; }
  .m-t-70  { margin-top: 70px  !important; }
  .m-t-80  { margin-top: 80px  !important; }
  .m-t-90  { margin-top: 90px  !important; }
  .m-t-100 { margin-top: 100px !important; }

  /* MARGIN BOTTOM */
  .m-b-10  { margin-bottom: 10px  !important; }
  .m-b-20  { margin-bottom: 20px  !important; }
  .m-b-30  { margin-bottom: 30px  !important; }
  .m-b-40  { margin-bottom: 40px  !important; }
  .m-b-50  { margin-bottom: 50px  !important; }
  .m-b-60  { margin-bottom: 60px  !important; }
  .m-b-70  { margin-bottom: 70px  !important; }
  .m-b-80  { margin-bottom: 80px  !important; }
  .m-b-90  { margin-bottom: 90px  !important; }
  .m-b-100 { margin-bottom: 100px !important; }

  /* MARGIN RIGHT */
  .m-r-10 { margin-right: 10px !important; }
  .m-r-20 { margin-right: 20px !important; }
  .m-r-30 { margin-right: 30px !important; }
  .m-r-40 { margin-right: 40px !important; }
  .m-r-50 { margin-right: 50px !important; }

  /* MARGIN LEFT */
  .m-l-10 { margin-left: 10px !important; }
  .m-l-20 { margin-left: 20px !important; }
  .m-l-30 { margin-left: 30px !important; }
  .m-l-40 { margin-left: 40px !important; }
  .m-l-50 { margin-left: 50px !important; }

  /* PADDING TOP */
  .p-t-20 { padding-top: 20px !important; }
  .p-t-40 { padding-top: 40px !important; }
  .p-t-50 { padding-top: 50px !important; }
  .p-t-80 { padding-top: 80px !important; }

  /* PADDING BOTTOM */
  .p-b-20 { padding-bottom: 20px !important; }
  .p-b-40 { padding-bottom: 40px !important; }
  .p-b-50 { padding-bottom: 50px !important; }
  .p-b-80 { padding-bottom: 80px !important; }

  /* PADDING LEFT (vw variants for fluid layouts) */
  .p-l-3vw  { padding-left: 3vw  !important; }
  .p-l-5vw  { padding-left: 5vw  !important; }
  .p-l-10vw { padding-left: 10vw !important; }

  /* PADDING RIGHT */
  .p-r-3vw  { padding-right: 3vw  !important; }
  .p-r-5vw  { padding-right: 5vw  !important; }
  .p-r-10vw { padding-right: 10vw !important; }
}

/* ==========================================================================
   MOBILE HELPERS (< 1000px)
   Text widths collapse to ~full, margins scale down proportionally.
   ========================================================================== */

@media (max-width: 999px) {

  .text-width-40,
  .text-width-45,
  .text-width-50 { max-width: 90% !important; }

  .text-width-55,
  .text-width-60,
  .text-width-65,
  .text-width-70 { max-width: 95% !important; }

  .text-width-75,
  .text-width-80,
  .text-width-85,
  .text-width-90,
  .text-width-95 { max-width: 100% !important; }

  /* MARGIN TOP (~60% of desktop value) */
  .m-t-20  { margin-top: 12px !important; }
  .m-t-30  { margin-top: 18px !important; }
  .m-t-40  { margin-top: 24px !important; }
  .m-t-50  { margin-top: 30px !important; }
  .m-t-60  { margin-top: 36px !important; }
  .m-t-70  { margin-top: 42px !important; }
  .m-t-80  { margin-top: 48px !important; }
  .m-t-90  { margin-top: 54px !important; }
  .m-t-100 { margin-top: 60px !important; }

  /* MARGIN BOTTOM */
  .m-b-20  { margin-bottom: 12px !important; }
  .m-b-30  { margin-bottom: 18px !important; }
  .m-b-40  { margin-bottom: 24px !important; }
  .m-b-50  { margin-bottom: 30px !important; }
  .m-b-60  { margin-bottom: 36px !important; }
  .m-b-70  { margin-bottom: 42px !important; }
  .m-b-80  { margin-bottom: 48px !important; }
  .m-b-90  { margin-bottom: 54px !important; }
  .m-b-100 { margin-bottom: 60px !important; }

  /* TEXT ALIGN HELPERS - MOBILE */
  .justify-me      { text-align: justify !important; }
  .left-align-me   { text-align: left    !important; }
  .center-on-mobile { text-align: center !important; }
}

/* ==========================================================================
   BUTTON WIDTH HELPERS (all breakpoints)
   ========================================================================== */

.btn-width-15  { min-width: 15%  !important; }
.btn-width-20  { min-width: 20%  !important; }
.btn-width-25  { min-width: 25%  !important; }
.btn-width-30  { min-width: 30%  !important; }
.btn-width-40  { min-width: 40%  !important; }
.btn-width-50  { min-width: 50%  !important; }
.btn-width-60  { min-width: 60%  !important; }
.btn-width-70  { min-width: 70%  !important; }
.btn-width-80  { min-width: 80%  !important; }
.btn-width-90  { min-width: 90%  !important; }
.btn-width-100 { min-width: 100% !important; }

@media (max-width: 819px) {
  .btn-width-15,
  .btn-width-20,
  .btn-width-25,
  .btn-width-30 { min-width: 80% !important; }
}

/* ==========================================================================
   DISPLAY HELPERS
   ========================================================================== */

.hide-desktop { display: none !important; }
.hide-mobile  { display: block !important; }

@media (max-width: 999px) {
  .hide-desktop { display: block !important; }
  .hide-mobile  { display: none  !important; }
}

/* ==========================================================================
   ROTATION HELPERS
   .rotate-N      = clockwise N degrees
   .rotate-neg-N  = counterclockwise N degrees
   Applies at all breakpoints.
   ========================================================================== */

.rotate-1      { transform: rotate(1deg)    !important; }
.rotate-2      { transform: rotate(2deg)    !important; }
.rotate-3      { transform: rotate(3deg)    !important; }
.rotate-4      { transform: rotate(4deg)    !important; }
.rotate-5      { transform: rotate(5deg)    !important; }
.rotate-10     { transform: rotate(10deg)   !important; }
.rotate-20     { transform: rotate(20deg)   !important; }
.rotate-30     { transform: rotate(30deg)   !important; }
.rotate-40     { transform: rotate(40deg)   !important; }
.rotate-45     { transform: rotate(45deg)   !important; }
.rotate-50     { transform: rotate(50deg)   !important; }

.rotate-neg-1  { transform: rotate(-1deg)   !important; }
.rotate-neg-2  { transform: rotate(-2deg)   !important; }
.rotate-neg-3  { transform: rotate(-3deg)   !important; }
.rotate-neg-4  { transform: rotate(-4deg)   !important; }
.rotate-neg-5  { transform: rotate(-5deg)   !important; }
.rotate-neg-10 { transform: rotate(-10deg)  !important; }
.rotate-neg-20 { transform: rotate(-20deg)  !important; }
.rotate-neg-30 { transform: rotate(-30deg)  !important; }
.rotate-neg-40 { transform: rotate(-40deg)  !important; }
.rotate-neg-45 { transform: rotate(-45deg)  !important; }
.rotate-neg-50 { transform: rotate(-50deg)  !important; }

/* ==========================================================================
   COLOR HELPERS — tokenized (canonical addition)
   Older sites hardcoded per-brand hex in these classes (.copper, .sand,
   .green-ish…). The canonical version binds them to --cph-* tokens: a new
   site edits :root only, the class layer never forks again.
   ========================================================================== */

:root {
  --cph-brand-1: #1a1a1a; /* primary brand color */
  --cph-brand-2: #6b6b6b; /* secondary */
  --cph-accent:  #c8a25a; /* accent (was .copper/.sand/.gold per site) */
  --cph-light:   #f5f2ec; /* light neutral */
  --cph-dark:    #14140f; /* dark neutral */
}

.brand-1   { color: var(--cph-brand-1) !important; }
.brand-2   { color: var(--cph-brand-2) !important; }
.accent    { color: var(--cph-accent)  !important; }
.bg-light  { background-color: var(--cph-light) !important; }
.bg-dark   { background-color: var(--cph-dark)  !important; }
.fill-accent svg, .fill-accent path { fill: var(--cph-accent) !important; }