/* =============================================
   TrailersPlus Logo — Pure CSS Component
   Base size: 200x200  (scale with transform)
   All paths + gradients extracted from SVG
   ============================================= */

:root {
  --tp-red: #EC1D24;
  --tp-blue: #0051A4;
  --tp-white: #FEFEFE;
}

.tp-logo {
  position: relative;
  width: 200px;
  height: 200px;
}

/* White shield border (outer shape) */
.tp-logo__border {
  position: absolute;
  inset: 0;
  clip-path: path(
    'M99.91,196.28 C188.5,172.75 199.81,99.82 199.81,75.76 C199.81,51.69 192.23,26.35 172.25,0.04 C157.21,5.82 124.35,8.38 99.91,0.04 C75.46,8.38 42.61,5.82 27.57,0.04 C7.58,26.35 0,51.69 0,75.76 C0,99.82 11.32,172.75 99.91,196.28Z'
  );
  background: var(--tp-white);
}

/* Red / white-stripe / blue fill (inset from border) */
.tp-logo__fill {
  position: absolute;
  inset: 0;
  transform: scale(0.96);
  clip-path: path(
    'M99.91,196.28 C188.5,172.75 199.81,99.82 199.81,75.76 C199.81,51.69 192.23,26.35 172.25,0.04 C157.21,5.82 124.35,8.38 99.91,0.04 C75.46,8.38 42.61,5.82 27.57,0.04 C7.58,26.35 0,51.69 0,75.76 C0,99.82 11.32,172.75 99.91,196.28Z'
  );
  background: linear-gradient(180deg,
    var(--tp-red) 0%,
    var(--tp-red) 24.5%,
    var(--tp-white) 24.5%,
    var(--tp-white) 26.3%,
    var(--tp-blue) 26.3%,
    var(--tp-blue) 100%
  );
}

/* --- Gradient overlays (exact shapes from SVG) --- */

/* Shine 1: Red band top gloss (Group-10, opacity 0.5) */
.tp-logo__shine-red {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: linear-gradient(to bottom, var(--tp-white) 1.8%, transparent 22.7%);
  clip-path: path(
    'M135.97,14.46 C126.71,14.46 113.07,13.6 99.79,9.59 C86.52,13.6 72.88,14.46 63.62,14.46 C51.88,14.46 40.28,13.11 31.1,10.72 C26.12,17.84 22.04,24.93 18.79,32.09 C20.77,32.52 22.65,32.99 24.34,33.53 C38.92,38.11 48.57,33.1 67.86,34.02 C87.15,34.93 123.14,34.28 133.02,31.54 C146.84,27.69 163.35,29.36 179.99,30.35 C176.88,23.78 173.06,17.26 168.49,10.72 C159.31,13.11 147.71,14.46 135.97,14.46 Z'
  );
}

/* Shine 2: Blue mid-section gloss (Group-17, opacity 0.5, screen) */
.tp-logo__shine-mid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: screen;
  background: linear-gradient(to bottom, var(--tp-white) 23.2%, transparent 61.1%);
  clip-path: path(
    'M188.7,57.36 L10.89,57.36 C9.78,63.46 9.21,69.71 9.21,75.98 C9.21,81.73 10.02,99.88 19.0,120.53 C29.47,123.25 33.39,122.02 37.98,121.68 C54.42,120.45 64.68,117.47 79.37,113.91 C91.0,111.09 109.06,111.64 127.36,111.6 C146.54,111.57 168.14,109.7 188.37,95.33 C190.13,86.19 190.37,79.17 190.37,75.98 C190.37,69.71 189.81,63.46 188.7,57.36 Z'
  );
}

