/* ==========================================================================
   Unified Theme Styles (base + alt-home; alt-home precedence baked in)
   ========================================================================== */

:root{
  --brand:#182377;    /* dark blue */
  --text:#515151;
  --accent:#89b8dc;   /* light blue */
  --white:#fff;

  --system-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",
                "Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",
                "Segoe UI Symbol","Noto Color Emoji";

  --readable-measure:65ch;
}

/* ===== Light reset ===== */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

/* ===== Base ===== */
body,
h1,h2,h3,h4,h5,h6,
.content h1,.content h2,.content h3,
.container h2,
aside h2,
footer h3,
.widget .widget-title{
  font-family:var(--system-sans);
}
body .wp-block-group.has-background,
body .wp-block-group.has-background h1,
body .wp-block-group.has-background h2{
  color:var(--white);
}

.page-id-4407 .inline-container {display:none;}
/* ===== Readability + Section utilities ===== */
.hide{ display:none; }

.readable{
  width:100%;
  max-width:var(--readable-measure);
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 1em;
  display:block;
}

.section{
  padding-top:3rem;
  padding-bottom:3rem;
}
.section--blue{ background:var(--brand); }

.content .alignfull{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.content .alignwide{
  max-width:min(1200px, 92vw);
  margin-left:auto;
  margin-right:auto;
}

.section.alignfull > .wp-block-group__inner-container,
.section > .wp-block-group__inner-container{
  padding-left:1rem;
  padding-right:1rem;
}
.section.alignfull > .wp-block-group__inner-container > *:not(.alignfull):not(.alignwide),
.section > .wp-block-group__inner-container > *:not(.alignfull):not(.alignwide){
  max-width:var(--readable-measure);
  margin-left:auto;
  margin-right:auto;
}

.section .container,
.section .row{
  margin-left:auto;
  margin-right:auto;
}
.section + .section{ margin-top:0; }

/* ===== Base elements ===== */
img{ height:auto; margin-bottom:30px; }
hr{ margin:3rem 0; }

.container{ clear:both; }
.wdth-cntrl{ padding:0 15%; }
.content{ display:block; }

/* ===== Links (underline only in content) ===== */
a{ color:var(--brand); text-decoration:none; }
.content a{ text-decoration:underline; }
.content a:hover{ text-decoration:underline; }

/* ===== Typography ===== */
.content p,
.content li{ font-size:1.2em; line-height:1.3em; }
.content p{ margin-bottom:2em; }

.container p{ font-size:1.2em; line-height:1.59em; }
.container li{ font-size:1.1em; line-height:1.59em; }
.container aside p{ font-size:16px; }
.container .lborder{ width:85%; border-left:3px solid var(--accent); }

.content h1,
.container h1{ text-transform:uppercase; }

h2{ color:#111; }
h3{ font-size:1.5rem; margin-bottom:1rem; color:#111; }

.content h2{
  text-transform:uppercase;
  text-align:center;
  margin:30px 0;
}
.content h3{
  margin-bottom:30px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:1.5rem;
}

.alt-home h1{
  margin:30px 0;
  letter-spacing:0;
  text-transform:uppercase;
  font-size:2rem;
  word-wrap:normal;
  color:#111;
}
.post-template h1{ text-align:left; width:75%; }
.page-template-page-landing .content h1{
  text-align:center;
  margin-bottom:30px;
  text-transform:uppercase;
}

.page-template-page-landing-4 p{ line-height:1.5; }
.page-template-page-landing-2{ font-size:20px; }
.page-template-page-landing-2 .content h2,
.page-template-page-landing-2 .content h3{ text-align:left; }

/* ===== Content on blue background ===== */
.has-col-bg p,
.has-col-bg li,
.has-col-bg h1,
.has-col-bg h2,
.has-col-bg h3,
.has-col-bg h4,
.has-col-bg h5,
.has-col-bg h6,
.has-col-bg strong,
.has-col-bg em{
  color:var(--white);
}
.has-col-bg a{ color:var(--brand); }

/* ===== Gutenberg bits ===== */
.wp-block-separator{ background-color:var(--accent); }
.wp-block-ub-content-toggle-accordion .wp-block-ub-content-toggle-accordion-title{
  padding-top:16px;
  padding-bottom:16px;
}

/* ===== Sidebar Widgets ===== */
aside h2,
.widget h2{
  padding:4px;
  font-size:100%;
  background:var(--brand);
  color:var(--white);
}

/* ===== Header ===== */
header{
  text-align:center;
  background:var(--accent);
  padding-bottom:20px;
}
header img{
  width:7.5em;
  position:relative;
  top:0;
  margin-bottom:0;
  margin-left:10px;
}
header .container{ position:relative; }

/* Contact details */
.contact-details,
.contact-details a{ color:var(--white); }
.contact-details{
  position:relative;
  font-size:75%;
  font-weight:400;
}
.contact-details input{ font-size:14px; }

/* Alt-home header specifics */
header .alt-home{
  width:100%;
  text-align:center;
  height:120px;
}
header .alt-home .logo{ float:left; }
header .alt-home .menu{ text-align:right; z-index:999; }
header .alt-home .menu-top-menu-container{ margin-top:0; }
.logo{ margin-bottom:10px; }

/* Contact details bar with search (default) */
header .contact-details{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  width:100%;
  font-size:60%;
  font-weight:400;
  color:#fff;
  text-align:right;
  padding-top:5px;
}
header .contact-details a{
  color:#fff;
  text-decoration:none;
}
header .contact-details a:hover{ text-decoration:underline; }

/* ===== Primary Navigation ===== */
ul#menu-top-menu{ display:none; }

ul.navigation{
  width:100%;
  position:relative;
  display:inline-block;
  padding-left:0;
  list-style:none;
  font-weight:400;
  text-transform:uppercase;
}

/* Top nav links always white */
header ul.navigation a{
  color:var(--white);
  font-weight:400;
  text-decoration:none;
}

/* TOP LEVEL ONLY (prevents dropdowns inheriting inline-block + small font) */
header ul.navigation > li{
  position:relative;
  display:inline-block;
  padding:8px 24px;
  font-size:70%;
}

/* Alt-home tweaks (top-level only) */
header .alt-home ul.navigation > li{
  padding:8px 16px;
  font-size:70%;
}

/* Vertically center nav */
header .menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:30px;
}

/* Underline effect */
header .navigation a{ position:relative; }

header .navigation a:hover::before{
  visibility:visible;
  width:100%;
}

/* =========================================================
   Header dropdown panels (FIRST LEVEL ONLY)
   ========================================================= */

header ul.navigation > li > ul.sub-menu{
  display:none;
  position:absolute;
  z-index:999;

 
  width:max-content;
  max-width:min(520px, 92vw);

  background:var(--white);
  border:1px solid #e6e6e6;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);

  padding:12px;
  margin-top:5px;
  list-style:none;

  text-transform:none;
  font-size:.75rem;
  text-align:left;
}

/* Show normal dropdowns */
header ul.navigation > li:hover > ul.sub-menu,
header ul.navigation > li:focus-within > ul.sub-menu{
  display:block;
}

/* First-level dropdown items */
header ul.navigation > li > ul.sub-menu > li{
  display:block;
  margin:0;
  padding:0;
  border:0;
}
header ul.navigation > li > ul.sub-menu > li > a{
  display:block;
  color:var(--brand);
  padding:10px 12px;
  border-radius:10px;
  line-height:1.2;
  text-align:left;
}
header ul.navigation > li > ul.sub-menu > li > a:hover{
  background:var(--brand);
  color:var(--white);
  text-decoration:none;
}

/* =========================================================
   Mega menu (header only) – Grid (Column marker method)
   Requirements:
   - Apply class "has-mega" to the Resources top-level item
   - JS wraps items into li.mega-col columns and sets --mega-cols
   ========================================================= */

header ul.navigation > li.has-mega > ul.sub-menu{
  /* keep hidden by default (so it doesn't show always) */
  display:none;

  left:50%;
  transform:translateX(-50%);
  width:min(1000px, 92vw);
  max-width:92vw;
  padding:18px;
--mega-cols: 4;
  /* grid columns */
  grid-template-columns: repeat(var(--mega-cols), minmax(200px, 1fr));
  gap:24px;
}

/* show mega on hover/focus */
header ul.navigation > li.has-mega:hover > ul.sub-menu,
header ul.navigation > li.has-mega:focus-within > ul.sub-menu{
  display:grid;
}

/* Make ALL mega links blue (override header white) */
header ul.navigation > li.has-mega > ul.sub-menu a{
  color:var(--brand);
  text-decoration:none;
  display:block;
  padding:10px 12px;
  border-radius:10px;
  line-height:1.2;
}

header ul.navigation > li.has-mega > ul.sub-menu li.mega-heading a:hover{
  color:var(--accent);
}

header ul.navigation > li.has-mega > ul.sub-menu a:hover{
  background:var(--brand);
  color:var(--white);
}

/* Columns generated by JS */
header ul.navigation > li.has-mega > ul.sub-menu > li.mega-col{
  list-style:none;
  margin:0;
  padding:0;
}
header ul.navigation > li.has-mega > ul.sub-menu > li.mega-col > ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Nested submenus INSIDE mega should be static lists (not dropdown panels) */
header ul.navigation > li.has-mega > ul.sub-menu ul.sub-menu{
  position:static !important;
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:6px 0 0 0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Indent child links under headings */
header ul.navigation > li.has-mega > ul.sub-menu ul.sub-menu a{
  padding:9px 12px 9px 18px;
}

/* Heading style (li gets mega-heading class) */
header ul.navigation > li.has-mega > ul.sub-menu .mega-heading > a{
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:.02em;
  background:#f7fbff;
  border:1px solid rgba(137,184,220,.55);
	margin-bottom:2px;
}

header ul.navigation > li.has-mega.mega-cols-2 > ul.sub-menu{ --mega-cols: 2; }
header ul.navigation > li.has-mega.mega-cols-3 > ul.sub-menu{ --mega-cols: 3; }
header ul.navigation > li.has-mega.mega-cols-4 > ul.sub-menu{ --mega-cols: 4; }

/* Mobile: stack columns */
@media (max-width: 872px){
  header ul.navigation > li.has-mega > ul.sub-menu{
    left:0;
    transform:none;
    width:92vw;
    grid-template-columns:1fr;
    padding:12px;
  }
}

/* ===== Side Nav ===== */
.sidenav{
  height:100%;
  width:0;
  position:fixed;
  z-index:3;
  top:0;
  left:0;
  background-color:var(--brand);
  overflow-x:hidden;
  transition:.5s;
  padding-top:60px;
}

/* Sidenav uses same menu markup but must stay simple */
.sidenav ul.navigation{
  color:var(--white);
  text-align:right;
  display:block;
  text-transform:uppercase;
  padding-left:0;
  list-style:none;
}

.sidenav ul.navigation > li{
  display:block;
  width:100%;
  padding:0;
}

.sidenav ul.navigation a{
  display:block;
  padding:8px 8px 8px 32px;
  text-decoration:none;
  font-size:100%;
  color:var(--white);
  transition:.3s;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sidenav ul.navigation a:hover{
  color:var(--white);
  text-decoration:underline;
}

/* Close button */
.sidenav .closebtn{
  position:absolute;
  top:0;
  right:25px;
  font-size:36px;
  margin-left:50px;
  color:var(--white);
}

#mySidenav li{ width:100%; }

#menu-toggle-button{
  transition:margin-left .5s;
  padding:16px;
  font-weight:300;
  position:absolute;
  right:0;
  text-align:right;
  color:#fff;
}

/* Sidenav dropdowns: stacked lists, no panels, no grid */
.sidenav ul.navigation ul.sub-menu{
  display:none;
  position:static !important;
  width:100% !important;
  max-width:none !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  margin:6px 0 10px 0 !important;
  padding:0 !important;
  list-style:none;

  /* kill any mega/grid effects */
  grid-template-columns:none !important;
  column-count:1 !important;
  gap:0 !important;
}

/* show on hover/focus-within (no JS) */
.sidenav ul.navigation li:hover > ul.sub-menu,
.sidenav ul.navigation li:focus-within > ul.sub-menu{
  display:block;
}

/* If mega markup exists in the sidenav, stack it */
.sidenav ul.navigation ul.sub-menu > li.mega-col{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.sidenav ul.navigation ul.sub-menu > li.mega-col > ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* Indent submenu links */
.sidenav ul.navigation ul.sub-menu a{
  padding:8px 12px 8px 46px !important;
  color:var(--white) !important;
  background:transparent !important;
  border-radius:0 !important;
}

/* deeper levels */
.sidenav ul.navigation ul.sub-menu ul.sub-menu a{
  padding-left:60px !important;
}
/* ===== SIDENAV submenu sizing + width clamp ===== */

/* Make sure submenu never exceeds the sidenav width */
.sidenav ul.navigation ul.sub-menu{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}

/* Slightly smaller submenu text */
.sidenav ul.navigation ul.sub-menu a{
  font-size: 0.9rem;      /* was inheriting 100% */
  line-height: 1.25;
  padding: 7px 12px 7px 40px !important; /* a touch tighter */
}

/* If you have mega-col wrappers in sidenav, ensure they can't introduce extra width */
.sidenav ul.navigation ul.sub-menu > li.mega-col,
.sidenav ul.navigation ul.sub-menu > li.mega-col > ul{
  width: 100% !important;
  max-width: 100% !important;
}

/* Landing page toggle visibility */
#lpage-menu-toggle-button,
.page-template-page-landing #menu-toggle-button{ display:none; }
.page-template-page-landing #lpage-menu-toggle-button{
  display:block;
  text-align:right;
  font-size:70%;
  margin-right:5%;
}

/* ===== Misc blocks ===== */
.logos img{ margin-bottom:0; }
.img50 figure{ text-align:center; }
.img50 img{ width:50%; }

.page-id-2987 img{ margin-bottom:0; }
.page-id-2987 .wp-block-columns{ margin-bottom:0; }
.page-id-2987 hr{ margin:1em 0; }

/* ===== Forms ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  margin-top:4px;
  width:100%;
}
.wpcf7 label{ width:100%; }
.wpcf7-submit{
  background:var(--brand);
  color:var(--white);
  border:1px solid var(--brand);
  border-radius:5px;
  padding:10px 20px;
  font-weight:400;
}
.wpcf7-submit:hover{
  background:var(--white);
  color:var(--brand);
}

/*.wpcf7 form .wpcf7-response-output {
	border:none;
}*/

/* ===== Footer ===== */
footer{
  background-color:var(--brand);
  color:var(--white);
  font-size:75%;
  padding:30px 0;
  position:relative;
  top:50px;
}
footer h3{
  text-align:left;
  margin-bottom:30px;
  font-size:1.5rem;
  color:var(--white);
}
footer li{ list-style:none; }
footer a{ color:var(--white); }
footer a:hover{ color:var(--white); text-decoration:underline; }
.footer-bottom{ width:100%; clear:both; }
footer ul{ padding-left:0; }
footer ul li{ padding:3px 0; }

.footer-top .footer-contact{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
@media (min-width: 1200px){
  .footer-top .footer-contact{
    grid-template-columns:repeat(4, 1fr);
  }
}
.footer-top .footer-contact li.widget,
.footer-top .footer-contact .widget{
  margin:0;
  padding:10px;
  width:auto;
}

footer .footer-search-wrap{ margin-bottom:10px; }
footer .footer-search-wrap .search-field{
  font-size:14px;
  color:#111;
}
footer .footer-search-wrap .search-submit .dashicons{
  color:#fff;
  font-size:20px;
  line-height:1;
}

/* Buttons */
.wp-block-button__link{
  background:var(--brand);
  color:#fff;
  margin:10px 0;
}
.wp-block-button__link:hover{
  background:var(--accent);
  color:var(--brand);
}

/* Misc */
[data-form="c6397438-9477-11f0-844a-11629f1ba762"].inline-container,
[data-form="75645f3c-9486-11f0-9105-814373d071ae"].inline-container{
  margin:0 auto;
}

.eo-fullbleed-hr{
  display:block;
  border:0;
  border-top:2px solid var(--wp--preset--color--cyan-bluish-gray);
}

.inline-container h1{ width:100% !important; }
.mastfoot{ display:none !important; }

/* === Search UI (header) === */
#desktop-search-form{ display:none; }

.search-submit{
  background:none;
  border:var(--brand);
  color:var(--white);
}

.search-form .dashicons{
  font-size:20px;
  color:var(--brand);
  line-height:1;
}
.search-form .dashicons:hover{
  color:var(--white);
  line-height:1;
}

.search-field{ border:none; }

/* Search form pill */
.header-search{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  background:var(--white);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  padding:2px 6px 2px 10px;
  line-height:1;
}
.header-search .search-field{
  appearance:none;
  border:none;
  outline:none;
  background:transparent;
  color:#111;
  width:12rem;
  max-width:40vw;
  font-size:.9rem;
  padding:5px 4px;
}
.header-search .search-field::placeholder{ color:#6b6b6b; }

.header-search .search-submit{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:4px 6px;
  border-radius:999px;
}
.header-search .dashicons{
  font-size:18px;
  line-height:1;
  color:var(--brand);
}
.header-search .search-submit:hover .dashicons,
.header-search .search-submit:focus .dashicons{
  filter:brightness(.9);
}

/* === Search results === */
.search-title{
  color:var(--white);
  margin:0 0 .25rem 0;
}
.search-subtitle{
  color:var(--white);
  opacity:.9;
  margin:.25rem 0 0 0;
}

.search-highlight{
  background:linear-gradient(to top, rgba(137,184,220,.45) 40%, transparent 40%);
  padding:0 .05em;
}

.search-results{
  margin:0;
  padding:0;
}

.search-card,
.page-template-single-gpsr-checklist .search-card-units .wp-block-columns,
.page-template-page-knowledgebase .search-card-units .wp-block-group{
  list-style:none;
  padding:1.25rem 1.25rem 1rem;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  margin-bottom:1rem;
}

.search-card__title{
  display:inline-block;
  font-size:1.125rem;
  font-weight:700;
  color:var(--brand);
  text-decoration:none;
  margin-bottom:.25rem;
}
.search-card__title:hover{ text-decoration:underline; }

.search-card__meta{
  font-size:.875rem;
  color:#666;
  margin-bottom:.5rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

.badge-type{
  display:inline-block;
  font-size:.75rem;
  padding:.15rem .5rem;
  line-height:1.1;
  border:1px solid var(--accent);
  color:var(--brand);
  border-radius:999px;
  background:#f7fbff;
}

.search-card__thumb{
  float:right;
  max-width:180px;
  margin:.25rem 0 .5rem .75rem;
  border-radius:8px;
  overflow:hidden;
}
.search-card__excerpt{ margin-bottom:.75rem; }

.section-list ul{ padding-left:0; }
.section-list li{
  list-style:none;
  padding:20px 0;
  border-bottom:1px solid #e1e1e1;
}

.page-template-page-knowledgebase .wp-block-navigation ul{
  list-style:square !important;
}
.page-template-page-knowledgebase .wp-block-navigation ul li.wp-block-navigation-item{
  color:var(--brand);
  padding:20px 0;
  border-bottom:1px dotted #c1c1c1;
}

.search-pagination{ margin-top:1.25rem; }
.search-pagination .page-numbers{ padding:.25rem .5rem; }

.no-results h2{ margin-top:0; }

.section .wp-block-group__inner-container .search-form,
.container .search-form{ margin-top:.5rem; }

/* =========================================
   Yoast FAQ accordion → Search-card style (single column)
   ========================================= */
.wp-block-yoast-faq-block.faq-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:35px;
}
.faq-cards .schema-faq-section{
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  padding:0;
  display:flex;
  flex-direction:column;
  margin:0;
  overflow:clip;
}
.faq-cards .schema-faq-question{ margin:0; }
.faq-cards .faq-toggle{
  width:100%;
  padding:1rem 1.25rem;
  border:0;
  background:transparent;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.125rem;
  font-weight:700;
  color:var(--brand);
  cursor:pointer;
  border-radius:12px 12px 0 0;
}
.faq-cards .faq-toggle::after{
  content:"▾";
  color:#666;
  transition:transform .2s ease, color .2s ease;
}
.faq-cards .faq-toggle[aria-expanded="true"]::after{
  transform:rotate(180deg);
  color:var(--accent);
}
.faq-cards .schema-faq-answer{
  padding:0 1.25rem 1rem;
  color:#666;
  font-size:.975rem;
  line-height:1.6;
  max-width:var(--readable-measure);
}
.faq-cards .schema-faq-answer a{
  color:var(--brand);
  text-decoration:underline;
}
.faq-cards .schema-faq-section:hover{
  border-color:#ddd;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.faq-cards .faq-toggle:focus-visible{
  outline:2px solid rgba(24,35,119,.25);
  outline-offset:2px;
}
.faq-cards .yoast-faq-controls{
  grid-column:1;
  display:flex;
  gap:.5rem;
  margin:0 0 .5rem 0;
}
.faq-cards .yoast-faq-controls button{
  padding:.45rem .7rem;
  border:1px solid var(--accent);
  background:#f7fbff;
  border-radius:999px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  color:var(--brand);
  font:inherit;
  cursor:pointer;
}

/* ===== Plugins / misc ===== */
ul.slick-dots button{
  color:#fff;
  font-size:20px;
  padding:26px 32px 26px 20px !important;
}

/* ===== Small height screens ===== */
@media screen and (max-height: 450px){
  .sidenav{ padding-top:15px; }
  .sidenav a{ font-size:18px; }
}

/* ===== <= 768px tweaks ===== */
@media only screen and (max-width: 768px){
  .ultp-block-row{ grid-template-columns:none !important; }
  .contact-lines{
    display:flex;
    justify-content:center;
    width:100%;
    margin:0 auto;
  }
}

/* ===== >= 768px ===== */
@media only screen and (min-width: 768px){
  body{
    background:url("https://authorisedrepcompliance.co.uk/wp-content/uploads/2020/11/Authorised-representative-grey-world.png")
               center 0 no-repeat;
  }

  ul.navigation{ font-weight:300; }
  .contact-details{ font-size:75%; font-weight:300; }

  .page-template-page-alt-home .container.content,
  .page-id-105 .container.content{ padding:0; }

  footer{ top:80px; }

  .page-template-page-landing .container.content{ padding:0; }
  .page-template-page-landing .container.content p,
  .page-template-page-landing .container.content ul{ padding:0 20%; }

  .page-template-page-landing .container.content h2{
    margin:50px 0;
    letter-spacing:0;
  }

  .alt-home .contact-details{
    text-align:right;
    position:relative;
    font-size:75%;
    font-weight:300;
    padding-top:5px;
  }

  header .contact-details{
    justify-content:flex-end;
    font-size:70%;
    font-weight:400;
    padding-right:30px;
  }

  #mobile-search-form{ display:none; }
  #desktop-search-form{ display:block; }
}

/* ===== >= 872px ===== */
@media only screen and (min-width: 872px){
  #menu-toggle-button{ display:none; }
  ul#menu-top-menu{ display:block; }
}

/* ===== >= 992px ===== */
@media only screen and (min-width: 992px){
  header .alt-home .menu-top-menu-container{
    float:right;
    margin-top:30px;
  }
  header .alt-home .menu{ text-align:right; }
  header{ padding-bottom:20px; }
}
.zoomchart {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.zoomchart__toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

/* Zoom chart buttons – match site style */
.zc-btn {
  background-color: #182377;
  color: #ffffff;
  border: none;
  border-radius: 9999px; /* lozenge shape */
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
	line-height: 1.2;
}

/* Hover + focus (keyboard accessibility) */
.zc-btn:hover,
.zc-btn:focus {
  background-color: #89b8dc;
  color: #182377;
  outline: none;
}

/* Optional: active/click state */
.zc-btn:active {
  transform: translateY(1px);
}




/* Make the SVG image start centered-ish and scale nicely */
#zoomchart-img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}

.zoomchart__hint {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 10px;
}