/* Wider screen overrides for Article nodes. */
@media screen and (min-width: 1024px) {
  body:not(.page-node-type-feature) #main-nav .navbar {
    /* Can't use is-hidden-desktop because of Article formatting. */
  }

  body:not(.page-node-type-feature) #main-nav .navbar .navbar-start {
    visibility: hidden !important;
    display: none !important;
  }

  body.page-node-type-feature main {
    position: relative;
    top: 42px;
  }

  body.page-node-type-feature #main-nav {
    position: fixed;
    width: 100%;
    z-index: 9;
  }

  body.page-node-type-feature #main-nav .navbar {
    border-top: 1px solid hsl(0, 0%, 71%);
    border-bottom: 1px solid hsl(0, 0%, 71%);
    background-color: hsl(0, 0%, 100%);
    padding: 0 1rem;
  }

  body.page-node-type-feature #main-nav .navbar .navbar-start {
    visibility: hidden !important;
    display: none !important;
  }

  body.page-node-type-feature #main-nav .navbar .navbar-start .user-menu {
    position: fixed;
    top: 1rem;
    right: calc(0.75rem * 2);
    height: fit-content;
    flex-flow: column;
  }

  body.page-node-type-feature #main-nav .navbar .navbar-start .search-block-form {
    line-height: 2rem;
  }

  body.page-node-type-feature #main-nav .navbar .navbar-burger {
    visibility: hidden !important;
    display: none !important;
  }

  body.page-node-type-feature #main-nav .navbar #main-navbar-menu {
    /* Keep social icons out of scroll bar. */
    margin: auto 1rem;
  }

  body.page-node-type-feature .is-one-quarter {
    /* No hamburger, so move up. */
    padding-top: 1.5em;
  }

  .region-sidebar {
    /* Make border go to the bottom. */
    height: 100%;
  }

  /* Override Bulma 'columns' formatting to get correct border width. */
  footer {
    margin: 0 0 2rem 0 !important;
  }

  .user-menu {
    justify-content: flex-end;
  }

  .region-header-right .user-menu {
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }

  .region-header-right .user-menu .button {
    width: 9rem;
  }

  /* Center logo, prevent search input from shifting logo */
  .region-header-left, .region-header-right {
    flex-basis: 20%;
    flex-shrink: 0;
    align-content: center;
  }

  .region-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .view-taxonomy-term .view-content > div, .view-classified .view-content > div {
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
  }
}

