/* ==========================================================================
   GulfNews18 — print stylesheet for article pages
   Loaded with media="print", so none of this affects the screen layout.

   Goal: the printed page should match what the site looks like on a desktop
   browser. Two things get in the way, and both are handled below.

   1. Browsers drop background colours when printing. The top bar, navbar and
      footer are light text on dark backgrounds, so they would come out blank.
      `print-color-adjust: exact` tells the browser to print them as designed.

   2. An A4 page is roughly 690-740px of usable width, which is BELOW
      Bootstrap's `md` breakpoint (768px). Without help, the browser applies
      the site's mobile rules: the navbar stacks vertically, footer columns
      drop under each other and text re-centres. Every `md` layout used by the
      header and footer is therefore restored explicitly.
   ========================================================================== */

@page {
  size: A4;
  margin: 12mm;
}

/* --- Print the design as designed, backgrounds included ---------------- */

*,
*::before,
*::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

body {
  margin: 0 !important;
}

/* --- Hide only what cannot work on paper -------------------------------- */

form,
input,
textarea,
select,
button,
iframe,
video,
audio,
.spinner-border,
.loading,
.no-print,
/* Article furniture that means nothing on paper */
.article-sidebar,
.article-share,
.article-breadcrumb {
  display: none !important;
}

/* ==========================================================================
   1. TOP BAR  (date/time strip + social links)
   ========================================================================== */

.top-bar {
  display: block !important;
}

.top-bar .d-flex {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ==========================================================================
   2. MAIN HEADER  (logo column + right-hand column)
   ========================================================================== */

.main-header {
  display: block !important;
}

.main-header .row {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
}

.main-header .col-md-4 {
  flex: 0 0 auto !important;
  width: 33.333333% !important;
}

.main-header .col-md-8 {
  flex: 0 0 auto !important;
  width: 66.666667% !important;
}

/* ==========================================================================
   3. NAVBAR  — the site's own @media (max-width: 768px) rules would stack
      this. Force the desktop row back.
   ========================================================================== */

.custom-navbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

.custom-navbar ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.custom-navbar ul li a {
  display: inline !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

/* ==========================================================================
   4. CONTENT WIDTH

   Bootstrap's .container takes a FIXED max-width per breakpoint. An A4 page is
   about 690px wide, which is below the md breakpoint (768px), so the container
   locks to max-width: 540px and the content ends up as a narrow strip with wide
   blank gutters. Releasing the container is what actually reclaims the page.

   With the container released, the article then runs the full width of the
   text block and the 12mm @page margin provides the only side spacing.
   ========================================================================== */

.container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.article-col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep the author card and topic list with the story */
.author-box,
.article-tags {
  page-break-inside: avoid;
  break-inside: avoid;
}

.container .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Article typography: keep blocks from splitting across pages -------- */

h1,
h2,
h3,
h4,
figure,
figcaption {
  page-break-inside: avoid;
  break-inside: avoid;
}

h1,
h3 {
  page-break-after: avoid;
  break-after: avoid;
}

/* Byline sits with the headline */
h1 + .text-muted {
  page-break-after: avoid;
  break-after: avoid;
}

.article-body p {
  orphans: 3;
  widows: 3;
}

figure {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Cap the banner so it cannot swallow a whole sheet */
.article-banner {
  max-height: 90mm !important;
}

/* A printed link is not clickable, so spell out where it goes. Article body
   only: doing this in the navbar or footer would flood the page with URLs. */
.article-body a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  color: #555;
  word-break: break-all;
}

/* ==========================================================================
   5. FOOTER  — the site's own @media (max-width: 767px) rules would stack the
      two columns, centre the text and turn the link row vertical.
   ========================================================================== */

footer {
  display: block !important;
  page-break-inside: avoid;
  break-inside: avoid;
}

footer .row {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: flex-start !important;
}

footer .col-md-6 {
  flex: 0 0 auto !important;
  width: 50% !important;
}

/* Restore the md-only utilities Bootstrap will not apply at this width */
footer .text-md-start,
footer .footer-section {
  text-align: left !important;
}

footer .pe-md-5 {
  padding-right: 3rem !important;
}

footer .justify-content-md-start {
  justify-content: flex-start !important;
}

footer .d-flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

footer ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
}