/*------------------------------------------------------------------------
# Custom Foundry Theming
# ------------------------------------------------------------------------
    1.   SVGs
    2.   Footer components
    3.   Typography
    4.   Buttons
    5.   Views
    6.   Webform
    7.   Feature boxes
    8.   Spacing
    9.   Netflix style slider
    10.  Navigation fixes
    11.  Community Voice Masonry Cards
    12.  Polling Report Elements
--------------------------------------------------------------------------------*/

/* 01. SVGs
 --------------------------------------------------------------------------------*/

@media (max-width: 767px) {
    #flourish-top {
        width: 43px;
        height: 42px;
    }
    #flourish-bot {
        width: 43px;
        height: 33px;
    }
}
.cls-1 {
    stroke-width: 0px;
}
.cls-1, .cls-2 {
    fill: none;
}
.cls-2 {
    stroke: #7fbfaf;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.75px;
}
/* 02. Footer components
 --------------------------------------------------------------------------------*/
.social-inline li {
    display: inline-block;
    margin: 0 10px;
}

/* 03. Typography
 --------------------------------------------------------------------------------*/
h1.title-container {
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 0px;
    background-color: rgba(127, 191, 175, 0.7);
    padding: 20px;
    position: relative;
}
@media (max-width: 767px) {
    h1.title-container {
        letter-spacing: 1px;
        padding: 10px;
    }
}
@media all and (max-width: 767px) {
    h1.uppercase {
        letter-spacing: 1px !important;
    }
}
p.intro {
    font-size: 32px !important;
    font-weight: 400;
    line-height: 42px;
}
@media (max-width: 767px) {
    p.intro {
        font-size: 21px !important;
        line-height: 26px;
        margin-right: 15px;
        margin-left: 15px;
    }
}
p.tagline {
    font-size: 28px;
    line-height: 34px;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 20px 10px 20px;
    margin: 0;
}
@media (max-width: 767px) {
    p.tagline {
        line-height: 28px;
        padding: 6px 10px 6px 10px;
    }
}
.pressquote {
    margin-bottom: 24px;
    border-left: 3px solid #7fbfaf;
    padding-left: 12px;
}

.small, small {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    line-height: 1.2;
}


/* 04. Buttons
 --------------------------------------------------------------------------------*/
.rmore {
  padding: 6px;
  display: block;
  width: 100%;
  line-height: 36px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 6px;
  background: #E5F2EF;
  color: #20302C;
  text-align: center;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
.rmore:hover {
  background: #5f8f83;
  color: #fff;
}
.btn-filled {
    background: #ff566a;
    color: #fff;
}
.btn-rounded-md {
    border-radius: 6px !important;
    margin-bottom: 0px !important;
}

/* Disabled/Closed Button State */
.btn-disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* Prevents the user from clicking the link */
    opacity: 0.7;
    border: none !important;
}

/* 05. Views
 --------------------------------------------------------------------------------*/
.path-volunteers .main-container {
  background: #f8f8f8;
  padding: 48px 0px 96px 0px !important;
}
#edit-submit-roles {
    margin-left: 8px; /* adds spacing to filter button on volunteer page */
}

/* 06. Webform
 --------------------------------------------------------------------------------*/
