/*
 * mv-style.css
 * Page-specific styles, legacy grid, and component extensions.
 * Loaded AFTER mv-main.css. Contains only what is not already
 * defined in mv-main.css.
 *
 * Removed from this file (defined in mv-main.css):
 *   - html font-size, body base styles
 *   - h1-h6 sizes and @media 550px heading scale
 *   - bold, p, img, img.scale-with-grid
 *   - hr, .container:after/.row:after/.u-cf clearing
 *   - .container responsive widths (main manages the cascade)
 *   - .alpha, .omega
 *   - .small, .small-txt, .largish, .larger, .large, .text-uppercase
 *   - .u-full-width, .u-max-full-width, .u-pull-right, .u-pull-left, .center
 *   - All .margin-* and .pad-* utilities (main has all of them)
 *   - .box-padding, .round-corners, .round-div, .img-circle
 *   - @media margin-left-large breakpoints
 *   - .well and all .well.bg-* variants
 *   - button/.button margin-bottom
 *   - input/textarea/select/fieldset margin-bottom
 *   - pre/blockquote/dl/figure/table/p/ul/ol/form margin-bottom
 *   - a, a:hover, a:visited, a:focus link styles
 *   - .slicknav_menu, #menu, @media SlickNav block
 *   - .list-acrobat through .list-white-pointer, .list-footer-bullet
 *   - th/td, th:first-child/last-child, all table.table-* variants
 *   - Show/hide responsive classes (.hide-Xlarge, .show-large, etc.)
 *   - #audio-only (main handles responsive show/hide)
 *   - @media print block (main has the complete version)
 *   - .clear (main's version is sufficient)
 *
 * Table of contents
 * ------------------------------------------------
 *  1.  Page Structure IDs (search, logo, nav)
 *  2.  Legacy Grid System (grid_1-12, offset_1-11)
 *  3.  Page Layout Helpers
 *  4.  Footer & Copyright
 *  5.  Breadcrumb (legacy colors)
 *  6.  Background Utilities
 *  7.  Typography Extensions
 *  8.  Color Utilities (font colors)
 *  9.  Background Color Utilities (bg- prefix)
 * 10.  Spacing Extensions
 * 11.  Block Headings
 * 12.  Lists (additional markers not in main)
 * 13.  Hover Effects
 * 14.  Animation
 * 15.  SlickNav Mobile Extra
 * 16.  Page-specific Components
 *       a. Services Grid
 *       b. Access Section
 *       c. Alert Section
 *       d. Help / Contact Section
 *       e. Commitment Section
 * 17.  Print Styles (extensions beyond main)
 */


/* ==========================================================================
   1. Page Structure IDs
   ========================================================================== */

/*
 * NOTE: mv-main.css manages #search-menu inside a <nav> landmark with
 * responsive hide/show. The rules below apply to older pages that use
 * the legacy float-right search layout. Do not load both files on the
 * same page if you need the main.css search treatment.
 */



@media screen and (max-width: 767px) {
  #search-menu {
    display: none;
    visibility: hidden;
  }
}

#search-menu a {
  color: #dddddd;
  text-decoration: none;
}

#search-menu a:hover {
  text-decoration: none;
  color: #90C0E7;
}

/*
 * .search-button hover on legacy pages uses light blue.
 * mv-main.css uses maroon (#814142). Since mv-style.css loads after
 * mv-main.css, this override applies on pages that load both.
 */
.search-button:hover {
  background-color: #90C0E7;
  border: 1px solid #90C0E7;
  color: #0F1011;
}

#logo {
  margin-right: 10px;
}

.menu-container {
  padding-top: 30px;
}

@media screen and (max-width: 900px) {
  #logo {
    width: 100%;
    margin: auto;
    text-align: center;
  }

  .menu-container {
    width: 100%;
    padding-top: 5px;
    padding-left: 80px;
  }
}



/* ==========================================================================
   2. Legacy Grid System
   (grid_1-grid_12 / offset_1-offset_11)
   Used on older pages alongside the Skeleton column classes in mv-main.css.
   ========================================================================== */

