/* ==========================================================
   style-combined.css

   ========================================================== */


:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #1c2530;
  --muted: #566170;
  --accent: #1f5fa8;
  --accent-ink: #ffffff;
  --border: #d8dee6;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --page-width: 72rem;
  --gap: 1.25rem;
}

/* ---------- Fluid type scale ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem);    /* 12 - 13px  small tags */
  --text-sm: clamp(0.8125rem, 0.77rem + 0.21vw, 0.9375rem);  /* 13 - 15px  captions, notes, tables, footer */
  --text-base: clamp(1rem, 0.96rem + 0.21vw, 1.125rem);      /* 16 - 18px  body text */
  --text-md: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);       /* 17 - 20px  card headings, site name */
  --text-lg: clamp(1.25rem, 1.125rem + 0.63vw, 1.625rem);    /* 20 - 26px  section headings */
  --text-title: clamp(1.375rem, 1.17rem + 1.04vw, 2rem);     /* 22 - 32px  page titles */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171d;
    --surface: #1a212a;
    --ink: #e6ebf1;
    --muted: #9aa6b4;
    --accent: #6aa8ee;
    --accent-ink: #0d1a2b;
    --border: #2c3644;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Images and video scale down on small screens. Iframes (ads, embeds) are
   deliberately left alone so their own width and height are never changed. */
img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
}

/* Skip link for keyboard users */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus {
  left: 0;
}

/* ---------- Header and navigation ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.site-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

/* The nav sits on its own row under the site name.
   On phones it scrolls sideways; on wide screens it wraps. */
.site-header nav {
  flex: 1 1 100%;
  min-width: 0;
}

.site-header nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
}

.site-header nav li {
  flex: none;
}

@media (min-width: 60em) {
  .site-header nav ul {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.site-header nav a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Page layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* Two columns (content + sidebar) once there is room */
@media (min-width: 60em) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 2rem;
  }
}

article,
.sidebar-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
}

@media (min-width: 40em) {
  article {
    padding: 2rem;
  }
}

/* Keep paragraph lines at a readable length */
article p,
article ul,
article ol {
  max-width: 65ch;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: var(--text-title);
  line-height: 1.2;
}

h2 {
  margin: 2rem 0 0.5rem;
  font-size: var(--text-lg);
  line-height: 1.3;
}

.meta {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

figure {
  margin: 1.25rem 0;
}

figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ---------- Data tables ---------- */
/* Wrap every real data table in <div class="table-scroll">
   so wide tables scroll sideways on phones instead of
   breaking the layout. */

.table-scroll {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 30rem;
}

th,
td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--bg);
  font-weight: 600;
}

tr:last-child td {
  border-bottom: 0;
}

/* ---------- Sidebar ---------- */

.sidebar h2 {
  margin-top: 0;
  font-size: var(--text-md);
}

.sidebar ul {
  margin: 0;
  padding-left: 1.1rem;
}

.sidebar li + li {
  margin-top: 0.35rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
}

