/* Shawmut - PHONE-ONLY layout fixes (batch 20, 2026-11).
   Loaded from header.php with media="(max-width: 767px)": tablets and desktops never apply this file, so their look
   cannot change. Remove the <link> (or this file) to undo. */

/* ---------- 1. Type scale: phone text was 19 px, headings 40 px -> long pages, few words per line ---------- */
#content p, #content li, .entry-content p, .entry-content li { font-size: 17px; line-height: 1.6; }
h1, .h1, #content h1, h1.entry-title { font-size: 30px !important; line-height: 1.2 !important; }
/* blog / archive lists: each post title (h2 styled like h1) */
h2.was-h1.entry-title, #main article h2.entry-title { font-size: 23px !important; line-height: 1.25 !important; }
h2, #content h2, .entry-content h2 { font-size: 24px; line-height: 1.25; }
#content h3, .entry-content h3 { font-size: 19px; line-height: 1.35; }
.hero-title, .hero-title.h1 { font-size: 28px !important; line-height: 1.2 !important; margin: 0 0 12px !important; }
/* service-page intro line under the page heading (was 26 px light grey) */
#content .entry-content > h3:first-child, #content .services-wrapper > h2 + h3 { font-size: 19px; }

/* ---------- 2. Service icons (Home "Where Creativity Unfolds" + Services page): 2 per row, smaller ---------- */
.home #container #content .services-wrapper, .services .services-wrapper {
  display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 8px; align-items: start;
}
.home #container #content .services-wrapper > *, .services .services-wrapper > * { grid-column: 1 / -1; }   /* headings, text */
.home #container #content .services-wrapper > .service, .services .services-wrapper > .service {
  grid-column: auto; width: auto !important; float: none !important; clear: none !important;
  padding: 12px 4px 4px !important; min-height: 0; margin: 0 !important;
}
.home #container #content .services-wrapper > .clear { display: none; }
.home #container #content .services-wrapper .service a img,
.services .services-wrapper .service a img { width: 96px !important; height: 96px !important; max-width: 96px; }
.home #container #content .services-wrapper .service a h3,
.services .services-wrapper .service a h3 { font-size: 16px !important; line-height: 1.3 !important; margin: 8px 0 12px !important; }
/* the purple hover description sat on top of the next icon after a tap - not used on phones */
.home #container #content .services-wrapper .service .service-text,
.services .services-wrapper .service .service-text { display: none !important; }
.home #container #content .services-wrapper { margin-top: 2em !important; }
.home #container #content .services-wrapper h3[style] { margin: .5em .5em 1em !important; }

/* ---------- 3. Hero call-to-action button (e.g. Direct Mail): text ran out of the purple box ---------- */
.hero-cta .button, .hero-cta a.button {
  display: inline-block !important; height: auto !important; max-width: 100%; box-sizing: border-box;
  white-space: normal !important; line-height: 1.3 !important; padding: 12px 18px !important;
}
.hero-cta .hero-cta-text { font-size: 18px !important; line-height: 1.35 !important; }

/* ---------- 4. Cookie / privacy banner: covered half the screen (352 px) on the first visit ---------- */
.shawmut-pc { padding: 12px 14px !important; font-size: 14px !important; line-height: 1.45 !important; max-height: 60vh; }
.shawmut-pc h2 { font-size: 16px !important; margin: 0 0 4px !important; }
.shawmut-pc p { margin: 0 0 8px !important; font-size: 14px !important; }
.shawmut-pc .shawmut-pc-btns { gap: 6px !important; }
.shawmut-pc .shawmut-pc-btns button { flex: 1 1 0 !important; min-width: 0; padding: 10px 4px !important; font-size: 14px !important; }
.shawmut-pc .shawmut-pc-cats + .shawmut-pc-btns button { flex: 1 1 100% !important; }   /* "Choose" panel keeps full-width buttons */

/* ---------- 5. History timeline: 26,000 px on a phone ---------- */
.shtl-card .shtl-img img, .shtl-img img { max-height: 170px; width: 100%; object-fit: cover; }
.shtl-body { padding: 12px 14px !important; }
.shtl-title { font-size: 18px !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
.shtl-text, .shtl-text p { font-size: 15px !important; line-height: 1.5 !important; }
.shtl-item { margin-bottom: 18px !important; }
.shtl-year { font-size: 18px !important; padding: 4px 12px !important; }

/* ---------- 6. Contact page map at the top: smaller, so the contact details show sooner ---------- */
.tall-hero-wrapper-contact, .tall-hero-wrapper-contact iframe { height: 240px !important; min-height: 0 !important; }

/* ---------- 7. Less empty space between sections ---------- */
.services { padding-bottom: 2em !important; }