/* Tablet & Mobile */
@media screen and (max-width: 1023px) {

  /* Keep the content + sidebar columns stacked until the desktop nav appears
     (1024px). Bulma flexes `.columns:not(.is-desktop)` side-by-side from
     769px; this overrides it (the `main` + `:not(.is-desktop)` selector
     outranks Bulma's) so the sidebar drops below the content across the whole
     769-1023 range, matching the nav and front-page mobile breakpoint. */
  main.columns:not(.is-desktop) {
    display: block;
  }

  /* Masthead branding block. The id carries the theme name
     (block-tiempos-branding, block-tiemposcni-branding, …), so match the
     "-branding" suffix to cover every tiempos theme variant. */
  [id$="-branding"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: var(--card-mobile-branding-shadow);
    padding: var(--card-mobile-branding-padding);
  }

  .layout-container {
    margin: 0 0.75rem 0.75rem;
  }

  .region-top-bar {
    align-items: center;
    margin-bottom: var(--gap);
  }

  .region-sidebar {
    justify-content: center;
  }

  .region-header-left .block, .region-header-center .block, .region-header-right .block {
    margin-bottom: 0;
  }

  .region-header-left [id~=-hamburger] {
    margin: 0.5rem 0;
  }

  #block-extendedsearch {
    visibility: hidden !important;
    display: none !important;
  }

  header.columns {
    margin: 0 auto;
  }

  #main-nav .navbar {
    min-height: 0;
    position: inherit;
  }

  #main-nav .navbar.closed {
    border: 0 !important;
  }

  #main-nav .navbar .navbar-start {
    display: flex;
    padding: 0;
  }

  #main-nav .navbar .navbar-start .column {
    padding: 0;
  }

  .region-top-bar {
    align-items: center;
  }

  #main-nav .navbar .navbar-start .navbar-menu {
    display: block !important;
    height: fit-content;
    width: fit-content;
    float: right;
    margin-right: 0.75rem;
  }

  #main-nav .navbar .navbar-start .navbar-menu .column {
    padding-top: 0;
  }

  #main-nav .navbar .navbar-start .navbar-menu .button, #main-nav .navbar .navbar-start .navbar-menu .button:first-child {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.3rem;
    height: 1.6rem; /* Fix padding. */
    line-height: 1;
  }

  #main-nav .navbar .navbar-start [data-drupal-selector=search-block-form] {
    /* Stop search icon from jumping. */
    line-height: 2rem;
  }

  #main-nav .navbar .navbar-start [data-drupal-selector=search-edit-submit] {
    cursor: pointer;
    margin-right: 0.5rem;
  }

  #main-nav .navbar .navbar-end {
    position: absolute;
    top: 8px;
  }

  .region-navigation {
    z-index: 32;
    margin-bottom: 0 !important;
  }

  .navbar-burger {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  /* Move menus below admin toolbar. */
  .toolbar-fixed.toolbar-horizontal.toolbar-tray-open .navbar-start {
    margin-top: 60px;
  }

  /* To show header in moble menu */
  .z-index-fix {
    z-index: 35;
    width: fit-content;
  }

  .z-index-fix.region-top-bar {
    margin: 0;
  }

  #main-nav .navbar .navbar-start .block-system-branding-block {
    visibility: hidden !important;
    display: none !important;
  }

  #main-nav .navbar .navbar-end a {
    margin-right: 0.5rem;
  }

  #main-nav .navbar .navbar-end a:first-child {
    margin-left: 0;
  }

  #main-nav .navbar .navbar-end a .is-size-3 {
    font-size: 2.5rem !important;
  }

  .region-top-bar #block-date {
    margin-top: 0;
    display: flex;
    flex-direction: row-reverse;
  }

  .region-top-bar #block-date p {
    align-self: center;
  }

  .region-header-left #block-date p {
    font-size: 0.9rem;
    line-height: 1rem;
  }

  .region-header-right {
    padding: 0.5rem calc(0.75rem * 2) 0 0.75rem;
  }

  /* Center logo, prevent search input from shifting logo */
  .region-header-left, .region-header-right {
    flex-basis: 20%;
    flex-shrink: 0;
    align-content: center;
  }

  .region-navigation.border-bottom {
    margin-top: 0.75rem;
    border-bottom: none;
  }

  .region-header-left {
    padding: 0.5rem;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  /* Row 1: Date and Search */
  .region-header-left .block-date-block p {
    margin: 0;
    white-space: nowrap;
    font-weight: 600;
  }

  .region-header-left .search-block-form {
    flex-grow: 1;
    margin-left: 0.8rem;
  }

  /* Row 2: Hamburger (left) and Social icons will be on navbar-end (right) */
  .region-header-left .block-date-block {
    display: contents; /* Allow children to participate in parent flex */
  }

  .region-header-left .block-date-block .navbar-burger {
    order: 3;
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Soft hairline between articles on taxonomy term pages (e.g. /sports),
     matching the front-page story separators. Mobile only (this block);
     on desktop the rows are cards with their own borders. */
  .view-taxonomy-term .view-content > div:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 1rem;
  }

  /* Slight background highlight when hovering/tapping an article — front page
     (lead stories + sections) and taxonomy term pages. Mobile only (this
     block). :active gives touch devices the same feedback on tap. */
  .view-id-frontpage .view-content > div,
  .front-page-sections .view-content > div,
  .view-taxonomy-term .view-content > div {
    position: relative;
    transition: background-color 0.15s ease;
  }

  .view-id-frontpage .view-content > div:hover,
  .view-id-frontpage .view-content > div:active,
  .front-page-sections .view-content > div:hover,
  .front-page-sections .view-content > div:active,
  .view-taxonomy-term .view-content > div:hover,
  .view-taxonomy-term .view-content > div:active {
    background-color: var(--color-light-gray);
  }

  /* Whole card is a tap target: the headline link (rel="bookmark") stretches
     to cover the row (positioned above), so tapping anywhere opens the
     article. The author byline link is raised above the overlay so it stays
     clickable. */
  .view-id-frontpage .view-content > div a[rel="bookmark"]::after,
  .front-page-sections .view-content > div a[rel="bookmark"]::after,
  .view-taxonomy-term .view-content > div a[rel="bookmark"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .view-id-frontpage .view-content > div .submitted a,
  .front-page-sections .view-content > div .submitted a,
  .view-taxonomy-term .view-content > div .submitted a {
    position: relative;
    z-index: 2;
  }

  .view-taxonomy-term .node--view-mode-teaser:not(.node--type-classified-ad) .node__content,
  .view-taxonomy-term .node--view-mode-taxonomy:not(.node--type-classified-ad) .node__content:has(.image-container),
  .view-classified .node--view-mode-teaser:not(.node--type-classified-ad) .node__content,
  .view-classified .node--view-mode-taxonomy:not(.node--type-classified-ad) .node__content {
    grid-template-columns: auto;
    grid-gap: 0.5rem
  }

  .view-taxonomy-term .node--view-mode-teaser:not(.node--type-classified-ad) .node__content .image-container,
  .view-taxonomy-term .node--view-mode-taxonomy:not(.node--type-classified-ad) .node__content .image-container,
  .view-classified .node--view-mode-teaser:not(.node--type-classified-ad) .node__content .image-container,
  .view-classified .node--view-mode-taxonomy:not(.node--type-classified-ad) .node__content .image-container {
    /*aspect-ratio: 7 / 4;*/
  }

  .block-views-blockspecial-sections-block-1 .view-content,
  .block-views-blockspecial-sections-block-2 .view-content,
  .block-views-blockbusiness-directory-block-2 .view-content {
    margin-left: 0;
    margin-right: 0;
  }

  .block-views-blockbreaking-news-block-1 {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    padding: var(--gap);
  }

  .block-views-blockbreaking-news-block-1 .view-id-breaking_news {
    margin-bottom: 0;
  }

  .block-views-blockspecial-sections-block-1 .view-content:not(:has(ul.blazy)),
  .block-views-blockspecial-sections-block-2 .view-content:not(:has(ul.blazy)),
  .block-views-blockbusiness-directory-block-2 .view-content {
    grid-template-columns: 1fr 1fr;
  }

  header.columns {
    margin: 0;
  }

  .navbar {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .region-header > div {
    padding-top: 0;
    padding-bottom: 0;
  }

  main .main-content-inner {
    border: 0;
  }

  /* Bulma overrides for tiles, for Special Sections. */
  .tile.is-ancestor {
    margin-left: 0;
    margin-right: -0.5rem;
  }

  .tile.is-parent {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
  }

  .tile.is-child.is-3 {
    padding-right: 0.5rem !important;
  }

  #main-nav {
    padding: 0;
  }

  #main-nav .navbar .navbar-start {
    margin-top: 0;
    padding-left: calc(0.75rem + 2px);
  }

  .page-node-type-feature .addtoany_list {
    width: 32px;
  }

  .page-node-type-feature article .is-one-quarter .page-title {
    max-width: 90vw;
  }

  .page-node-type-feature article .is-one-quarter .site-logo {
    position: absolute;
    right: 49px;
    top: 0.7rem;
    width: 40vw;
  }

  .page-node-type-feature article .is-full .node__content {
    padding-top: 2rem;
  }

  .page-node-type-feature article .is-full .node__content p {
    margin: 0 4rem 0.75rem 4rem;
  }

  .page-node-type-feature article .is-full .node__content .field--name-body blockquote {
    margin: 0.75rem 4rem 0.75rem 4rem;
  }

  .page-node-type-feature article .is-full .node__content .field--name-body blockquote p {
    margin: 0 0 0.75rem 0;
  }

  .page-node-type-feature article .is-full .node__content .field--name-body ul, .page-node-type-feature article .is-full .node__content .field--name-body ol {
    margin: 0 4rem 0.75rem 6rem;
  }

  .page-node-type-feature article .is-full .node__content .field--name-field-tags {
    margin: 3rem 4rem 0.75rem 4rem;
  }

  /* Hide content on mobile */
  #block-friends2followsidebar,
  #block-friends2followsidebar-2,
  .region-sidebar .block-etype-block {
    visibility: hidden !important;
    display: none !important;
  }

  .region-content .block-etype-block {
    visibility: visible !important;
    display: block !important;
    text-align: center;
    padding: 0 0.75rem;
  }

  #block-cni-site-branding {
    max-width: 90vw;
    margin: auto;
  }

  /* Sidebar full-width on mobile (overrides the desktop fixed 324px). */
  .region-sidebar {
    border-left: none !important;
    flex: 1 1 100% !important;
    max-width: 100%;
    text-align: center;
  }

  /* Center sidebar block content on mobile. Flex layout centers any
     child element (block- or inline-level, including iframes and the
     OpenWeather widget's injected fixed-width card) horizontally. */
  .region-sidebar > .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .region-sidebar > .block,
  .region-sidebar .block > * {
    margin-left: auto;
    margin-right: auto;
  }

  .region-sidebar > .block#block-popularcontent,
  .region-sidebar > .block#block-tiemposcni-popularcontent {
    display: block;
    text-align: left;
  }

  /* Footer columns full-width on mobile (override the desktop 1/3 lock). */
  footer > .columns > .column {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Center address (footer_left) and copyright (footer_center) when the
     footer columns stack on mobile. */
  .region-footer-left,
  .region-footer-center,
  .region-footer-right {
    text-align: center;
  }

  .region-top-bar {
    margin-bottom: 0;
  }

  .view-advertisements .views-row img {
    width: 100vw;
  }

  .region-content-ads {
    display: block;
  }

  /* ===========================================================
     Expanded mobile menu — structured list / card panel.
     Full-width tappable rows with hairline dividers, a blue
     left-accent active state, and the account actions grouped
     in a 2-up button bar pinned on top. The container picks up
     a border / shadow / rounded corners and an inset margin only
     when the "card shadows" theme setting is on (via the gated
     --card-* / --menu-card-margin vars); otherwise it is a flat
     full-bleed list.

     Scoped to :not(.is-really-invisible) so the burger toggle (which
     adds .is-really-invisible / display:none !important) can still hide
     the panel — otherwise this higher-specificity rule would win and the
     menu would be stuck open. @see js/theme.js navbar-burger-click.
     =========================================================== */
  #main-nav .navbar .navbar-start:not(.is-really-invisible) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    width: auto;
    margin: var(--menu-card-margin, 0);
    padding: 0 !important;
    background-color: var(--color-white);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
  }

  #main-nav .navbar .navbar-start > .column {
    flex: none;
    width: 100%;
    padding: 0;
  }

  /* Account actions (Renew / Log In / Subscribe / e-Edition) on top. */
  #main-nav .navbar .navbar-start > .column:has(.user-menu) {
    order: -1;
    padding: 0.5rem;
    background-color: var(--color-light-gray);
    border-bottom: 1px solid var(--color-border);
  }

  #main-nav .navbar .navbar-start .user-menu {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.5rem;
    background-color: inherit;
  }

  /* Two buttons per row; hidden (auth-state) buttons keep their own
     display:none — do not override `display` here or they reappear. */
  #main-nav .navbar .navbar-start .user-menu .button,
  #main-nav .navbar .navbar-start .user-menu .button:first-child {
    flex: 1 1 calc(50% - 0.25rem);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    line-height: 1.1 !important;
    text-align: center;
    border-radius: 6px;
    letter-spacing: 0.04em;
  }

  /* Nav links as full-width rows with hairline dividers. */
  #main-nav .navbar .navbar-start #mobile-nav {
    display: flex;
    flex-direction: column;
  }

  #main-nav .navbar .navbar-start #mobile-nav .navbar-item {
    width: 100% !important;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    background-color: var(--color-white);
    font-size: 1.05rem;
    line-height: 1.2;
    transition: background-color 0.12s ease;
  }

  #main-nav .navbar .navbar-start #mobile-nav .navbar-item:last-child {
    border-bottom: none;
  }

  #main-nav .navbar .navbar-start #mobile-nav .navbar-item.is-active {
    border-left-color: var(--color-link-hover);
    color: var(--color-link-hover);
    font-weight: 700;
  }

  #main-nav .navbar .navbar-start #mobile-nav .navbar-item:hover,
  #main-nav .navbar .navbar-start #mobile-nav .navbar-item:active {
    background-color: var(--color-light-gray);
  }

}

@media screen and (max-width: 467px) {
  .page-node-type-article article .node__content .image-container {
    /* Images on Premium Content pages - flex displays stretched vertically on many phones (iPhone/iPad) */
    display: block;
  }

  .page-node-type-feature article .is-full .main-caption {
    margin: 0.5rem;
    font-size: 0.9rem;
  }

  .page-node-type-feature article .is-full .node__content > .field {
    margin: 2rem 1rem 1rem;
  }

  .page-node-type-feature article .is-full .node__content > .field--name-body {
    margin: 0;
  }

  .page-node-type-feature article .is-full .node__content > .field--name-body p, .page-node-type-feature article .is-full .node__content > .field--name-body blockquote, .page-node-type-feature article .is-full .node__content > .field--name-body ul, .page-node-type-feature article .is-full .node__content > .field--name-body ol {
    margin: 1rem;
  }
}

@media screen and (min-width: 467px) and (max-width: 1023px) {
  footer {
    margin-top: 0 !important;
  }
}