/* Styles for in-theme replacements of dropped plugins, plus responsive fixes.
 *
 * Kept in a SEPARATE file so style.css stays byte-identical to the proven
 * compiled stylesheet served in production (the theme's scss/ source is stale
 * and must not be recompiled - see the theme header).
 *
 * The .afg-* rules are ported from the Awesome Flickr Gallery plugin's afg.css
 * so the rebuilt gallery keeps the same table layout and hover treatment.
 */

/* ---- Flickr gallery (was: awesome-flickr-gallery-plugin/afg.css) ---- */
div.afg-gallery { margin: auto; }
div.afg-table   { display: table !important; margin: auto; border: none; width: 100%; }
div.afg-row     { display: table-row !important; }
div.afg-cell    { display: table-cell !important; text-align: left; vertical-align: top; margin: auto; padding-bottom: 10px; }

img.afg-img {
	margin-top: 5%;
	width: 200px;
	height: 200px;
	object-fit: cover;
	max-width: 100%;
	opacity: 1;
	box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
}
img.afg-img:hover { opacity: 0.7; box-shadow: none; -webkit-box-shadow: none; }

@media (max-width: 768px) {
	div.afg-table, div.afg-row, div.afg-cell { display: block !important; width: 100% !important; }
	img.afg-img { width: 100%; height: auto; }
}

/* ---- PDF embed (was: pdf-embedder) ---- */
.hvt-pdf-embed          { margin: 1em 0; }
.hvt-pdf-embed object   { width: 100%; min-height: 600px; border: 1px solid #ccc; }
.hvt-pdf-link           { margin-top: .5em; font-size: .95em; }

/* ==========================================================================
   RESPONSIVE CORRECTIONS

   Three genuine defects, ALL PRESENT ON PRODUCTION - each verified at real
   viewports with identical measurements on both sites. These are deliberate
   improvements, not parity fixes, and are listed as divergences in the build
   report.
   ========================================================================== */

/* 1. Horizontal scroll on EVERY page at the Bootstrap breakpoint boundaries
      (768px, 992px). Traced to a single cause rather than assumed:

        footer  { padding-left: 20px; padding-right: 0 }   <- theme CSS
        footer .container { width: 750px }                 <- Bootstrap

      The footer's asymmetric 20px left padding leaves a 733px content box, but
      the container inside it is a FIXED 750px, so it overruns by 17px. Same
      arithmetic at 992px: a 970px container inside a 957px content box, 13px
      over. Measured identically on production (clientWidth 753, scrollWidth
      770), so this is pre-existing, not introduced by the rebuild.

      Only the footer's container is fixed - every other .container on the page
      sits in a full-width parent - so the fix is scoped to the footer rather
      than applied globally, which would risk changing the page grid. */
footer .container {
	width: auto;
	max-width: 100%;
}

/* 2. The main menu wrapped onto two rows between 769px and 991px - tablet
      landscape. The desktop nav needs ~930px, but the burger menu only appeared
      at 768px and below, so in that band the full nav was shown in a container
      too narrow to hold it.

      The breakpoint is moved to 991px, which is where Bootstrap's own desktop
      grid begins. The rules below are the theme's own mobile-nav rules from its
      max-width:768px block, replicated so the opened menu is styled correctly
      across the whole range rather than only below 768px. */
@media (max-width: 991px) {
	header h1#logo a {
		height: 120px;
	}
	header #mob-menu {
		display: block;
	}
	header nav {
		display: none;
		text-align: left;
	}
	header nav ul {
		position: relative;
	}
	header nav ul li {
		display: block;
		border-top: 1px solid #fff;
	}
	header nav ul li a {
		width: 100%;
		font-size: 26px;
	}
	header nav ul li ul.sub-menu {
		display: none;
		top: 0;
		width: 100%;
		position: relative;
	}
}

/* 3. The "click here to download a sponsorship form" button overflowed every
      phone viewport. Bootstrap's .btn is white-space:nowrap, so the long label
      rendered as a single 477px line - 132px wider than a 375px screen. The
      label in the shortcode even contains a newline the author intended as a
      line break, which nowrap was collapsing. Measured identically on
      production: 477px wide, 117px overflow at 375px. */
@media (max-width: 991px) {
	.btn {
		white-space: normal;
		max-width: 100%;
	}
}

/* 4. A second horizontal-scroll source, at 769px and 992px only. The sidebar
      panel is deliberately bled past its column:

        .main-content.sub .side-sub { margin-right: -30px }
        .main-content .side-home    { margin-right: -26px }

      The theme overrides that bleed at BOTH ends - to 0 under max-width:768px,
      and to -15px above min-width:1200px - but nothing covers 769px-1199px, so
      the full -30px applies there. It only actually overflows where Bootstrap's
      fixed container nearly fills the viewport (container 750px in a 754px
      client area at 769px; 970px in 977px at 992px), which is why it appears at
      those two widths and not at 800px or 900px.

      Closing the gap the same way the theme closes it below 768px. Above
      1200px - the design's target width - nothing changes. */
@media (max-width: 1199px) {
	.side-home,
	.side-sub {
		margin-right: 0 !important;
	}
}

/* 5. Future-proofing only: constrain editorial images to their column so that
      content added later cannot introduce the same overflow. Verified to change
      nothing today - every content image already renders at the column width. */
.left-col-cont img,
.post.article img,
.main-content .home-main img {
	max-width: 100%;
	height: auto;
}