/* Shine 3: Blue bottom glow (Group-14, opacity 0.9, screen) */
.tp-logo__shine-btm {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  mix-blend-mode: screen;
  background: linear-gradient(to bottom, transparent 79.2%, var(--tp-white) 129.5%);
  clip-path: path(
    'M127.36,111.6 C124.68,111.61 122.01,111.6 119.37,111.59 L119.37,111.59 C103.92,111.55 89.3,111.5 79.37,113.91 L79.37,113.91 C64.68,117.47 54.42,120.45 37.98,121.68 L37.98,121.68 C33.39,122.02 29.47,123.25 19.0,120.53 L19.0,120.53 C20.63,124.29 22.54,128.13 24.76,132.0 L24.76,132.0 C40.22,158.9 65.46,177.42 99.79,187.07 L99.79,187.07 C134.13,177.42 159.37,158.9 174.83,132.0 L174.83,132.0 C182.48,118.69 186.39,105.66 188.37,95.33 L188.37,95.33 C168.14,109.7 146.54,111.57 127.36,111.6 Z'
  );
}

/* "TRAILERSPLUS" — exact vector letterforms from SVG */
.tp-logo__text-vec {
  position: absolute;
  inset: 0;
  background: var(--tp-white);
  z-index: 2;
  clip-path: path(
    'M36.37,19.59 L46.1,19.59 L46.1,21.93 L42.67,21.93 L42.67,39.71 L39.8,39.71 L39.8,21.93 L36.37,21.93 Z M50.76,28.62 L51.51,28.62 C53.77,28.62 54.08,28.2 54.08,25.19 C54.08,22.21 53.91,21.93 52.14,21.93 L50.76,21.93 L50.76,28.62 Z M47.9,19.59 L52.34,19.59 C56.52,19.59 56.94,20.68 56.94,25.08 C56.94,27.78 56.57,28.95 54.23,29.65 L54.23,29.71 C56.17,29.9 56.83,30.88 56.83,32.77 L56.83,37.14 C56.83,37.87 56.83,38.87 57.0,39.71 L54.31,39.71 C54.03,39.21 53.97,38.7 53.97,37.9 L53.97,33.35 C53.97,31.46 53.63,30.96 51.74,30.96 L50.76,30.96 L50.76,39.71 L47.9,39.71 L47.9,19.59 Z M63.1,32.24 L66.73,32.24 L64.96,22.54 L64.9,22.54 L63.1,32.24 Z M63.41,19.59 L66.73,19.59 L70.94,39.71 L68.08,39.71 L67.13,34.58 L62.67,34.58 L61.72,39.71 L58.86,39.71 L63.41,19.59 Z M72.8,39.71 L75.66,39.71 L75.66,19.59 L72.8,19.59 Z M78.26,19.59 L81.12,19.59 L81.12,37.37 L85.93,37.37 L85.93,39.71 L78.26,39.71 Z M87.85,19.59 L95.63,19.59 L95.63,21.93 L90.71,21.93 L90.71,28.23 L95.35,28.23 L95.35,30.57 L90.71,30.57 L90.71,37.37 L95.63,37.37 L95.63,39.71 L87.85,39.71 Z M100.3,28.62 L101.04,28.62 C103.3,28.62 103.61,28.2 103.61,25.19 C103.61,22.21 103.44,21.93 101.67,21.93 L100.3,21.93 L100.3,28.62 Z M97.43,19.59 L101.87,19.59 C106.05,19.59 106.48,20.68 106.48,25.08 C106.48,27.78 106.1,28.95 103.76,29.65 L103.76,29.71 C105.7,29.9 106.36,30.88 106.36,32.77 L106.36,37.14 C106.36,37.87 106.36,38.87 106.53,39.71 L103.84,39.71 C103.56,39.21 103.5,38.7 103.5,37.9 L103.5,33.35 C103.5,31.46 103.16,30.96 101.27,30.96 L100.3,30.96 L100.3,39.71 L97.43,39.71 L97.43,19.59 Z M108.82,33.89 L111.68,33.89 L111.68,35.53 C111.68,36.87 112.2,37.7 113.34,37.7 C114.86,37.7 115.23,36.7 115.23,35.39 C115.23,33.69 115.15,33.13 112.17,30.26 C110.34,28.48 108.82,26.86 108.82,24.13 C108.82,20.84 110.39,19.42 113.51,19.42 C115.06,19.42 116.18,19.93 116.86,20.54 C117.35,20.98 117.69,21.68 117.69,23.1 L117.69,25.0 L115.0,25.0 L115.0,23.41 C115.0,22.27 114.52,21.6 113.4,21.6 C112.23,21.6 111.68,22.24 111.68,23.8 C111.68,25.16 111.97,26.0 114.6,28.67 C117.4,31.52 117.92,32.49 117.92,34.91 C117.92,38.06 116.66,39.87 113.26,39.87 C110.62,39.87 108.82,38.79 108.82,36.28 L108.82,33.89 Z M123.16,28.62 L124.64,28.62 C126.59,28.62 126.79,28.31 126.79,25.28 C126.79,22.24 126.59,21.93 124.64,21.93 L123.16,21.93 L123.16,28.62 Z M120.3,19.59 L125.02,19.59 C128.91,19.59 129.65,20.62 129.65,25.28 C129.65,29.93 128.91,30.96 125.02,30.96 L123.16,30.96 L123.16,39.71 L120.3,39.71 L120.3,19.59 Z M132.0,19.59 L134.86,19.59 L134.86,37.37 L139.67,37.37 L139.67,39.71 L132.0,39.71 Z M151.2,35.17 C151.2,37.51 150.25,39.87 146.36,39.87 C142.44,39.87 141.5,37.51 141.5,35.17 L141.5,19.59 L144.36,19.59 L144.36,35.64 C144.36,37.01 144.88,37.7 146.36,37.7 C147.82,37.7 148.34,37.01 148.34,35.64 L148.34,19.59 L151.2,19.59 L151.2,35.17 Z M153.49,33.89 L156.35,33.89 L156.35,35.53 C156.35,36.87 156.86,37.7 158.01,37.7 C159.53,37.7 159.9,36.7 159.9,35.39 C159.9,33.69 159.81,33.13 156.84,30.26 C155.01,28.48 153.49,26.86 153.49,24.13 C153.49,20.84 155.06,19.42 158.18,19.42 C159.73,19.42 160.84,19.93 161.53,20.54 C162.02,20.98 162.36,21.68 162.36,23.1 L162.36,25.0 L159.67,25.0 L159.67,23.41 C159.67,22.27 159.18,21.6 158.06,21.6 C156.89,21.6 156.35,22.24 156.35,23.8 C156.35,25.16 156.64,26.0 159.27,28.67 C162.07,31.52 162.59,32.49 162.59,34.91 C162.59,38.06 161.33,39.87 157.92,39.87 C155.29,39.87 153.49,38.79 153.49,36.28 L153.49,33.89 Z'
  );
}