.paragraph--type--paragraph-webform-block {
  padding: 0px 0px 96px 0px !important;
}
.form-control {
    background-color: #e5f2ef;
}
.progress-tracker {
    margin: 36px auto;
}
.progress-step.is-active .progress-marker::before {
    background-color: #b1e3cd;
    color: #406058;
    font-weight: 700;
}
.webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before, .webform-progress-tracker .progress-step:hover .progress-marker::before, .webform-progress-tracker .progress-step .progress-marker::after {
    background-color: #406058;
}
.webform-progress-tracker .progress-step .progress-text {
    color: #406058;
}
.webform-options-display-buttons .webform-options-display-buttons-wrapper .radio, .webform-options-display-buttons .webform-options-display-buttons-wrapper .form-check {
    height: 100%;
}
.webform-options-display-buttons .form-check-label {
  display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 5px 10px 5px;
    width: 100%;
    height: 100%;
    background-color: #F8F9FA; /* Survey Grey */
    color: #1A1A1A; /* Midnight Black */
    border: 2px solid #E0E0E0; /* Subtle grey border for definition */
    border-radius: 6px;
    font-family: "Lato", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    line-height: 1.3;
    padding: 8px 16px !important;
    text-transform: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
/* Hover state for non-selected buttons */
.webform-options-display-buttons .form-check-label:hover {
    border-color: #ef2625; /* Campaign Red border */
    background-color: #FFFFFF; /* Crisp White background */
}
.webform-options-display-buttons .form-check-input:checked ~ .form-check-label {
    background-color: #ef2625 !important; /* Campaign Red */
    border-color: #ef2625 !important; /* Campaign Red */
    color: #FFFFFF !important; /* Crisp White */
}

/* ==========================================================================
   WEBFORM DESCRIPTIONS (Standard & Bootstrap Overrides)
   ========================================================================== */

/* 1. Break the Bootstrap flex-row behavior so descriptions and buttons stack vertically */
.webform-has-field-prefix .input-group {
    display: block !important;
    width: 100% !important;
}

/* 2. Apply your red-border styling and spacing to the parent description containers */
.webform-element-description,
.webform-has-field-prefix .input-group-prepend .description {
    margin-bottom: 24px !important; /* Ensures the gap below the description block */
    border-left: 3px solid #ef2625;
    padding-left: 12px;
    text-align: left;
    white-space: normal !important;
}

/* 3. Force 16px font size on both the wrappers and the paragraph tags */
.webform-element-description,
.webform-element-description p,
.webform-has-field-prefix .input-group-prepend .description,
.webform-has-field-prefix .input-group-prepend .description p {
    font-size: 16px !important;
}

/* 4. Strip margins ONLY from the internal paragraph tags to prevent double-spacing */
.webform-element-description p,
.webform-has-field-prefix .input-group-prepend .description p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 5. Strip away the grey box and padding that Bootstrap forces on the wrapper */
.webform-has-field-prefix .input-group-prepend .input-group-text {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100%;
}

/* ==========================================================================
   WEBFORM TEXT INPUTS & TEXTAREAS
   ========================================================================== */

/* Base Styling for text fields and textareas */
.webform-submission-form .form-control {
    font-family: "Lato", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important; /* Crucial: Prevents iOS auto-zoom */
    color: #1A1A1A !important; /* Midnight Black */
    background-color: #FFFFFF !important; /* Crisp White */
    border: 2px solid #E0E0E0 !important; /* Standard Grey Border */
    border-radius: 6px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Textarea specific overrides */
.webform-submission-form textarea.form-control {
    min-height: 120px;
    resize: vertical; /* Allows users to drag height, but keeps width fixed */
}

/* Focus State (Active typing) */
.webform-submission-form .form-control:focus {
    outline: none !important;
    border-color: #1A1A1A !important; /* High contrast Midnight Black */
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1) !important; /* Subtle focus ring */
}

/* Placeholder Text Formatting */
.webform-submission-form .form-control::placeholder {
    color: #777777 !important;
    font-style: italic;
    opacity: 0.8;
}

/* Error State (Drupal native validation) */
.webform-submission-form .error.form-control,
.webform-submission-form .form-control.is-invalid {
    border-color: #ef2625 !important; /* Campaign Red */
    background-color: #FFF5F5 !important; /* Very subtle red warning tint */
}
/* ==========================================================================
   WEBFORM LIKERT MATRIX RADIO BUTTONS
   ========================================================================== */

/* Base styling for the radio circles to make them larger and clearer */
table.webform-likert-table .form-check-input {
    width: 24px !important;
    height: 24px !important;
    margin-top: 0;
    border: 2px solid #E0E0E0 !important; /* Subtle Grey border */
    background-color: #F8F9FA !important; /* Survey Grey background */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover state to indicate it is clickable */
table.webform-likert-table .form-check-input:hover {
    border-color: #ef2625 !important; /* Campaign Red border */
    background-color: #FFFFFF !important; /* Crisp White background */
}

/* Checked / Selected state */
table.webform-likert-table .form-check-input:checked {
    background-color: #ef2625 !important; /* Campaign Red fill */
    border-color: #ef2625 !important; /* Campaign Red border */
    /* This injects the standard Bootstrap 5 white dot into the center of the custom red radio button */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e") !important;
}

/* Focus state for keyboard navigation and accessibility */
table.webform-likert-table .form-check-input:focus {
    outline: none !important;
    border-color: #1A1A1A !important; /* Midnight Black */
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1) !important; /* Subtle focus ring */
}
/* ==========================================================================
   WEBFORM LIKERT MATRIX - RESPONSIVE BEHAVIOUR & HEADERS
   ========================================================================== */

/* 1. DESKTOP VIEW: Show column headers, hide inline labels */
@media (min-width: 768px) {
    /* Force the table header row to appear */
    table.webform-likert-table thead {
        display: table-header-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Style the column headers */
    table.webform-likert-table th {
        display: table-cell !important;
        text-align: center;
        font-family: "Lato", Helvetica, Arial, sans-serif !important;
        font-size: 16px;
        color: #1A1A1A;
        padding-bottom: 12px;
    }

    /* Hide the inline label next to the radio button to keep the grid clean */
    table.webform-likert-table .webform-likert-label.visually-hidden {
        display: none !important;
    }
}

/* 2. MOBILE VIEW: Hide column headers, show inline labels */
@media (max-width: 767px) {
    /* Hide the top column headers so they don't break the screen width */
    table.webform-likert-table thead {
        display: none !important;
    }

    /* Un-hide the inline label and position it next to the radio button */
    table.webform-likert-table .webform-likert-label.visually-hidden {
        display: inline-block !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        margin-left: 12px !important;
        font-family: "Lato", Helvetica, Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1A1A1A;
        text-transform: none;
    }

    /* Add some breathing room between rows on mobile */
    table.webform-likert-table tr {
        display: block !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid #E0E0E0 !important;
        padding-bottom: 16px !important;
    }

    table.webform-likert-table td {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        padding: 8px 0 !important;
    }
}

/* ==========================================================================
   WEBFORM SUBMIT BUTTON (CTA)
   ========================================================================== */

.webform-submission-form .webform-button--submit {
    /* 1. Reset Bootstrap conflicts */
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 2. Apply Better Buses Brand Colors */
    background-color: #ef2625 !important; /* Campaign Red */
    color: #FFFFFF !important; /* Crisp White */
    border: 2px solid #ef2625 !important;
    border-radius: 6px !important; /* Match text inputs and flexbox buttons */

    /* 3. Typography & Spacing */
    font-family: "Lato", Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 14px 32px !important;
    width: 100% !important; /* Full width on mobile for easy tapping */

    cursor: pointer;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Desktop Sizing Override */
@media (min-width: 768px) {
    .webform-submission-form .webform-button--submit {
        width: auto !important; /* Shrinks to fit text on larger screens */
        min-width: 250px !important;
    }
}

/* 5. Interactive Hover & Focus States */
.webform-submission-form .webform-button--submit:hover,
.webform-submission-form .webform-button--submit:focus {
    background-color: #1A1A1A !important; /* Midnight Black */
    border-color: #1A1A1A !important;
    color: #FFFFFF !important;
    outline: none !important;
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
}

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-table-color);
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}
tr {
    border-bottom: none;
    padding: 0.1em 0.6em;
    background: none;
}
tr.odd {
    background: none;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: none;
}

/* 07. Feature boxes
 --------------------------------------------------------------------------------*/
.feature.boxed.white {
  background: #fff;
  border-radius: 6px;
}
.feature.boxed.primary {
  background: #7fbfaf !important;
  border-radius: 6px;
  color: #fff !important;
  margin-bottom: 0px;
}
.feature.boxed.primary-med {
  background: #b2d9cf !important;
  border-radius: 6px;
  color: #fff !important;
  margin-bottom: 0px;
}
.feature.boxed.primary-light {
  background: #e5f2ef !important;
  border-radius: 6px;
  margin-bottom: 0px;
}
.feature.boxed.primary-dark {
  background: #20302c !important;
  border-radius: 6px;
  margin-bottom: 0px;
}
.feature.boxed.primary-dark-med {
  background: #406058 !important;
  border-radius: 6px;
  color: #fff !important;
  margin-bottom: 0px;
}
.feature.boxed.alert-red {
  background: #d43d51 !important;
  border-radius: 6px;
  color: #fff !important;
  margin-bottom: 0px;
}
.feature.bordered-white {
  padding: 32px;
  border: 1px solid #fff;
}
.feature.boxed.usecase {
  padding: 16px !important;
}
.rounded-top {
  border-top-left-radius: 6px; /* Rounds top corners of images  */
  border-top-right-radius: 6px;
}
.rounded-bottom {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.rounded {
  border-radius: 6px;
}
/* 08. Spacing
 --------------------------------------------------------------------------------*/
.page-node-type-article #main-container {
    padding: 0;
}

#sm-strategy {
    padding: 0; /* Custom padding for this section */
}
#sm-strategy .inner-title:before {
  background: none;
}


