/* Use this file to override theme CSS rules */

/* Header */
#pre-header #block-useraccountmenu {
  padding: 0;
}

#header #block-socialiconblockforheaderinnewstheme {
  padding: 0;
  width: fit-content;
}

#pre-header .colgrid .region-pre-header-right ul.menu {
  display: flex;
}

@media (min-width: 992px) {
  .logo-and-site-name-wrapper {
    display: flex;
    justify-content: center;
  }
  .footer-area .logo-and-site-name-wrapper {
    justify-content: left;
  }
  #header .rowgrid {
    grid-template-columns: auto auto;
    display: grid;
  }
  .is-hidden-tablet {
    display: none !important;
  }
}


@media (max-width: 767px) {
  .is-hidden-mobile {
    display: none !important;
  }
  #header .dropdown .trigger {
    font-size: 27px;
    padding: 0;
  }
  #header .dropdown .dropdown-menu {
    right: -15px;
    margin-left: 15px;
  }
}
/* Header Icons and Search Positioning */
#block-socialiconblockforheaderinnewstheme {
  float: left;
  width: 100%;
  z-index: 9999;
}

.e-edition {
  text-align: center;
}

#block-etypeeedition .content {
  text-align: center;
}

/* Second Sidebar */
.region-sidebar-second #block-weatherwidget {
  padding: 0;
}
.region-sidebar-second #block-mostrecentpoll legend {
  display: none;
  visibility: hidden;
}
.region-sidebar-second #block-mostrecentpoll label {
  display: inline-block;
}
.region-sidebar-second #block-mostrecentpoll #edit-choice--wrapper {
  margin: 1px 0;
}
.region-sidebar-second #block-mostrecentpoll input[type=radio], .region-sidebar-second #block-mostrecentpoll input[type=checkbox] {
  margin: 0 4px 3px;
  position: relative;
  top: -2px;
}
.region-sidebar-second .view-id-advertisements .views-row {
  padding-bottom: 40px;
}
.region-sidebar-second .view-id-advertisements .views-row:last-child {
  padding-bottom: 0;
}

/* Advertisement Blocks. */
.view-advertisements .views-row {
  display: flex;
  justify-content: center;
}
.view-advertisements .views-row img {
  height: auto;
}

.premium_message {
  margin-top: 1rem;
  font-weight: bold;
}

/* Paywall CTA gate: structure/colours load with the card via the
   etype/paywall_card library; only the theme's UI font is set here. */
.paywall-card__eyebrow,
.paywall-card__headline,
.paywall-card__body,
.paywall-card__btn,
.paywall-card__login {
  font-family: var(--font-sans), sans-serif;
}

/* fix overlay in sidebar tabs */
.sidebar #block-sidebartabs .views-field-field-image .overlay {
  display: none;
}

/* Breaking news block */
#block-views-block-breaking-news-block-block-1 {
  display: flex;
  align-items: center;
  background-color: #ce0000;
  padding: 15px;
}
#block-views-block-breaking-news-block-block-1 .views-field-title a {
  line-height: 1.7;
  color: #fff;
}
#block-views-block-breaking-news-block-block-1 .title {
  color: #fff;
  margin-bottom: 2px;
}
#block-views-block-breaking-news-block-block-1 .content {
  margin-left: 1rem;
}

/* Webforms Page */
#webforms h2.node__title {
  margin-bottom: 0;
}

/* Embedded Image padding */
.node--type-mt-post .field--name-body img.align-left {
  padding-right: 2rem;
}

.placeholder {
  display: inline;
  min-height: unset;
  vertical-align: unset;
  cursor: inherit;
  background-color: unset;
  opacity: 1;
}

/* ==========================================================================
   Facelift (2026) — cosmetic spacing, typography, and interaction polish.
   Scoped so changes can be reverted by removing this block.
   ========================================================================== */

/* Fluid horizontal padding on the desktop main-nav items, so they tighten up
   at in-between widths and squeeze onto one line instead of wrapping the last
   item. menu.css sets fixed 16px (and 28px on submenu parents for the arrow);
   this weight-100 file overrides those from 992px up. clamp scales the padding
   with the viewport -- comfortable 16px on wide screens, down to ~11px as it
   narrows -- and never below the floor that keeps text off the edge. */
