/* ============================================================
   DESIGN CSS — predictable header + ad spacing
   Fixes:
   - Removes blank space BEFORE logo (caused by u-valign-middle flex centering)
   - Prevents hamburger menu from shifting when header spacing changes
   - Keeps header ad + story spacing tight
   - Removes mobile blank gap when header-ad section is hidden
   ============================================================ */


/* ============================================================
   HEADER: remove the “blank space before logo”
   Root cause: u-valign-middle-* classes vertically center content.
   Fix: force top alignment inside the header container.
   ============================================================ */

#header.u-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make the header’s inner sheet top-aligned and predictable */
#header.u-header .u-sheet-1 {
  position: relative !important;            /* anchor for the absolute menu */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* IMPORTANT: no vertical centering */
  align-items: center !important;           /* keep logo/subtitle centered */
  min-height: auto !important;              /* do NOT force tall header height */
  padding-top: 12px !important;             /* adjust to taste */
  padding-bottom: 8px !important;
}

/* Lock hamburger/menu position so padding changes don’t move it */
#header.u-header .u-menu-1 {
  position: absolute !important;
  top: 18px !important;                     /* adjust to taste */
  right: 18px !important;
  margin: 0 !important;
}

/* Logo block spacing */
#header.u-header .u-image-1 {
  margin: 0 auto 0 !important;              /* no extra top gap */
}

/* Subtitle spacing (reduce “too much space” between logo and subtitle) */
#header.u-header .u-text-1 {
  margin-top: 6px !important;               /* smaller = closer to logo */
  margin-bottom: 8px !important;
}


/* Keep your non-square logo behavior */
.u-logo-image {
  width: min(480px, 92vw);
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
}

.u-logo {
  height: auto !important;
}


/* ============================================================
   HEADER BANNER AD SECTION (u-section-1): tighten spacing
   ============================================================ */

.u-section-1 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-section-1 .u-sheet-1 {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Header ad spacing */
.u-section-1 .u-custom-html-1 {
  margin: 8px auto 8px !important;          /* adjust 8px -> 0px if desired */
}


/* ============================================================
   STORY SECTION (u-section-2): reduce gap below header ad
   ============================================================ */

.u-section-2 .u-layout-wrap-1 {
  margin-top: 16px !important;
  margin-bottom: 59px;
}

.u-section-2 .u-text-1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   STORY COLUMN: add symmetric breathing room (THIS IS THE FIX)
   Your story column is .u-layout-cell-1 with .u-container-layout-1
   ============================================================ */
.u-section-2 .u-layout-cell-1 .u-container-layout-1 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* ============================================================
   DESKTOP: ALIGN LEFT SKYSCRAPER TOWARD STORY COLUMN
   ============================================================ */

@media (min-width: 768px) {
  /* Push the left skyscraper content to the RIGHT side of its column */
  .u-section-2 .u-custom-html-left {
    display: flex;
    justify-content: flex-end;
  }

  /* Add the mirror gutter on the left */
  .u-layout-cell-0 .u-container-layout-0 {
    padding-right: 24px !important;
  }

  /* Ensure the ad block itself can “hug” the inside edge */
  .u-section-2 .u-custom-html-left ins,
  .u-section-2 .u-custom-html-left iframe {
    display: block;
    margin-left: auto;
    margin-right: 0;
  }
}

/* When the LEFT skyscraper disappears (your HTML hides it at <=1220px),
   add a small outer gutter so text never touches the browser edge. */
@media (max-width: 1220px) {
  .u-section-2 .u-sheet-1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ============================================================
   MOBILE (<= 767px): header ad hidden, remove leftover blank gap
   ============================================================ */

@media (max-width: 767px) {

  /* Keep menu pinned nicely on mobile */
  #header.u-header .u-menu-1 {
    top: 14px !important;
    right: 14px !important;
  }

  /* Slightly tighter header padding on mobile */
  #header.u-header .u-sheet-1 {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }

  #header.u-header .u-text-1 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  /* Add a little outer gutter on mobile too */
  .u-section-2 .u-sheet-1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Remove forced tall containers that create empty space */
  .u-section-2 .u-sheet-1 {
    min-height: auto !important;
  }

  .u-section-2 .u-layout-cell-2 {
    min-height: auto !important;
  }

  /* Remove leftover gap above the story block when u-section-1 is hidden */
  .u-section-2,
  .u-section-2 .u-sheet-1 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .u-section-2 .u-layout-wrap-1 {
    margin-top: 0 !important;
  }

  /* MOBILE ONLY: add breathing room between subtitle and story title */
  #header.u-header .u-text-1 {
    margin-bottom: 18px !important; /* try 14–24px to taste */
  }
}


/* ============================================================
   HARD RESET
   ============================================================ */

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent long unbroken strings from blowing out mobile width */
.u-section-2 p,
.u-section-2 .u-text,
.u-section-2 .u-container-layout,
.u-section-2 .u-layout-cell {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Safety: never allow the page to scroll sideways */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}