.overlay-gradient:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

/* Global Equal Height Utility */

/* Desktop and above */
@media (min-width: 768px) {
  .row.equal-height {
    display: flex;
    flex-wrap: wrap;
  }

  .row.equal-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }

  .row.equal-height > [class*="col-"] > * {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Child elements inside, optional polish */
  .row.equal-height > [class*="col-"] > * > * {
    flex-grow: 0;
  }

  .row.equal-height > [class*="col-"] > * > *:last-child {
    margin-top: auto;
  }
}

/* Mobile: natural stacking (no fixed height) */
@media (max-width: 767.98px) {
  .row.equal-height {
    display: block;
  }

  .row.equal-height > [class*="col-"] {
    display: block;
  }

  .row.equal-height > [class*="col-"] > * {
    display: block;
    height: auto;
  }
}


/* 09. Netflix style slider
 --------------------------------------------------------------------------------*/

.card-scroller-container {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 96px 0px 96px 36px;
  background: url('/sites/dunfagency/files/images/hero/dunf360-hero-top.jpg') no-repeat center center;
}

.card {
  flex: 0 0 auto;
  width: 250px;
}

.card img {
  max-width: 100%;
  border-radius: 0.5rem;
}

.card-scroller {
  display: flex;
  z-index: 2;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 1rem; /* Space for scrollbar */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #7fbfaf #ddd; /* Firefox */
}