.grid_1  { width: 6.5%; }
.grid_2  { width: 15%; }
.grid_3  { width: 23.5%; }
.grid_4  { width: 32%; }
.grid_5  { width: 40.5%; }
.grid_6  { width: 49%; }
.grid_7  { width: 57.5%; }
.grid_8  { width: 66%; }
.grid_9  { width: 74.5%; }
.grid_10 { width: 83%; }
.grid_11 { width: 91.5%; }
.grid_12 { width: 96%; }

.grid_1, .grid_2, .grid_3, .grid_4,
.grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12 {
  margin: 0 2% 2% 0;
  float: left;
  display: block;
}

.offset_1  { margin-left: 8.5%; }
.offset_2  { margin-left: 17%; }
.offset_3  { margin-left: 25.5%; }
.offset_4  { margin-left: 34%; }
.offset_5  { margin-left: 42.5%; }
.offset_6  { margin-left: 51%; }
.offset_7  { margin-left: 59.5%; }
.offset_8  { margin-left: 68%; }
.offset_9  { margin-left: 76.5%; }
.offset_10 { margin-left: 85%; }
.offset_11 { margin-left: 97.5%; }

/* Tablet: collapse legacy grid to full-width */
@media screen and (max-width: 767px) {
  .container { width: 96%; margin: 0 2%; }

  .grid_1, .grid_2, .grid_3, .grid_4,
  .grid_5, .grid_6, .grid_7, .grid_8,
  .grid_9, .grid_10, .grid_11, .grid_12 { width: 96%; }

  .offset_1, .offset_2, .offset_3, .offset_4,
  .offset_5, .offset_6, .offset_7, .offset_8,
  .offset_9, .offset_10, .offset_11 { margin-left: 2%; }

  .hide-tablet { display: none; }
}

/* Mobile: collapse further */
@media screen and (max-width: 480px) {
  .container { width: 98%; margin: 0 2%; }

  .grid_1, .grid_2, .grid_3, .grid_4,
  .grid_5, .grid_6, .grid_7, .grid_8,
  .grid_9, .grid_10, .grid_11, .grid_12 { width: 96%; }

  .hide-mobile { display: none; }
}


/* ==========================================================================
   3. Page Layout Helpers
   ========================================================================== */

.row   { margin-bottom: 0; }
.inner { padding: 10px; }

/* Table-based sticky-footer layout (legacy pages) */
html, body { height: 100%; }

.page  { display: table; height: 100%; width: 100%; }
.block { display: table-row; height: 1px; width: 100%; }
.push  { height: auto; }

/* Home page overlay block */
.home-block {
  position: absolute;
  padding: 10px;
  margin-top: -75px;
}