@media (min-width: 992px) {
  #main-navigation ul.sf-menu > li > a {
    padding-left: clamp(6px, 1.1vw, 16px);
    padding-right: clamp(6px, 1.1vw, 16px);
  }
  /* Submenu parents keep more room on the right so the arrow indicator never
     butts against the label -- its own clamp, floored above the arrow width. */
  #main-navigation ul.sf-menu > li > a.menuparent {
    padding-right: clamp(14px, 1.2vw, 28px);
  }

  /* The module's mobile-only login link (#etype-login-mobile) has its anchor
     hidden on desktop, but its empty <li> stayed in the flow as a zero-width
     inline-block. That slot, plus the whitespace before it, is enough to tip
     the last real item onto a second line right at the edge -- so the nav
     reads as two rows while all ten visible items sit on one. Hide the list
     item as well. */
  #main-navigation .sf-menu > li:has(> #etype-login-mobile) {
    display: none;
  }
}

/* 1. More breathing room between front-page sections. */
.region-content .block-views,
#content .block-views {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* 2. Teaser card: tighter internal rhythm. */
.node--view-mode-teaser .field--name-field-image,
.node--view-mode-teaser .field--name-field-small-image {
  margin-bottom: 0.5rem;
}
.view-taxonomy-term .node--view-mode-teaser h2.node__title,
.view-feed .node--view-mode-teaser h2.node__title,
.view-frontpage .node--view-mode-teaser h2.node__title,
.view-archive .node--view-mode-teaser h2.node__title {
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.node--view-mode-teaser .field--name-body,
.view-latest-objects .views-field-body {
  line-height: 1.6;
}

/* 3 + 4. Section headings: extra padding + short accent bar. */
#page .block-views > h2 {
  position: relative;
  padding-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
#page .block-views > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 3px;
  background-color: currentColor;
}

/* 8. Headline hover: subtle underline for affordance. */
.view-frontpage .node__title a:hover,
.view-latest-objects .views-field-title a:hover,
.view-taxonomy-term .node__title a:hover,
.view-feed .node__title a:hover,
.view-archive .node__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 9. Card image: gentle zoom on hover. */
.node--view-mode-teaser .field--name-field-image,
.node--view-mode-teaser .field--name-field-small-image,
.view-latest-objects .views-field-field-image {
  overflow: hidden;
}
.node--view-mode-teaser .field--name-field-image img,
.node--view-mode-teaser .field--name-field-small-image img,
.view-latest-objects .views-field-field-image img {
  transition: transform 250ms ease;
}
.node--view-mode-teaser:hover .field--name-field-image img,
.node--view-mode-teaser:hover .field--name-field-small-image img,
.view-latest-objects .views-row:hover .views-field-field-image img {
  transform: scale(1.02);
}

/* 11. "View More…" link: bolder with arrow glyph. */
.more-link a {
  font-weight: 600;
}
.more-link a::after {
  content: " \2192";
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 200ms ease;
}
.more-link a:hover::after {
  transform: translateX(3px);
}

/* 12. Footer: clean separation from content. */
.footer-area {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 2rem;
  padding-top: 2.5rem;
}

/* --- Typography polish ---------------------------------------------------- */

/* A. Serif headlines on listings + article titles (uses already-loaded Lora).
   Scoped to content so it doesn't fight sidebars, admin, or hff-XX overrides
   in areas where those are load-bearing. body-prefix bumps specificity over
   .hff-XX h2 rules. */
body .view-frontpage .node--view-mode-teaser h2.node__title,
body .view-taxonomy-term .node--view-mode-teaser h2.node__title,
body .view-archive .node--view-mode-teaser h2.node__title,
body .view-feed .node--view-mode-teaser h2.node__title,
body .view-latest-objects .views-field-title,
body .node--view-mode-full > h1.node__title,
body .node--view-mode-full > header h1.node__title {
  font-family: var(--font-serif), Georgia, "Times New Roman", serif;
  letter-spacing: -0.005em;
}

/* B. Rendering polish. */
body {
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#page h1,
#page h2,
#page h3,
#page .node__title {
  text-wrap: balance;
}
#page .field--name-body p,
#page .view-latest-objects .views-field-body,
#page .views-field-body p {
  text-wrap: pretty;
}

/* C. Size & weight hierarchy. */
#page .block-views > h2 {
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
}
body .view-frontpage .node--view-mode-teaser h2.node__title,
body .view-taxonomy-term .node--view-mode-teaser h2.node__title,
body .view-archive .node--view-mode-teaser h2.node__title,
body .view-feed .node--view-mode-teaser h2.node__title {
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.35rem);
  line-height: 1.25;
}