.card-scroller::-webkit-scrollbar {
  height: 8px; /* Height of the scroll bar */
}

.card-scroller::-webkit-scrollbar-track {
  background: #ddd; /* Scrollbar track */
  border-radius: 4px;
}

.card-scroller::-webkit-scrollbar-thumb {
  background: #555; /* Scrollbar thumb color */
  border-radius: 4px;
}

.card-scroller::-webkit-scrollbar-thumb:hover {
  background: #333; /* Scrollbar thumb on hover */
}

/* 10. Navigation fixes
 --------------------------------------------------------------------------------*/
.navbar-nav {
    flex-direction: inherit;
}


/* 11. Community Voice Masonry Cards
 --------------------------------------------------------------------------------*/

/* 1. Base Card & Spacing Fix */
.masonry-layout .masonry-item {
    margin-bottom: 0 !important;
}

.voice-card {
    padding: 32px 32px 16px 32px;
    border-radius: 8px;
    margin-bottom: 30px !important;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* 2. Background Design Element (Watermark) */
.voice-card::after {
    content: "\201D";
    font-family: Georgia, serif;
    position: absolute;
    bottom: -40px;
    right: -10px;
    font-size: 180px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.05);
    z-index: -1;
}

/* Make the watermark white on the darker cards */
.voice-card.card-primary-medium::after,
.voice-card.card-primary-dark::after,
.voice-card.card-red::after {
    color: rgba(255, 255, 255, 0.08);
}