.site-footer .wrap {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ==========================================================
   Added for the DST News article page
   ========================================================== */

/* Text-only helper: hides a label visually but keeps it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Language links (top right of header) ---------- */

.lang {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.lang a {
  display: block;
  padding: 0.4rem 0.5rem;
  color: var(--muted);
  text-decoration: none;
}

.lang a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Search bar (under the header) ---------- */

.search-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.search-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.search-form {
  display: flex;
  flex: 1 1 18rem;
  gap: 0.5rem;
}

.search-form input[type="search"],
.search-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.search-form button {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
}

.search-form button:hover {
  filter: brightness(1.1);
}

/* ---------- Article photo ---------- */
/* Full width on phones, floated to the right of the text on wider screens */

article {
  display: flow-root;
}

figure.photo {
  margin: 1rem 0;
  max-width: 20rem;
}

figure.photo img {
  display: block;
  border: 1px solid var(--border);
}

@media (min-width: 40em) {
  figure.photo {
    float: right;
    width: 200px;
    margin: 0.25rem 0 1rem 1.5rem;
  }
}

/* ---------- Sidebar menus ---------- */

.sidebar-box + .sidebar-box {
  margin-top: var(--gap);
}

.sidebar ul {
  padding-left: 0;
  list-style: none;
}

.sidebar a {
  display: inline-block;
  padding: 0.15rem 0;
}

.promo p {
  margin: 0;
  font-size: var(--text-sm);
}

/* ---------- Footer links ---------- */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 0.2rem 0;
}

.site-footer p {
  margin: 0;
}

/* ==========================================================
   Added for the map page (wtz-pacific12.php)
   ========================================================== */


   
.ad-slot {
  max-width: 100%;
  margin: 1rem 0;
  overflow-x: auto;
}

/* Title block above the map */
.page-head {
  padding: 0.5rem 0 1rem;
  text-align: center;
}

.page-head h1 {
  font-size: var(--text-title);
}

.page-head p {
  margin: 0.35rem 0;
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
}


   
.map-scroll {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Each page can set its own map width with style="--map-w: 800px" */
.map-inner {
  width: var(--map-w, 1001px);
}

.map-inner img {
  display: block;
}

/* Coloured strips of UTC offsets (above) and letter names (below) the map */
.utc-strip {
  display: flex;
  width: 1001px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utc-strip li {
  flex: 0 0 40px;
  overflow: hidden;
  padding: 0.5rem 0;
  color: #1c2530;
  font-size: 0.65rem;
  line-height: 1.2;
  text-align: center;
}

.utc-strip li.half {
  flex-basis: 20px;
}

.utc-strip a {
  color: #1c2530;
  text-decoration: none;
}

.utc-strip a:hover {
  text-decoration: underline;
}

.utc-strip a:focus-visible {
  outline-offset: -3px;
}

.utc-strip .r { background: #fb9393; }
.utc-strip .g { background: #8af5a5; }
.utc-strip .b { background: #97d4fc; }
.utc-strip .y { background: #00cd66; }

/* Row of small linked images under the map */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin: 1.25rem 0;
}

.tool {
  font-size: var(--text-sm);
  text-align: center;
}

.tool img {
  display: block;
  margin: 0.25rem auto 0;
}

/* Lists of links inside an article */
.link-list li + li {
  margin-top: 0.6rem;
}

.note {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Four 300x250 boxes (ads and shop images): two across, one on phones */
.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  justify-items: center;
  margin-top: 1.5rem;
}

.ad-grid img {
  border: 1px solid var(--border);
}

/* Sidebar extras */
.promo p + p {
  margin-top: 0.75rem;
}

.sidebar-box.ad {
  padding: 0;
  overflow-x: auto;
  text-align: center;
  background: transparent;
  border: 0;
}

/* ==========================================================
   Added for the map section pages (wtz001 ... wtz020)
   ========================================================== */

/* Colours for each UTC offset (used by the strips and the small labels) */
.z8    { background: #ff3030; }
.z9    { background: #00cd66; }
.z930  { background: #d4e15b; }
.z10   { background: #5cacee; }
.z11   { background: #ff3030; }
.z1130 { background: #ff8080; }
.z12   { background: #bbf6ca; }
.z1245 { background: #99cccc; }
.z13   { background: #ffffff; }
.zm12  { background: #00cd66; }

/* Row above the map: section picker | title | regional map */
.map-head {
  display: grid;
  gap: 1rem;
  justify-items: center;
  margin-bottom: 1rem;
}

@media (min-width: 52em) {
  .map-head {
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    align-items: center;
  }

  .map-head .section-picker {
    order: -1;
  }
}

.mode-note {
  color: #c62828;
}

@media (prefers-color-scheme: dark) {
  .mode-note {
    color: #ff8a80;
  }
}

.regional img {
  display: block;
}

/* Picker for the 20 map sections: 5 columns x 4 rows of small images.
   The colour picture (background) shows when you hover over the grey one. */
.section-picker ol {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  grid-auto-rows: 23px;
  width: 190px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-picker a {
  display: block;
  width: 38px;
  height: 23px;
}

.section-picker img {
  display: block;
}

.section-picker a:hover img,
.section-picker a:focus-visible img {
  visibility: hidden;
}

/* Strips of UTC offsets above and below the map. Column widths are set
   on each strip with style="--cols: ..." so they line up with the map. */
.zone-strip {
  display: grid;
  grid-template-columns: var(--cols);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zone-strip li {
  overflow: hidden;
  padding: 0.35rem 0;
  color: #1c2530;
  font-size: 0.65rem;
  line-height: 1.3;
  text-align: center;
}

.zone-strip li.narrow {
  overflow: visible;
}

.zone-strip a {
  color: inherit;
  text-decoration: none;
}

.zone-strip a:hover {
  text-decoration: underline;
}

.zone-strip a:focus-visible {
  outline-offset: -3px;
}

/* The map with its four arrows (west, north, east, and a plain image below) */
.map-frame {
  display: grid;
  grid-template-columns: 13px 773px 13px;
  grid-template-rows: 13px 485px 13px;
  grid-template-areas:
    "w n e"
    "w m e"
    "w s e";
}

.frame-w,
.frame-e {
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-n,
.frame-s {
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-w { grid-area: w; }
.frame-n { grid-area: n; }
.frame-e { grid-area: e; }
.frame-s { grid-area: s; }
.frame-m { grid-area: m; }

.map-frame img {
  display: block;
}

.frame-w img,
.frame-e img {
  width: 13px;
  height: auto;
}

.frame-n img,
.frame-s img {
  width: auto;
  height: 13px;
}

/* Text under the map */
.map-note,
.dst-note {
  max-width: 60rem;
  margin: 0.75rem auto;
  text-align: center;
}

.map-note {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Photos grouped by UTC time zone */
.zone-photos ul,
.zone-photos p {
  max-width: none;
}

.zone {
  padding: 1rem 0;
}

.zone:first-of-type {
  padding-top: 0;
}

.zone:last-of-type {
  padding-bottom: 0;
}

.zone + .zone {
  border-top: 1px solid var(--border);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.chip {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: #1c2530;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.chip:hover {
  text-decoration: underline;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thumbs a {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: center;
}

.thumbs img {
  display: block;
  margin: 0 auto 0.3rem;
  border: 1px solid var(--border);
}

/* GSM coverage card */
.gsm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg);
  border-left: 4px solid #d4b4f3;
  border-radius: 4px;
}

.gsm-text {
  flex: 1 1 16rem;
}

.gsm h2 {
  margin: 0 0 0.35rem;
  font-size: var(--text-md);
}

.gsm p {
  margin: 0.25rem 0;
}

/* YouTube embed */
.video-embed {
  max-width: 100%;
  border: 0;
}

/* Small pictures for the 20 map sections (hover colour images) */
.wtz001 { background: url(wtz-map-190x92g_01.gif); }
.wtz002 { background: url(wtz-map-190x92g_02.gif); }
.wtz003 { background: url(wtz-map-190x92g_03.gif); }
.wtz004 { background: url(wtz-map-190x92g_04.gif); }
.wtz005 { background: url(wtz-map-190x92g_05.gif); }
.wtz006 { background: url(wtz-map-190x92g_06.gif); }
.wtz007 { background: url(wtz-map-190x92g_07.gif); }
.wtz008 { background: url(wtz-map-190x92g_08.gif); }
.wtz009 { background: url(wtz-map-190x92g_09.gif); }
.wtz010 { background: url(wtz-map-190x92g_10.gif); }
.wtz011 { background: url(wtz-map-190x92g_11.gif); }
.wtz012 { background: url(wtz-map-190x92g_12.gif); }
.wtz013 { background: url(wtz-map-190x92g_13.gif); }
.wtz014 { background: url(wtz-map-190x92g_14.gif); }
.wtz015 { background: url(wtz-map-190x92g_15.gif); }
.wtz016 { background: url(wtz-map-190x92g_16.gif); }
.wtz017 { background: url(wtz-map-190x92g_17.gif); }
.wtz018 { background: url(wtz-map-190x92g_18.gif); }
.wtz019 { background: url(wtz-map-190x92g_19.gif); }
.wtz020 { background: url(wtz-map-190x92g_20.gif); }

/* ==========================================================
   Added for the mobile page 
   ========================================================== */


   
img[usemap] {
  max-width: none;
}


   
.mobile-menu,
.mobile-menu ~ .search-bar {
  --menu: #33cc99;
  --menu-dark: #009999;
  --menu-line: rgba(0, 0, 0, 0.05);
}

.mobile-menu {
  background: var(--menu);
  border-bottom: 1px solid var(--menu-line);
}

.mobile-menu > details {
  max-width: var(--page-width);
  margin: 0 auto;
}

.mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu li {
  border-bottom: 1px solid var(--menu-line);
}

.mobile-menu summary,
.mobile-menu li > a {
  position: relative;
  display: block;
  padding: 0.6rem 0.75rem;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
  transition: all 0.125s ease-in-out;
}

/* Heading rows (they open a list) get a small arrow box on the left */
.mobile-menu summary {
  padding-left: 3rem;
  list-style: none;
  cursor: pointer;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary::after {
  content: "\2193";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  background: rgba(0, 0, 0, 0.125);
  color: rgba(255, 255, 255, 0.75);
  text-shadow: none;
}

.mobile-menu details[open] > summary::after {
  content: "\2191";
}

/* The top row that opens the whole menu */
.mobile-menu > details > summary {
  background: var(--menu-dark);
  border-bottom: 1px solid var(--menu-line);
}

/* Hover: white row with green text */
.mobile-menu summary:hover,
.mobile-menu li > a:hover {
  background: #fff;
  color: var(--menu);
  text-shadow: none;
}

.mobile-menu > details > summary:hover {
  background: var(--menu-dark);
  color: #fff;
}

.mobile-menu :focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* Sub-menus */
.mobile-menu details details > ul {
  margin: 0 0.5rem;
  background: var(--menu-dark);
  border: 1px solid var(--menu-line);
  border-bottom: 0;
}

.mobile-menu details details li:last-child {
  border-bottom: 0;
}

.mobile-menu details details li > a:hover {
  color: var(--menu-dark);
}

.mobile-menu li > a img {
  display: block;
}

/* "Find time" button in the search bar under the menu: menu green,
   darker menu green on hover */
.mobile-menu ~ .search-bar .search-form button {
  background: var(--menu);
  color: #0b3d2e;
}

.mobile-menu ~ .search-bar .search-form button:hover {
  background: var(--menu-dark);
  color: #fff;
  filter: none;
}

/* Wide screens: the top-level items sit side by side in columns */
@media (min-width: 48em) {
  .mobile-menu > details > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: start;
  }

  .mobile-menu > details > ul > li {
    border-right: 1px solid var(--menu-line);
  }
}

/* Single centred column of content */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
  text-align: center;
}

.stack .ad-slot,
.stack .ad-grid,
.stack .widget {
  width: 100%;
  margin: 0;
}

.stack .page-head {
  padding: 0;
}

.stack h2 {
  margin: 0 0 0.5rem;
  font-size: var(--text-md);
}

.promo-card a {
  display: block;
}

.promo-card img {
  display: block;
  margin: 0 auto 0.4rem;
  border: 1px solid var(--border);
}

.live-map img {
  display: block;
  margin: 0 auto;
  border: 1px solid var(--border);
}

/* Fixed-size picture with a clickable map: scrolls sideways if the screen is narrower */
.fixed-map {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
}

.fixed-map img {
  display: block;
  margin: 0 auto;
}

/* Third-party widget (flight search) */
.widget {
  overflow-x: auto;
}

/* Row of links at the bottom of the page */
.link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.link-row a {
  display: inline-block;
  padding: 0.3rem 0;
}

/* ==========================================================
   Added for the time zone list pages (m-utc/...)
   ========================================================== */

/* Colours for the 25 UTC cells */
.zr { background: #ff3030; }
.zg { background: #00cd66; }
.zb { background: #5cacee; }
.zw { background: #ffffff; }

/* The 25 UTC offsets as a 5 x 5 grid: offset on top, letter name below */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 13.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zone-grid li {
  color: #1c2530;
  line-height: 1.3;
}

.zone-grid a {
  display: block;
  padding: 0.3rem 0 0;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.zone-grid a:hover {
  text-decoration: underline;
}

.zone-grid a:focus-visible {
  outline-offset: -3px;
}

.zone-grid span {
  display: block;
  padding-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
}

/* One time zone: its names and the regions it contains */
.zone-block {
  width: 100%;
  max-width: 40rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.zone-block h2 {
  margin: 0 0 0.75rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags a {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.tags a:hover {
  text-decoration: underline;
}

.region-list {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  text-align: left;
}

.region-list li + li {
  margin-top: 0.5rem;
}

/* ==========================================================
   Green links for the mobile pages (original menu greens).
   Turn on with <body class="mobile-page">.
   ========================================================== */

body.mobile-page {
  --link: #009999;
  --link-hover: #33cc99;
}

body.mobile-page :is(main, article, .site-footer, .sidebar) a:not(.zone-grid a, .utc-strip a),
body.mobile-page :is(main, article, .site-footer, .sidebar) a:not(.zone-grid a, .utc-strip a):visited {
  color: var(--link);
}

body.mobile-page :is(main, article, .site-footer, .sidebar) a:not(.zone-grid a, .utc-strip a):hover {
  color: var(--link-hover);
}

/* ==========================================================
   Added for the desktop time zone page (utc/utc+1000.html)
   ========================================================== */

/* Main column next to the sidebar: the layout already has its own padding */
.layout > .stack {
  padding: 0;
}

/* Full-width widget under the page */
.wrap > .widget {
  margin-bottom: 2rem;
}

/* Wide screens: the 25 UTC offsets sit in one row, as on the old page */
@media (min-width: 48em) {
  .zone-grid {
    grid-template-columns: repeat(25, 1fr);
    max-width: 44rem;
  }
}

/* List of links in columns (filled top to bottom, column by column) */
.map-links {
  columns: 9rem 3;
  column-gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.map-links li {
  break-inside: avoid;
  margin-bottom: 0.4rem;
}

/* ==========================================================
   Added for the DST News article page (dst_news/...)
   ========================================================== */

/* One language version of a news item inside an article */
.news-lang + .news-lang {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.news-lang h2 {
  margin-top: 0;
}

/* ==========================================================
   Table captions
   ========================================================== */

caption {
  padding: 0.6rem 0.8rem;
  font-weight: 700;
  text-align: left;
}

/* ==========================================================

   ========================================================== */

/* Balanced headings, tidy paragraph endings, no overflow from long words */
h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

p,
li {
  text-wrap: pretty;
}

article,
.sidebar-box,
.zone-block {
  overflow-wrap: break-word;
}

/* Small raised text (dst, notes) that does not push lines apart */
sup,
sub {
  font-size: 0.75em;
  line-height: 0;
}

/* Tables use the small size so five columns still fit on phones */
table {
  font-size: var(--text-sm);
  line-height: 1.45;
}

caption {
  font-size: var(--text-base);
}

/* ==========================================================

   ========================================================== */

/* Main photo above the thumbnail grid */
.feature-photo {
  margin: 0 0 1.25rem;
  text-align: center;
}

.feature-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
}

.feature-photo figcaption {
  margin-top: 0.6rem;
  text-align: left;
}

/* Small "follow us" strip above the photo */
.follow-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* Sidebar cards that are just a labelled image (World Clock, Regional Maps) */
.sidebar-box.picker {
  text-align: center;
}

.sidebar-box.picker h2 {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: none;
}

.sidebar-box.picker img,
.sidebar-box.picker .regional img {
  margin: 0 auto;
}

/* ==========================================================
   Added for the 12 hour home page ( list, promo cards)
   ========================================================== */

/* Plain list of sponsor / affiliate text links in the sidebar */
.spon-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.spon-list li + li {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

/* A promo card can have its own short caption under the image */
.promo-card .cap {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: var(--text-xs);
}