/* --- Mobile pre-header cleanup ------------------------------------------- */
/* On mobile the user menu, social icons, and search each rendered as huge
   stacked blocks. Compact them into a tidy horizontal strip. */
@media (max-width: 991px) {
  #pre-header .region-pre-header-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Any menu inside pre-header: inline, compact, no full-width blocks. */
  #pre-header .block-menu,
  #pre-header [id^="block-useraccountmenu"],
  #pre-header [id^="block-usermenu"],
  #pre-header [id^="block-accountmenu"],
  .pre-header-area .block-menu {
    width: auto;
    padding: 0;
    background: transparent;
  }
  /* Scoped to the left region. These rules compact a menu into a row of small
     inline text links, which is still right for a secondary menu sitting next
     to the social icons -- but the account links on the right are now buttons
     (css/components/header.css), and the `background: transparent !important`
     here made a call-to-action fill impossible at any specificity, so
     Subscribe kept only its bold weight and read as a slightly heavier version
     of its neighbours. */
  #pre-header .region-pre-header-left ul.menu,
  .pre-header-area ul.menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #pre-header .region-pre-header-left ul.menu li,
  .pre-header-area ul.menu li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    background: transparent !important;
    border: 0;
  }
  #pre-header .region-pre-header-left ul.menu li a,
  .pre-header-area ul.menu li a {
    padding: 0.35rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: transparent !important;
    white-space: nowrap;
  }

  /* Social icons: constrain to reasonable size. */
  #pre-header #block-socialiconblockforheaderinnewstheme,
  #block-socialiconblockforheaderinnewstheme {
    float: none;
    width: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  #pre-header #block-socialiconblockforheaderinnewstheme a,
  #block-socialiconblockforheaderinnewstheme a {
    display: inline-flex;
    align-items: center;
  }
  #pre-header #block-socialiconblockforheaderinnewstheme img,
  #pre-header #block-socialiconblockforheaderinnewstheme svg,
  #block-socialiconblockforheaderinnewstheme img,
  #block-socialiconblockforheaderinnewstheme svg {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
  }

  /* Search: fill remaining row between the social icons and the hamburger. */
  #pre-header #search-block-form,
  .pre-header-area #search-block-form {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    align-items: center;
  }
  /* Don't let the social icon block grow — keep it compact so search gets
     the leftover width. */
  #pre-header #block-socialiconblockforheaderinnewstheme,
  #block-socialiconblockforheaderinnewstheme {
    flex: 0 0 auto;
  }
  /* Zero out .form-item wrapper margin inside the search form — it's the
     reason the input appears vertically offset from the submit button. */
  #pre-header #search-block-form .form-item,
  .pre-header-area #search-block-form .form-item {
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }
  #pre-header #search-block-form input.form-text,
  .pre-header-area #search-block-form input.form-text {
    width: 100%;
  }
  #pre-header #search-block-form,
  .pre-header-area #search-block-form {
    height: 34px !important;
  }
  #pre-header #search-block-form input.form-text,
  .pre-header-area #search-block-form input.form-text {
    height: 32px !important;
    min-height: 32px;
    line-height: 1.2;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    vertical-align: middle;
    border-width: 1px;
  }
  #pre-header #search-block-form #edit-submit,
  #pre-header #search-block-form #edit_submit,
  .pre-header-area #search-block-form #edit-submit,
  .pre-header-area #search-block-form #edit_submit {
    height: 34px !important;
    min-height: 34px;
    line-height: 1.2;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    vertical-align: middle;
    border-width: 1px;
  }
  /* The theme's default pre-header button hover fades to 60% opacity, which
     disappears against gray/dark color schemes. Darken instead. */
  #pre-header #search-block-form #edit-submit:hover,
  #pre-header #search-block-form #edit_submit:hover,
  #pre-header #search-block-form #edit-submit:focus,
  #pre-header #search-block-form #edit_submit:focus,
  .pre-header-area #search-block-form #edit-submit:hover,
  .pre-header-area #search-block-form #edit_submit:hover,
  .pre-header-area #search-block-form #edit-submit:focus,
  .pre-header-area #search-block-form #edit_submit:focus {
    background-color: var(--color-primary-dark, #222);
    color: #fff;
  }
  #pre-header #search-block-form input.form-text,
  .pre-header-area #search-block-form input.form-text {
    font-size: 0.875rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #pre-header #search-block-form #edit-submit,
  #pre-header #search-block-form #edit_submit,
  .pre-header-area #search-block-form #edit-submit,
  .pre-header-area #search-block-form #edit_submit {
    font-size: 0.8125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    min-width: 0;
  }

  /* --- Main-menu toggle -------------------------------------------------- */
  /* Sits in the navigation band under the masthead and scrolls with the page.
     It was previously pinned to the viewport, which kept it reachable but left
     it floating over the pre-header, overlapping whatever was beneath it and
     forcing a 72px reservation in the account row to keep clear of it. In
     flow it also gives the band its height back -- with the toggle taken out
     of flow, #header collapsed to 0px. */
  #main-navigation .sf-accordion-toggle.sf-style-none {
    position: static;
    width: auto;
    height: 52px;
    text-align: right;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  #main-navigation .sf-accordion-toggle.sf-style-none a {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #fff;
  }
  #main-navigation .sf-accordion-toggle.sf-style-none a::after {
    font-size: 1.5rem;
    line-height: 1;
  }

  /* js/custom/header.js moves the toggle up into the pre-header, leaving this
     bar empty while the menu is closed, so collapse it. Conditioned on the
     toggle actually having left rather than assumed, so the bar still gives
     itself height if the move has not happened -- otherwise a white glyph
     would sit on the page background with no band behind it. */
  #main-navigation {
    background: transparent;
  }
  #main-navigation .region-navigation:has(.sf-accordion-toggle),
  #main-navigation .region-navigation:has(.menu-toggle:not(.menu-toggle--hide)) {
    min-height: 52px;
  }
  /* Only collapse when the band really is empty. `.menu-toggle` covers the
     sites whose navigation is a plain menu block rather than a Superfish one:
     their toggle lives here, and without the height the band paints no colour
     and its white glyph vanishes against the page. */
  #main-navigation
    .region-navigation:not(:has(.sf-accordion-toggle)):not(:has(.menu-toggle:not(.menu-toggle--hide))):not(:has(.sf-expanded)):not(:has(.is-open)) {
    min-height: 0;
    height: 0;
    overflow: visible;
  }

  /* Mobile accordion polish: drop the redundant chevron (the +/- is the
     actual toggle), hide Superfish's cloned-parent duplicates, equalize
     row heights between top-level and sub items. */
  #main-navigation .sf-sub-indicator {
    display: none !important;
  }
  #main-navigation .sf-clone-parent {
    display: none;
  }
  #main-navigation ul.menu.sf-accordion li a,
  #main-navigation ul.menu.sf-accordion ul li a {
    line-height: 1.2;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    min-height: 0;
    height: auto;
  }

  /* --- Widen header rows -------------------------------------------------- */
  /* The user account menu used to be hidden here, on the understanding that
     menu.js cloned its items into the main-menu accordion. That clone looked
     for #superfish-main-menu, which Superfish never renders, so it never ran
     and the links were simply unreachable on a phone -- on the sites whose
     block id carries the newsplus- prefix, which is why it went unnoticed
     elsewhere. The account links are now a row of buttons in the bar; see
     css/components/header.css. */

  /* Let the pre-header row span the full width. */
  #pre-header,
  #pre-header > .container,
  .pre-header-area > .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    max-width: none;
  }
  #pre-header .region-pre-header-right {
    width: 100%;
    max-width: none;
    /* The account links now sit on their own row below the fixed hamburger
       rather than beside it, so the 72px reservation on the right and the
       0.75rem indent on the left only made the row look misaligned against
       the social icons above. Gutters come from the container instead. See
       css/components/header.css. */
    padding-left: 0;
    padding-right: 0;
  }

  /* Masthead: fill available width on mobile. */
  #block-newsplus-branding .site-branding__logo,
  #block-newsplus-branding .site-branding__logo img,
  .logo-and-site-name-wrapper img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  /* Override the 0.75 scale transform applied to .logo at ≤767px — it
     visually shrinks the masthead and leaves a gap on both sides. */
  .logo {
    transform: none;
  }

  /* Strip inner padding on #header-top so the masthead can reach the edges. */
  #header-top,
  #header-top > .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Items cloned into the main menu by menu.js. */
  #superfish-main-menu .mobile-cloned-user-item > a {
    font-style: italic;
  }
}