:root {
      --bs-primary: #F6A622;
      --bs-secondary: #006E65;
      --bs-success: #FFD166;
      --bs-danger: #A33232;
      --bs-warning: #FFB703;
      --bs-info: #1976D2;
      --bs-light: #F5E5C0;
      --bs-dark: #2f1a17;
      --bs-shades: #015e8d;

      /* Optional: extended shades */
      --bs-primary-rgb: 246, 166, 34;
      --bs-secondary-rgb: 0, 110, 101;
      --bs-success-rgb: 255, 209, 102;
      --bs-danger-rgb: 163, 50, 50;
      --bs-warning-rgb: 255, 183, 3;
      --bs-info-rgb: 25, 118, 210;
      --bs-light-rgb: 245, 229, 192;
      --bs-dark-rgb: 18, 18, 18;

       /* colors (change these to tune the palette) */
      --p-base: #d9c9b6;       /* warm cream */
      --p-dark: #6a3f2b;       /* deep brown / chocolate */
      --p-rust: #b35834;       /* rust / burnt orange */
      --p-teal: #2f8b88;       /* teal accent */
      --p-ochre: #c49a2b;      /* ochre / gold */
      --p-black: #020617; /*pg added */
      --scale: 1;              /* pattern scale (1 = default, 0.5 = half-size, 1.5 = larger) */
      --grain-opacity: 0.06;   /* wool noise overlay opacity */

    }
     .navbar-toggler-icon {
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28245, 229, 192, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
     }
     html {
      color-scheme: light dark;
    }

    body {
      font-family: system-ui;
      font-size: 1.25rem;
      line-height: 1.5;
    }

    img,
    svg,
    video {
      max-width: 100%;
      display: block;
    }

    main {
      max-width: min(70ch, 100% - 4rem);
      margin-inline: auto;
    }


    .platforms-element {
        color: #6a7788
    }

    .platforms-element .container-inner {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        width: 100%;
        max-width: 1140px;
        margin: 0 auto
    }

    @media (max-width: 767.98px) {
        .platforms-element .container-inner {
            justify-content:space-between
        }
    }

    .platforms-element .platform-box {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px;
        margin: 0 0 4px;
        width: 70px
    }

    .platforms-element .platform-box:hover {
        color: #252639
    }

    @media (max-width: 767.98px) {
        .platforms-element .platform-box {
            box-shadow:0 4px 16px #00000014;
            width: unset;
            margin: 0 4px 16px;
            padding: 12px 8px;
            background-color: #fff;
            /*width: 30%!important*/
        }
    }

    .platforms-element .platform-img svg {
        fill: var(--bs-dark);
        display: block;
        /*
        height: 36px;*/
        min-height:30px;
        transition: .2s;
    }
    .platform-img {
        padding: 10px;
    }
    .platform-img svg:hover {
        fill:var(--bs-shades);
    }
    .platforms-element .platform-img {
        /*padding: 12px 20px;
        padding:1em;*/
    }

    .platforms-element .platform-img:hover {
        background-color: #fcfcfc;
        border-radius: 2px;
        box-shadow: 0 4px 4px #00000014;
    }


    .platforms-element .platform-name {
        text-align: center;
        font-size: 12px;
        padding-top: 8px;

    }
    a .platform-name {
        text-decoration:none !important;
        color:var(--p-dark);
    }



    .bg-p-dark {
        background-color: var(--p-dark);
    }
    .bg-p-light {
        background-color: var(--bs-dark);
    }
    .pb-bl {
        border-bottom-width: .5em;
        border-bottom-color: var(--bs-light);
        border-bottom-style: solid;
    }
    /* Example overrides */
    .btn-primary {
      background-color: var(--bs-primary);
      border-color: var(--bs-primary);
    }
    .btn-primary:hover {
      background-color: #d98f1d;
      border-color: #d98f1d;
    }
    .bevan-link {
        font-family: "Bevan", serif;
        font-weight: 400;
        font-style: normal;
        color: var(--bs-primary);
    }
    .bevan-link:hover {
        color: var(--bs-light);
    }

    .bevan-regular {
        font-family: "Bevan", serif;
        font-weight: 400;
        font-style: normal;
        color: var(--bs-primary);
    }

    .bevan-shades {
        font-family: "Bevan", serif;
        font-weight: 400;
        font-style: normal;
        color: var(--bs-shades);
    }

    .pb-cr {
        color: #6a7788;
    }

    /* container that uses the pattern */
    .pendleton-bg{
      min-height: 320px;
      align-items: center;
      justify-content: center;
      color: #231b17;
      background-color: var(--p-base);

      /* Layered background:
         1) geometric repeating stripes and chevrons
         2) thin accent bands
         3) subtle wool grain (SVG data URI)
      */
      background-image:
        /* thin accent chevrons - repeat every 260px*--scale */
        repeating-linear-gradient(
          135deg,
          transparent 0 calc(48px * var(--scale)),
          rgba(0,0,0,0.02) calc(48px * var(--scale)) calc(50px * var(--scale)),
          transparent calc(50px * var(--scale)) calc(98px * var(--scale))
        ),

        /* main banded motif (stacked horizontal band blocks) */
        linear-gradient(
          to bottom,
          /* top field */
          var(--p-base) 0%,
          var(--p-base) 12%,
          var(--p-dark) 12%,
          var(--p-dark) 18%,
          var(--p-ochre) 18%,
          var(--p-ochre) 20%,
          var(--p-rust) 20%,
          var(--p-rust) 24%,
          var(--p-teal) 24%,
          var(--p-teal) 26%,
          var(--p-rust) 26%,
          var(--p-rust) 30%,
          var(--p-dark) 30%,
          var(--p-dark) 36%,
          var(--p-base) 36%,
          var(--p-base) 100%
        ),

        /* angled chevron/diamond accent created with repeating-linear-gradient */
        repeating-linear-gradient(
          45deg,
          transparent 0 calc(28px * var(--scale)),
          rgba(255,255,255,0.04) calc(28px * var(--scale)) calc(30px * var(--scale)),
          transparent calc(30px * var(--scale)) calc(56px * var(--scale))
        ),

        /* wool grain texture (SVG) */
        url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
          <filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch' /></filter>\
          <rect width='120' height='120' filter='url(%23f)' opacity='0.9' fill='white'/>\
        </svg>");
      background-blend-mode: normal, multiply, overlay, normal;
      /*background-size:
        /* matching sizes to layers so the motif feels woven */
        /*
        calc(120px * var(--scale)) calc(120px * var(--scale)),
        cover,
        calc(60px * var(--scale)) calc(60px * var(--scale)),
        300px 300px;*/

      /* subtle border to mimic woven edge */
      box-shadow: inset 0 2px 0 rgba(255,255,255,0.04), inset 0 -4px 12px rgba(0,0,0,0.06);
      border-radius: 6px;
      overflow: hidden;
    }

    /* tone down grain with overlay using pseudo-element so we can control opacity */
    .pendleton-bg::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(transparent, rgba(0,0,0,0.02));
      mix-blend-mode: multiply;
      opacity: var(--grain-opacity);
    }

    /* Responsive scale presets */
    .pendleton-bg.small { --scale: 0.7; }
    .pendleton-bg.large { --scale: 1.4; }

    /* Dark variant (swap colors) */
    .pendleton-bg.dark {
      --p-base: #241e1b;
      --p-dark: #0e0b0a;
      --p-rust: #9a4128;
      --p-teal: #1b6b6a;
      --p-ochre: #7a5b1a;
      color: #f5efe8;
    }

    /* Carousel container sizing */