/* 3. Background Colours */
.voice-card.card-white { background-color: #ffffff !important; color: #333333 !important; border: 2px solid #efefef; }
.voice-card.card-primary-medium { background-color: #406058 !important; color: #ffffff !important; }
.voice-card.card-primary-dark { background-color: #20302c !important; color: #ffffff !important; }
.voice-card.card-red { background-color: #d43d51 !important; color: #ffffff !important; }

/* Transparent Outline Variation */
.voice-card.card-outline {
    background-color: transparent !important;
    color: #1a1a1a !important; /* Darker text for readability */
    border: 2px solid rgba(0, 0, 0, 0.3) !important; /* 30% border transparency */
}

/* 4. Typography Updates */
.voice-card .voice-label {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.6;
}

.voice-card .voice-author {
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

/* Quote Text Variations */
.voice-card .voice-body {
    margin-bottom: 0;
}

.voice-card .text-quote {
    font-size: 1.25rem;
    font-style: italic;
    border-left: 4px solid currentColor;
    padding-left: 16px;
    opacity: 0.9;
}

.voice-card .text-press {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
}

.voice-card .text-lead {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.6;
}
.voice-card .text-hero {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.4;
}
/* 5. Font Family Variations */
.font-karla {
    font-family: 'Karla', sans-serif;
}
.font-raleway {
    font-family: 'Raleway', sans-serif;
}
.font-lato {
    font-family: 'Lato', sans-serif;
}
.font-open-sans {
    font-family: 'Open Sans', sans-serif;
}
.font-open-condensed {
    font-family: 'Open Sans Condensed', sans-serif;
}
/* Infinite Scroll Load More Button */

/* 1. Centre the pager container and add breathing room */
ul.pager {
    text-align: center;
    margin: 60px 0;
    padding: 0;
    width: 100%;
}

.pager__item {
    display: inline-block;
    list-style: none;
}

/* 2. Style the anchor tag as a modern button */
.pager__item a.button {
    display: inline-block;
    background-color: #20302c !important;
    color: #ffffff !important; /* Forces the text to be white, overriding the green */
    padding: 16px 40px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px; /* Creates a clean pill shape */
    text-decoration: none !important;
    border: 2px solid #20302c !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

/* 3. Add an interactive hover state */
.pager__item a.button:hover,
.pager__item a.button:focus {
    background-color: transparent !important;
    color: #20302c !important;
}

/* --- Community Voice Filters --- */

.views-exposed-form {
    margin-bottom: 40px;
    width: 100%;
}

/* Hide standard labels */
.views-exposed-form label {
    display: none;
}

/* Force the unordered list into a flexible, centred row */
.views-exposed-form .bef-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none; /* Strips out bullet points */
    padding: 0;
    margin: 0;
}

/* Stop the list items from adding default margins */
.views-exposed-form .bef-links li {
    margin: 0;
    padding: 0;
}

/* Style the BEF links as pill buttons */
.views-exposed-form .bef-links a {
    display: inline-block;
    padding: 10px 24px;
    background-color: #f5f6f7;
    color: #333333;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Hover state */
.views-exposed-form .bef-links a:hover {
    background-color: #e2e4e6;
    color: #1a1a1a;
}

/* Active/Selected state (using the exact class from your HTML) */
.views-exposed-form .bef-links a.bef-link--selected {
    background-color: #20302c !important;
    color: #ffffff !important;
    border-color: #20302c !important;
}

/* --- The "- Any -" Label Fix --- */

/* 1. Hide the original text for the "All" button */
.views-exposed-form .bef-links a[id$="-all"] {
    font-size: 0;
}

/* 2. Inject the new text while restoring the font size */
.views-exposed-form .bef-links a[id$="-all"]::after {
    content: "All Themes";
    font-size: 13px;
}
/* --- Mobile View: Horizontal Scroll for Filters --- */

@media (max-width: 768px) {
    /* 1. Force the form wrapper to obey the screen width */
    .views-exposed-form .js-form-item {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* 2. Convert the link container into a strict horizontal grid */
    .views-exposed-form .bef-links {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: max-content !important;
        gap: 12px !important; /* spacing between buttons */

        /* Apply the scrolling behavior directly to the grid */
        overflow-x: auto !important;
        overscroll-behavior-inline: contain !important; /* Stops the page from bouncing when swiping */
        -webkit-overflow-scrolling: touch !important;

        padding-bottom: 15px !important;
        scrollbar-width: none !important;
    }

    .views-exposed-form .bef-links::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. Strip the UL and LI of all layout duties */
    /* This makes the <a> tags act as direct children of the grid container */
    .views-exposed-form .bef-links ul,
    .views-exposed-form .bef-links li {
        display: contents !important;
    }

    /* 4. Ensure the buttons retain their shape */
    .views-exposed-form .bef-links a {
        white-space: nowrap !important;
        display: inline-block !important;
        margin: 0 !important; /* Removes default list-item margins */
    }
}
/* --- Quote Card Footer & Share Button --- */

/* 1. Make the card a flex column so elements can be pushed to the bottom */
.voice-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures cards stretch to equal heights in the grid */
}

/* 2. Style the dedicated action bar */
.voice-card .voice-actions {
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 16px;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
}

/* 3. Share Button Styling */
.btn-share-quote {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 0 !important; /* Aggressively overrides the 24px margin from theme-city.css */
}

.btn-share-quote:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

/* Success state when clicked */
.btn-share-quote.share-success {
    opacity: 1;
    color: #155724;
    background: #d4edda;
}
/* Force mobile devices to register the click on the button, not the icon */
.btn-share-quote i,
.btn-share-quote span {
    pointer-events: none !important;
}

/* 12. Polling Report Elements
 --------------------------------------------------------------------------------*/
.poll-card {
    padding: 32px 32px 16px 32px;
    border-radius: 8px;
    margin-bottom: 30px !important;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* 2. Background Design Element (Watermark) */
.poll-card::after {
    content: "\F430";
    font-family: 'bootstrap-icons' !important;
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 124px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.05);
    z-index: -1;
}

.poll-card .poll-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Make the watermark white on the darker cards */
.poll-card.card-primary-medium::after,
.poll-card.card-primary-dark::after,
.poll-card.card-red::after {
    color: rgba(255, 255, 255, 0.08);
}

/* 3. Background Colours */
.poll-card.card-white { background-color: #ffffff !important; color: #333333 !important; border: 2px solid #efefef; }
.poll-card.card-primary-medium { background-color: #406058 !important; color: #ffffff !important; }
.poll-card.card-primary-dark { background-color: #20302c !important; color: #ffffff !important; }
.poll-card.card-red { background-color: #d43d51 !important; color: #ffffff !important; }

/* Transparent Outline Variation */
.poll-card.card-outline {
    background-color: transparent !important;
    color: #1a1a1a !important; /* Darker text for readability */
    border: 2px solid rgba(0, 0, 0, 0.3) !important; /* 30% border transparency */
}
/* ==========================================================================
   Horizontal Scrollable Tab Bar (Mobile UX Optimization)
   ========================================================================== */

.tab-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* Smooth inertia scrolling on iOS */
}

/* Force the nav list to stay inline and allow overflow bounds */
.tab-scroll-wrapper .nav-pills {
    display: flex;
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

/* Prevent tabs from being crushed flat when container is crowded */
.tab-scroll-wrapper .nav-item {
    flex: 0 0 auto;
}

/* Hide structural scrollbars across platforms for look-and-feel consistency */
.tab-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.tab-scroll-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 1. Base style for all tab buttons (Inactive State) */
.tab-scroll-wrapper .nav-link {
    color: #4a5568 !important; /* Elegant slate grey that complements soft teal */
    background: transparent;
    border-radius: 6px; /* Matches the rounded look of modern dashboards */
    transition: all 0.2s ease-in-out;
}

/* 2. Hover state for desktop users */
.tab-scroll-wrapper .nav-link:hover {
    color: #2d3748 !important; /* Darkens slightly on hover for visual feedback */
    background-color: rgba(127, 191, 175, 0.1); /* Subtle tint of your theme color */
}

/* 3. Active tab state (The Selected Report Section) */
.tab-scroll-wrapper .nav-pills .nav-link.active,
.tab-scroll-wrapper .nav-pills .show > .nav-link {
    background-color: #7fbfaf !important; /* Your signature theme color */
    color: #ffffff !important; /* Crisp white text for perfect readability and contrast */
}