.home-shadow    { text-shadow: 1px 1px 4px #0D0D0D; }
.home-block-img { width: 100%; height: auto; }

/*
 * Legacy home page photo background.
 * mv-main.css has a .photo-div pointing to box-pins.jpg.
 * This version points to the older home-city-hall.jpg.
 */
.photo-div {
  background-image: url(../img/home-city-hall.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 130px;
}

/* Legacy page background ID */
#bg {
  background-image: url(../img/big-background/city-hall-86.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Extended clearfix for legacy pages */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.row:after,
.clearfix:after { clear: both; }

.row,
.clearfix { zoom: 1; }


/* ==========================================================================
   4. Footer & Copyright
   ========================================================================== */

/* Legacy .footer class (mv-main.css styles the <footer> element directly) */
.footer {
  width: 100%;
  background-color: #4a535a;
  color: #dddddd;
}

.head-foot           { background-color: #24282d; color: #dddddd; }
.head-foot a         { color: #dddddd; text-decoration: underline; }
.head-foot a:hover   { color: #90C0E7; }
.head-foot a:visited { color: #dddddd; }
.head-foot a:visited:hover { color: #90C0E7; }

.copyright           { background-color: #000000; color: #dddddd; text-align: center; padding-top: 20px; }
.copyright a         { color: #dddddd; text-decoration: underline; }
.copyright a:hover,
.copyright a:focus   { color: #90C0E7; }


/* ==========================================================================
   5. Breadcrumb (legacy color scheme)
   NOTE: mv-main.css uses rgba(83,86,100) for #breadcrumb.
   Pages loading both files will get these legacy colors since mv-style.css
   loads after. Only load mv-style.css on pages that need this treatment.
   ========================================================================== */

#breadcrumb         { color: #887E73; font-size: 85%; }
#breadcrumb a       { color: #887E73; text-decoration: none; }
#breadcrumb a:hover { color: #960609; }


/* ==========================================================================
   6. Background Utilities
   (bg- prefix — distinct from mv-main.css bk- prefix classes)
   ========================================================================== */

.background-white { background-color: #ffffff; }
.bg-lt-grey       { background-color: #F1F1F2; }
.bg-orange        { background-color: #EB7C01;  color: #fff; }
.bg-dk-orange     { background-color: #AF3802;  color: #fff; }
.bg-med-blue      { background-color: #22598C;  color: #fff; }
.bg-med-green     { background-color: #536315;  color: #fff; }
.bg-lt-blue       { background-color: #84B0DA; }
.bg-bright-blue   { background-color: #109CE9;  color: #fff; }
.bg-bright-green  { background-color: #97AF3E;  color: #fff; }
.bg-dark-blue     { background-color: #06345F;  color: #fff; }
.bg-dark-orange   { background-color: #AB1F22;  color: #fff; }


/* ==========================================================================
   7. Typography Extensions
   ========================================================================== */

/* Not in mv-main.css */
.no-wrap { white-space: nowrap; }


/* ==========================================================================
   8. Color Utilities — Font Colors
   NOTE: These hex values differ from the .color-* classes in mv-main.css
   (e.g. .color-blue here is #0C6DBC vs #2E5A93 in main). Pages loading
   both files will use these values since this file loads after main.
   ========================================================================== */

.color-red       { color: #C30018; }
.color-white     { color: #ffffff; }
.color-green     { color: #489C0C; }
.color-blue      { color: #0C6DBC; }
.color-dark-gray { color: #464646; }
.color-med-gray  { color: #B2B2B2; }
.color-orange    { color: #dd5c04; }
.color-purple    { color: #6a3090; }


/* ==========================================================================
   9. Spacing Extensions
   (Only rules not already present in mv-main.css)
   ========================================================================== */

.margin-right5 { margin-right: 5px !important; }
.margin-left5  { margin-left:  5px !important; }

/*
 * BUG: .pad-left sets padding-bottom, not padding-left.
 * Preserved as-is to avoid breaking pages that depend on the current
 * (incorrect) behavior. Rename or fix when safe.
 */
.pad-left { padding-bottom: 10px !important; }


/* ==========================================================================
   10. Block Headings
   NOTE: mv-main.css version adds text-align:center and font-size:1.25em.
   This legacy version is left-aligned with different padding.
   ========================================================================== */

.block-heading {
  padding: 8px 0 4px 20px;
  margin-bottom: 0;
  color: #fff;
  display: block;
}


/* ==========================================================================
   11. Lists — Additional Markers
   (Not in mv-main.css)
   ========================================================================== */

.list-red-arrow     { list-style-image: url(../img/symbols/arrow_red.png); }
.list-blue-arrow    { list-style-image: url(../img/symbols/arrow_slate.png); }
.list-green-dot     { list-style-image: url(../img/symbols/dot-green.png); }
.list-green-pointer { list-style-image: url(../img/symbols/green-pointer.gif); }
.list-orange-arrow  { list-style-image: url(../img/symbols/arrow_orange.png); }
.list-orange-dot    { list-style-image: url(../img/symbols/orange-dot.png); }
.list-purple-arrow  { list-style-image: url(../img/symbols/arrow_purple.gif); }


/* ==========================================================================
   12. Hover Effects
   ========================================================================== */

.blur { transition: all 1s ease; }
.blur:hover {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.black-white { transition: all 1s ease; }
.black-white:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}


/* ==========================================================================
   13. Animation
   ========================================================================== */

#no-flash { animation: fadein 2s; }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==========================================================================
   14. Empty Breakpoint Stubs
   Add page-specific overrides here as needed.
   ========================================================================== */

@media (max-width: 480px) {}
@media (max-width: 550px) {}
@media (max-width: 767px) {}
@media (min-width: 1000px) {}
@media (min-width: 1200px) {}


/* ==========================================================================
   15. Page-specific Components
   ========================================================================== */

/* ------------------------------------------------------------------
   15a. Services Grid
   ------------------------------------------------------------------ */

#services { text-align: center; }

.services-section {
  background-color: var(--neutral-white);
  padding: 3em 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.service-card {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 40px 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.service-card .icon {
  font-size: 48px;
  color: var(--sub-brand-green);
  margin-bottom: 20px;
  text-align: center;
}

.service-card h3 {
  color: #2c5aa0;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.service-card p {
  text-align: center;
  color: #666;
  margin-top: 20px;
  font-style: italic;
}

.service-card ul {
  list-style: none;
  padding-left: 0;
}

.service-card ul li {
  padding: 8px 0 8px 25px;
  position: relative;
  color: #555;
}

.service-card ul li:before {
  content: "✓";
  color: #2c5aa0;
  font-weight: bold;
  position: absolute;
  left: 0;
}


/* ------------------------------------------------------------------
   15b. Access Section
   ------------------------------------------------------------------ */

#access { padding: 80px 0; }

.access-section { background-color: #f5f5f5; }

.access-section h2 {
  color: #2c5aa0;
  font-size: 36px;
  text-align: center;
  font-weight: 700;
}

.access-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.access-card {
  background-color: var(--neutral-white);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.access-card .icon   { font-size: 64px; color: #2c5aa0; margin-bottom: 20px; }
.access-card h3      { color: #2c5aa0; font-size: 24px; margin-bottom: 20px; }
.access-card a       { color: var(--neutral-white); }

.app-badges {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.app-badge {
  display: inline-block;
  background-color: #2c5aa0;
  color: var(--neutral-white);
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s;
}

.app-badge:hover { background-color: #1e4277; }

.btn-primary {
  display: inline-block;
  background-color: #2c5aa0;
  color: var(--neutral-white);
  padding: 15px 40px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  transition: background-color 0.3s;
  margin-top: 20px;
}

.btn-primary:hover { background-color: #1e4277; }


/* ------------------------------------------------------------------
   15c. Alert Section
   ------------------------------------------------------------------ */

.alert-section {
  background-color: #fff3cd;
  border-left: 5px solid #ffc107;
  padding: 40px;
  margin: 60px 0;
}

.alert-section h3      { color: #856404; margin-bottom: 15px; font-size: 24px; }
.alert-section p       { color: #856404; margin-bottom: 10px; line-height: 1.8; }
.alert-section strong  { font-weight: 700; }


/* ------------------------------------------------------------------
   15d. Help / Contact Section
   ------------------------------------------------------------------ */

.help-section {
  background-color: var(--neutral-white);
  padding: 60px 0;
}

.help-section h2 {
  color: #2c5aa0;
  font-size: 36px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 700;
}

.contact-info {
  max-width: 600px;
  margin: 0 auto;
  background-color: #f9f9f9;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-info h3         { color: #2c5aa0; margin-bottom: 20px; }

.contact-item            { display: flex; align-items: center; margin-bottom: 15px; color: #555; }
.contact-item i          { font-size: 20px; color: #2c5aa0; margin-right: 15px; width: 30px; }
.contact-item a          { color: #2c5aa0; text-decoration: none; }
.contact-item a:hover    { text-decoration: underline; }


/* ------------------------------------------------------------------
   15e. Commitment Section
   ------------------------------------------------------------------ */

.commitment-section {
  background: linear-gradient(135deg, #2c5aa0 0%, #1e4277 100%);
  color: var(--neutral-white);
  padding: 60px 0;
  text-align: center;
}

.commitment-section h2 { font-size: 36px; margin-bottom: 20px; font-weight: 700; }
.commitment-section p  { font-size: 18px; max-width: 800px; margin: 0 auto; }


/* ==========================================================================
   16. Print Styles (extensions beyond mv-main.css)
   mv-main.css handles: header, .breadcrumb-dark, .pg-title, .box-padding,
   .slider-wrapper, .head, .page-footer, .elastislide-list, #carousel,
   #big-menu, .section-links, a/a:visited underline.
   Rules below add legacy-specific resets.
   ========================================================================== */

@media print {

  /* Force all colors to black on white (legacy pages without component-level print styles) */
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }

  /* Hide legacy .footer class (mv-main.css hides the <footer> element) */
  .footer    { display: none; }

  /* Hide legacy .breadcrumb class (mv-main.css hides .breadcrumb-dark) */
  .breadcrumb { display: none; }
}