/* =====================================================================
   ECELLORS BLOG - FINAL CUSTOM CSS (single file, replaces all earlier)
   Paste in: Appearance > Customize > Additional CSS (delete the old CSS first)
   Palette: Navy #0A0F1E | Lime #8ECC3A | Fonts: Montserrat + Source Serif 4
   Note: the footer widgets (Connect / What people say) carry their own
   styles inside their Custom HTML, so no CSS for them is needed here.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  --ec-navy: #0A0F1E;
  --ec-lime: #8ECC3A;
  --ec-lime-dark: #5E9A12;   /* lime for text on white (readable contrast) */
  --ec-ink: #1B2233;
  --ec-muted: #5B6478;
  --ec-line: #E3E7EF;
  --ec-bg: #F6F8FB;
  --ec-radius: 10px;
}

/* ---------- 1. Base ---------- */
body {
  background: var(--ec-bg) !important;
  color: var(--ec-ink);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .widgettitle, .wp-block-heading,
button, .button, input[type="submit"],
.main-navigation, .entry-meta, .posted-on, .cat-links, .tags-links {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
h1, h2, h3, h4 { color: var(--ec-navy); line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: 1.6em; font-weight: 700; margin: 2em 0 0.6em; }
h3 { font-size: 1.25em; font-weight: 700; margin: 1.6em 0 0.5em; }

/* ---------- 2. Page width (wider layout, less side whitespace) ---------- */
#page, .site, #wrapper, #container, .wrapper, .site-container, .hfeed {
  max-width: 1500px !important;   /* raise to 1700px, or use 100% for edge to edge */
  width: 96% !important;
  margin: 0 auto !important;
}
.site-content, #content, .wp-site-blocks main {
  max-width: 100%;
  margin: 36px auto;
  padding: 0 20px;
}
.entry-content, .entry-summary { max-width: 72ch; }

/* ---------- 3. Header: centered, large title and tagline ---------- */
.site-header, #masthead, header[role="banner"], #header, .wp-site-blocks > header {
  background: var(--ec-navy);
  border-bottom: 4px solid var(--ec-lime);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 32px 32px 30px !important;
  min-height: 0 !important;
  text-align: center !important;
}
/* Theme wrappers: full width, centered stack */
.site-header > *, #masthead > *,
.site-branding, .header-inner, .header-image, .site-title-wrapper, .title-area {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.site-logo, .custom-logo-link { display: block !important; float: none !important; margin: 0 auto !important; }
.site-header img, #masthead img, .custom-logo, .site-logo img {
  display: block !important;
  max-height: 110px !important;
  width: auto !important;
  margin: 0 auto !important;
  border-radius: 10px;
}

.site-header .site-title, .site-header .site-title a,
#masthead .site-title, #masthead .site-title a,
.wp-block-site-title a {
  color: #fff !important;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-align: center !important;
  margin: 6px 0 0 !important;
}

/* Tagline under the site title (increase font-size here to make it bigger) */
.site-header .site-description, #masthead .site-description,
.site-description, p.site-description,
.wp-block-site-tagline {
  color: #C9D3E8 !important;   /* light text for the navy header */
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;   /* about 19px to 26px */
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}

/* ---------- 4. Navigation ---------- */
.main-navigation a, .wp-block-navigation a {
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background .2s, color .2s;
}
.main-navigation a:hover, .wp-block-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: var(--ec-lime);
  color: var(--ec-navy);
}

/* ---------- 5. Posts ---------- */
.hentry, article.post, .wp-block-post {
  background: #fff;
  border: 1px solid var(--ec-line);
  border-left: 5px solid var(--ec-lime);
  border-radius: var(--ec-radius);
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 1px 2px rgba(10, 15, 30, .04);
}
.hentry:hover, article.post:hover { box-shadow: 0 8px 24px rgba(10, 15, 30, .08); }

.entry-title, .entry-title a, .wp-block-post-title a {
  color: var(--ec-navy);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-decoration: none;
}
.entry-title a:hover, .wp-block-post-title a:hover { color: var(--ec-lime-dark); }