#carousel-pb {
    min-height: 500px;
    width: 100%;
}

#carousel-pb .carousel-inner {
    min-height: 500px;
}

#carousel-pb .carousel-item {
    min-height: 500px;
}


/* Mobile container adjustments */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #carousel-pb {
        min-height: 400px;
        margin: 0 !important;
    }

    /* Hide carousel indicators on mobile */
.carousel-indicators {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    #carousel-pb {
        min-height: 350px;
        margin: 0 !important;
    }
}

/* Ensure all carousel images are the same size */
#carousel-pb .carousel-item img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
        margin: 0 auto;
        display: block;
    }

/* Specific styling for portbro-newest to match others */
#carousel-pb .carousel-item:first-child img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
}

/* Enhanced font styling for carousel descriptions */
#carousel-pb .carousel-item h2 {
    font-size: 2.5rem !important;
    color:var(--bs-dark);
    margin-bottom: 1rem !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

#carousel-pb .carousel-item p {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color:var(--bs-dark);
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #carousel-pb .carousel-item .p-3.p-md-5 {
        padding: 1rem 0.5rem !important;
    }

    #carousel-pb .carousel-item h2 {
        font-size: 1.8rem !important;
        margin-bottom: 0.8rem !important;
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        padding: 0 5px !important;
    }

    #carousel-pb .carousel-item p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        padding: 0 5px !important;
    }
}

@media (max-width: 576px) {
    #carousel-pb .carousel-item .p-3.p-md-5 {
        padding: 0.75rem 0.25rem !important;
    }

    #carousel-pb .carousel-item h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.6rem !important;
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        padding: 0 2px !important;
        letter-spacing: 0.5px !important;
    }

    #carousel-pb .carousel-item p {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        padding: 0 2px !important;
    }
}

@media (max-width: 480px) {
    #carousel-pb .carousel-item .p-3.p-md-5 {
        padding: 0.5rem 0.1rem !important;
    }

    #carousel-pb .carousel-item h2 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        padding: 0 1px !important;
        letter-spacing: 0.3px !important;
    }

    #carousel-pb .carousel-item p {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        padding: 0 1px !important;
    }
}

/* Development logout button styling */
.dev-logout-footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
}

.dev-logout-footer .btn {
    border-radius: 25px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    transition: all 0.3s ease;
}

.dev-logout-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

@media (max-width: 768px) {
    .dev-logout-footer {
        bottom: 15px;
        right: 15px;
    }

    .dev-logout-footer .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}