/* ===================================
   STENCIL ICON SYSTEM
   East St. Louis Public Library

   Design Philosophy:
   - Icons appear painted/stenciled onto blocks
   - Architectural, civic, intentional feel
   - Clean graffiti/stencil art aesthetic
   - No cartoon or app-style elements
   =================================== */

/* Icon Base Container */
.stencil-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    position: relative;
}

.stencil-icon--sm {
    width: 32px;
    height: 32px;
}

.stencil-icon--lg {
    width: 80px;
    height: 80px;
}

/* SVG Icon Base Styles - Stencil Effect */
.stencil-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    /* Slight texture effect for stencil look */
    filter: url(#stencil-texture);
}

/* Icon Colors - Paint/Stencil Style */
.stencil-icon--primary {
    color: var(--block-navy);
}

.stencil-icon--gold {
    color: var(--block-gold);
}

.stencil-icon--cream {
    color: var(--block-cream);
}

.stencil-icon--red {
    color: var(--block-red);
}

.stencil-icon--teal {
    color: var(--block-teal);
}

/* ===================================
   INDIVIDUAL ICON DEFINITIONS
   Using inline SVG paths for crisp rendering
   =================================== */

/* Book Icon - Library Catalog / E-Books */
.icon-book::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h20v48H8V8zm4 4v40h12V12H12zm16-4h20v48H28V8zm4 4v40h12V12H32zM52 12h4v40h-4V12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h20v48H8V8zm4 4v40h12V12H12zm16-4h20v48H28V8zm4 4v40h12V12H32zM52 12h4v40h-4V12z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Headphones Icon - Audiobooks */
.icon-headphones::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8C18.7 8 8 18.7 8 32v20h12V36H12v-4c0-11 9-20 20-20s20 9 20 20v4h-8v16h12V32C56 18.7 45.3 8 32 8zM12 40h4v12h-4V40zm36 0h4v12h-4V40z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8C18.7 8 8 18.7 8 32v20h12V36H12v-4c0-11 9-20 20-20s20 9 20 20v4h-8v16h12V32C56 18.7 45.3 8 32 8zM12 40h4v12h-4V40zm36 0h4v12h-4V40z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Card Icon - Library Card */
.icon-card::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M4 12h56v40H4V12zm4 4v32h48V16H8zm4 8h16v4H12v-4zm0 8h12v4H12v-4zm24-8h12v16H36V24zm4 4v8h4v-8h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M4 12h56v40H4V12zm4 4v32h48V16H8zm4 8h16v4H12v-4zm0 8h12v4H12v-4zm24-8h12v16H36V24zm4 4v8h4v-8h-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Calendar Icon - Events & Programs */
.icon-calendar::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h48v48H8V8zm4 4v40h40V12H12zm8-8h4v8h-4V4zm20 0h4v8h-4V4zM16 24h8v8h-8v-8zm12 0h8v8h-8v-8zm12 0h8v8h-8v-8zM16 36h8v8h-8v-8zm12 0h8v8h-8v-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h48v48H8V8zm4 4v40h40V12H12zm8-8h4v8h-4V4zm20 0h4v8h-4V4zM16 24h8v8h-8v-8zm12 0h8v8h-8v-8zm12 0h8v8h-8v-8zM16 36h8v8h-8v-8zm12 0h8v8h-8v-8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Building Icon - Room Reservations / Spaces */
.icon-building::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 56V20l20-12 20 12v36H12zm4-4h32V22L32 12 16 22v30zm8-24h8v8h-8v-8zm16 0h8v8h-8v-8zm-16 12h8v8h-8v-8zm16 0h8v8h-8v-8zM28 48h8v8h-8v-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 56V20l20-12 20 12v36H12zm4-4h32V22L32 12 16 22v30zm8-24h8v8h-8v-8zm16 0h8v8h-8v-8zm-16 12h8v8h-8v-8zm16 0h8v8h-8v-8zM28 48h8v8h-8v-8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Chat/Speech Icon - Ask a Librarian */
.icon-chat::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h48v36H24l-12 12V44H8V8zm4 4v28h8v8l8-8h24V12H12zm8 10h24v4H20v-4zm0 8h16v4H20v-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h48v36H24l-12 12V44H8V8zm4 4v28h8v8l8-8h24V12H12zm8 10h24v4H20v-4zm0 8h16v4H20v-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Search/Catalog Icon - Library Catalog */
.icon-catalog::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28 8c11 0 20 9 20 20 0 4.4-1.4 8.5-3.9 11.9L56 51.8 51.8 56l-11.9-11.9C36.5 46.6 32.4 48 28 48 17 48 8 39 8 28S17 8 28 8zm0 4c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm-8 12h16v4H20v-4zm0 8h12v4H20v-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28 8c11 0 20 9 20 20 0 4.4-1.4 8.5-3.9 11.9L56 51.8 51.8 56l-11.9-11.9C36.5 46.6 32.4 48 28 48 17 48 8 39 8 28S17 8 28 8zm0 4c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm-8 12h16v4H20v-4zm0 8h12v4H20v-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Computer/Tech Icon - Technology Access */
.icon-computer::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M4 8h56v36H4V8zm4 4v28h48V12H8zM16 48h32v4H16v-4zm8 4h16v4H24v-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M4 8h56v36H4V8zm4 4v28h48V12H8zM16 48h32v4H16v-4zm8 4h16v4H24v-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* People/Community Icon - Community Programs */
.icon-community::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 16c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8zm4 0c0 2.2 1.8 4 4 4s4-1.8 4-4-1.8-4-4-4-4 1.8-4 4zM16 56V40c0-4.4 3.6-8 8-8h8c4.4 0 8 3.6 8 8v16h-4V40c0-2.2-1.8-4-4-4h-8c-2.2 0-4 1.8-4 4v16h-4zM44 20c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm4 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zM44 56V42c0-3.3 2.7-6 6-6h4c3.3 0 6 2.7 6 6v14h-4V42c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v14h-4zM4 20c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm4 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zM4 56V42c0-3.3 2.7-6 6-6h4c3.3 0 6 2.7 6 6v14h-4V42c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v14H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 16c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8zm4 0c0 2.2 1.8 4 4 4s4-1.8 4-4-1.8-4-4-4-4 1.8-4 4zM16 56V40c0-4.4 3.6-8 8-8h8c4.4 0 8 3.6 8 8v16h-4V40c0-2.2-1.8-4-4-4h-8c-2.2 0-4 1.8-4 4v16h-4zM44 20c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm4 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zM44 56V42c0-3.3 2.7-6 6-6h4c3.3 0 6 2.7 6 6v14h-4V42c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v14h-4zM4 20c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm4 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zM4 56V42c0-3.3 2.7-6 6-6h4c3.3 0 6 2.7 6 6v14h-4V42c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v14H4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Graduation Cap Icon - Research / Education */
.icon-education::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8L4 24l28 16 28-16L32 8zm0 6l18 10-18 10-18-10 18-10zM12 32v16l20 8 20-8V32l-4 2v12l-16 6-16-6V34l-4-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8L4 24l28 16 28-16L32 8zm0 6l18 10-18 10-18-10 18-10zM12 32v16l20 8 20-8V32l-4 2v12l-16 6-16-6V34l-4-2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Child/Youth Icon - Youth Programs */
.icon-youth::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 8h24v4H20V8zm-4 8h32v4H16v-4zM32 24c-6.6 0-12 5.4-12 12v20h4V36c0-4.4 3.6-8 8-8s8 3.6 8 8v20h4V36c0-6.6-5.4-12-12-12zm-16 8h8v4h-8v-4zm24 0h8v4h-8v-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 8h24v4H20V8zm-4 8h32v4H16v-4zM32 24c-6.6 0-12 5.4-12 12v20h4V36c0-4.4 3.6-8 8-8s8 3.6 8 8v20h4V36c0-6.6-5.4-12-12-12zm-16 8h8v4h-8v-4zm24 0h8v4h-8v-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Clock Icon - Hours */
.icon-clock::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4C16.5 4 4 16.5 4 32s12.5 28 28 28 28-12.5 28-28S47.5 4 32 4zm0 4c13.3 0 24 10.7 24 24S45.3 56 32 56 8 45.3 8 32 18.7 8 32 8zm-2 8v18l14 8 2-3.5-12-6.8V16h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4C16.5 4 4 16.5 4 32s12.5 28 28 28 28-12.5 28-28S47.5 4 32 4zm0 4c13.3 0 24 10.7 24 24S45.3 56 32 56 8 45.3 8 32 18.7 8 32 8zm-2 8v18l14 8 2-3.5-12-6.8V16h-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Location Pin Icon - Location */
.icon-location::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c-11 0-20 9-20 20 0 15 20 36 20 36s20-21 20-36c0-11-9-20-20-20zm0 4c8.8 0 16 7.2 16 16 0 10.5-12.4 26.4-16 31-3.6-4.6-16-20.5-16-31 0-8.8 7.2-16 16-16zm0 8c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c-11 0-20 9-20 20 0 15 20 36 20 36s20-21 20-36c0-11-9-20-20-20zm0 4c8.8 0 16 7.2 16 16 0 10.5-12.4 26.4-16 31-3.6-4.6-16-20.5-16-31 0-8.8 7.2-16 16-16zm0 8c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Phone Icon */
.icon-phone::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8 0 27.6 22.4 50 50 50 4.4 0 8-3.6 8-8v-8c0-2.2-1.8-4-4-4h-12c-2.2 0-4 1.8-4 4v2.8c-8.5-3.5-15.3-10.3-18.8-18.8H26c2.2 0 4-1.8 4-4V14c0-2.2-1.8-4-4-4h-8c-2.2 0-4 1.8-4 4v2H12c-2.2-1.2-4-3.6-4-6V4h4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8 0 27.6 22.4 50 50 50 4.4 0 8-3.6 8-8v-8c0-2.2-1.8-4-4-4h-12c-2.2 0-4 1.8-4 4v2.8c-8.5-3.5-15.3-10.3-18.8-18.8H26c2.2 0 4-1.8 4-4V14c0-2.2-1.8-4-4-4h-8c-2.2 0-4 1.8-4 4v2H12c-2.2-1.2-4-3.6-4-6V4h4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Globe/Web Icon - Digital Access */
.icon-globe::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4C16.5 4 4 16.5 4 32s12.5 28 28 28 28-12.5 28-28S47.5 4 32 4zm0 4c2.9 0 5.7 2.7 7.8 7.5.7 1.6 1.3 3.4 1.8 5.5H22.4c.5-2.1 1.1-3.9 1.8-5.5C26.3 10.7 29.1 8 32 8zm-13.8 5.2c-1.4 2.2-2.5 4.8-3.4 7.8h-5.4c2.9-4 7-7 11.8-8.8-.4.3-.7.6-1 1zm27.6 0c-.3-.4-.6-.7-1-1 4.8 1.8 8.9 4.8 11.8 8.8h-5.4c-.9-3-2-5.6-3.4-7.8zm-33.2 11.8h6.5c-.4 2.3-.6 4.6-.6 7s.2 4.7.6 7h-6.5c-.7-2.2-1.1-4.6-1.1-7s.4-4.8 1.1-7zm10.5 0h18.8c.4 2.2.6 4.5.6 7s-.2 4.8-.6 7H23.1c-.4-2.2-.6-4.5-.6-7s.2-4.8.6-7zm22.9 0h6.5c.7 2.2 1.1 4.6 1.1 7s-.4 4.8-1.1 7H46c.4-2.3.6-4.6.6-7s-.2-4.7-.6-7zM9.4 43h5.4c.9 3 2 5.6 3.4 7.8.3.4.6.7 1 1-4.8-1.8-8.9-4.8-11.8-8.8zm13 0h19.2c-.5 2.1-1.1 3.9-1.8 5.5-2.1 4.8-4.9 7.5-7.8 7.5s-5.7-2.7-7.8-7.5c-.7-1.6-1.3-3.4-1.8-5.5zm26.8 0h5.4c-2.9 4-7 7-11.8 8.8.4-.3.7-.6 1-1 1.4-2.2 2.5-4.8 3.4-7.8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4C16.5 4 4 16.5 4 32s12.5 28 28 28 28-12.5 28-28S47.5 4 32 4zm0 4c2.9 0 5.7 2.7 7.8 7.5.7 1.6 1.3 3.4 1.8 5.5H22.4c.5-2.1 1.1-3.9 1.8-5.5C26.3 10.7 29.1 8 32 8zm-13.8 5.2c-1.4 2.2-2.5 4.8-3.4 7.8h-5.4c2.9-4 7-7 11.8-8.8-.4.3-.7.6-1 1zm27.6 0c-.3-.4-.6-.7-1-1 4.8 1.8 8.9 4.8 11.8 8.8h-5.4c-.9-3-2-5.6-3.4-7.8zm-33.2 11.8h6.5c-.4 2.3-.6 4.6-.6 7s.2 4.7.6 7h-6.5c-.7-2.2-1.1-4.6-1.1-7s.4-4.8 1.1-7zm10.5 0h18.8c.4 2.2.6 4.5.6 7s-.2 4.8-.6 7H23.1c-.4-2.2-.6-4.5-.6-7s.2-4.8.6-7zm22.9 0h6.5c.7 2.2 1.1 4.6 1.1 7s-.4 4.8-1.1 7H46c.4-2.3.6-4.6.6-7s-.2-4.7-.6-7zM9.4 43h5.4c.9 3 2 5.6 3.4 7.8.3.4.6.7 1 1-4.8-1.8-8.9-4.8-11.8-8.8zm13 0h19.2c-.5 2.1-1.1 3.9-1.8 5.5-2.1 4.8-4.9 7.5-7.8 7.5s-5.7-2.7-7.8-7.5c-.7-1.6-1.3-3.4-1.8-5.5zm26.8 0h5.4c-2.9 4-7 7-11.8 8.8.4-.3.7-.6 1-1 1.4-2.2 2.5-4.8 3.4-7.8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Megaphone/Announcement Icon - News */
.icon-announce::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 24v16h8l4 16h8l-4-16h4l24 12V12L28 24H8zm4 4h16v8H12v-8zm36-6.5v21l-16-8v-5l16-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 24v16h8l4 16h8l-4-16h4l24 12V12L28 24H8zm4 4h16v8H12v-8zm36-6.5v21l-16-8v-5l16-8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Search Icon */
.icon-search::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28 8c11 0 20 9 20 20 0 4.4-1.4 8.5-3.9 11.9L56 51.8 51.8 56l-11.9-11.9C36.5 46.6 32.4 48 28 48 17 48 8 39 8 28S17 8 28 8zm0 4c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28 8c11 0 20 9 20 20 0 4.4-1.4 8.5-3.9 11.9L56 51.8 51.8 56l-11.9-11.9C36.5 46.6 32.4 48 28 48 17 48 8 39 8 28S17 8 28 8zm0 4c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Arch Icon - Gateway Arch / St. Louis Identity */
.icon-arch::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c-12 0-22 16-24 48h8c1.5-26 8-40 16-40s14.5 14 16 40h8C54 20 44 4 32 4zm0 8c5 0 10 10 12 32H20c2-22 7-32 12-32z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c-12 0-22 16-24 48h8c1.5-26 8-40 16-40s14.5 14 16 40h8C54 20 44 4 32 4zm0 8c5 0 10 10 12 32H20c2-22 7-32 12-32z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Arrow Right Icon */
.icon-arrow-right::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 0.5em;
}

/* Menu Icon */
.icon-menu::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}