/* Large serif "T" — exact vector letterform from SVG */
.tp-logo__t-vec {
  position: absolute;
  inset: 0;
  background: var(--tp-white);
  z-index: 2;
  clip-path: path(
    'M64.57,68.56 L134.0,68.56 C137.19,68.56 139.85,68.17 141.96,67.38 L143.92,67.38 L144.46,90.11 L142.57,90.11 C141.58,83.45 139.9,79.22 137.54,77.4 C135.18,75.58 132.29,74.67 128.87,74.67 L110.32,74.67 L110.32,150.94 C110.32,153.48 110.61,155.63 111.19,157.41 C111.78,159.18 112.97,160.63 114.77,161.75 C116.57,162.86 119.2,163.42 122.66,163.42 L122.66,165.33 L75.91,165.33 L75.91,163.42 C81.08,163.42 84.43,162.28 85.96,160.0 C87.49,157.73 88.25,154.71 88.25,150.94 L88.25,74.67 L69.7,74.67 C66.55,74.67 63.98,75.65 62.01,77.59 C60.03,79.54 58.09,83.72 56.2,90.11 L54.11,90.11 L54.65,67.38 L56.61,67.38 C58.72,68.17 61.38,68.56 64.57,68.56 Z'
  );
}

/* =============================================
   Size variants — scale the 200px base
   ============================================= */

.tp-logo--50 {
  transform: scale(0.25);
  transform-origin: center;
  margin: -75px;
}

.tp-logo--100 {
  transform: scale(0.5);
  transform-origin: center;
  margin: -50px;
}

.tp-logo--400 {
  transform: scale(2);
  transform-origin: center;
  margin: 100px;
}