.entry-meta, .entry-meta a, .posted-on a, .byline a {
  color: var(--ec-muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.post-thumbnail img, .wp-post-image, .entry-content img {
  border-radius: var(--ec-radius);
  height: auto;
  max-width: 100%;
}

.entry-content a, .comment-content a {
  color: var(--ec-lime-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--ec-navy); }

/* Tables (RFP / ADR posts) */
.entry-content table, .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  margin: 1.6em 0;
  display: block;
  overflow-x: auto;
}
.entry-content th, .wp-block-table th {
  background: var(--ec-navy);
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
}
.entry-content td, .wp-block-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ec-line);
  vertical-align: top;
}
.entry-content tbody tr:nth-child(even) { background: #F1F5EA; }

/* Quotes and email templates */
blockquote, .wp-block-quote {
  background: #fff;
  border-left: 5px solid var(--ec-lime);
  border-radius: 0 var(--ec-radius) var(--ec-radius) 0;
  margin: 1.6em 0;
  padding: 18px 24px;
  color: var(--ec-ink);
  font-style: normal;
}
blockquote p:last-child { margin-bottom: 0; }

/* Code */
code, pre, .wp-block-code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.85em;
}
pre, .wp-block-code {
  background: var(--ec-navy);
  color: #E8EEF9;
  border-radius: var(--ec-radius);
  padding: 20px;
  overflow-x: auto;
}
:not(pre) > code {
  background: #E9F4D5;
  color: var(--ec-navy);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Tags and categories as pills */
.cat-links a, .tags-links a, .tagcloud a {
  display: inline-block;
  background: #E9F4D5;
  color: var(--ec-navy);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 2px 4px 2px 0;
  font-size: 0.78rem !important;
  font-weight: 600;
  text-decoration: none;
}
.cat-links a:hover, .tags-links a:hover, .tagcloud a:hover {
  background: var(--ec-navy);
  color: var(--ec-lime);
}

/* Pagination */
.posts-navigation a, .pagination a, .page-numbers {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--ec-line);
  color: var(--ec-navy);
  text-decoration: none;
}
.page-numbers.current, .page-numbers:hover {
  background: var(--ec-lime);
  border-color: var(--ec-lime);
}

/* ---------- 6. Buttons and forms ---------- */
button, .button, .wp-block-button__link,
input[type="submit"], .more-link {
  background: var(--ec-lime);
  color: var(--ec-navy);
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
button:hover, .button:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, .more-link:hover {
  background: var(--ec-navy);
  color: var(--ec-lime);
}
input[type="search"], input[type="text"], input[type="email"], textarea {
  border: 1px solid var(--ec-line);
  border-radius: 8px;
  padding: 11px 14px;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  background: #fff;
}
input:focus, textarea:focus {
  border-color: var(--ec-lime);
  outline: 3px solid rgba(142, 204, 58, .35);
}

/* ---------- 7. Sidebar widgets ---------- */
.widget-area .widget, #secondary .widget, .wp-block-widget-area .widget {
  background: #fff;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  padding: 22px;
  margin-bottom: 24px;
}
/* Your custom navy / image widgets keep their own look: no extra frame */
.widget_text, .widget_custom_html, .widget_block, .widget_media_image {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.widget-title, .widgettitle {
  color: var(--ec-navy);
  font-size: 1.05rem;
  font-weight: 800;
  border-bottom: 3px solid var(--ec-lime);
  padding-bottom: 8px;
  margin-bottom: 14px;
  display: inline-block;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--ec-line); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--ec-ink); text-decoration: none; }
.widget a:hover { color: var(--ec-lime-dark); }

/* Old social icons widget (replaced by the Connect block) */
.widget_wpcom_social_media_icons_widget { display: none !important; }

/* ---------- 8. Bottom widget areas: stacked, full width ---------- */
#content-bottom-1, #content-bottom-2,
[id*="content-bottom"], [class*="content-bottom"],
.widgets-bottom, .widget-area-bottom, .bottom-widgets {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  clear: both !important;
}
.ecs-wrap, .ect-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.ecs-wrap { margin-bottom: 40px !important; }

/* ---------- 9. Footer bar ---------- */
.site-footer, footer#colophon, .wp-site-blocks > footer {
  background: var(--ec-navy);
  color: #B9C3DA;
  border-top: 4px solid var(--ec-lime);
  padding: 24px 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
}
.site-footer .site-title, .site-footer .site-title a,
footer#colophon .site-title, footer#colophon .site-title a {
  color: #fff !important;
  font-size: 1.4rem !important;
}
.site-footer a, footer#colophon a { color: var(--ec-lime); }

/* ---------- 10. Accessibility ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ec-lime);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 11. Mobile ---------- */
@media (max-width: 782px) {
  body { font-size: 17px; }
  .hentry, article.post, .wp-block-post { padding: 20px 18px; border-left-width: 4px; }
  .site-content, #content { margin: 20px auto; padding: 0 14px; }
  .site-footer, footer#colophon { padding: 20px 16px; }
}
@media (max-width: 700px) {
  .site-header, #masthead, header[role="banner"], #header { padding: 22px 14px !important; }
  .site-header img, #masthead img, .custom-logo { max-height: 80px !important; }
}

/* ---------- 12. Visitor counter: white card (applies on all screens) ---------- */
.widget_wps_visitor_counter {
  background: #ffffff !important;
  color: #0A0F1E !important;
  border: 1px solid var(--ec-line) !important;
  border-radius: var(--ec-radius) !important;
  padding: 18px 16px !important;
  font-size: 0.85rem;
}
.widget_wps_visitor_counter pre,
.widget pre,
.widget .wp-block-code {
  background: transparent !important;
  color: #1B2233 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.9 !important;
  text-align: left !important;
}
.widget pre img,
.widget_wps_visitor_counter img {
  vertical-align: middle;
  max-height: 22px;
  width: auto;
  margin-right: 6px;
}