/*
 * ti-parity.css — small production-parity overrides for the ported ti15 theme.
 * Loaded after main.css on legacy pages. Keep main.css byte-for-byte with www;
 * put our reconstructions of plugin-provided styles here.
 */

/* Content-Views "Read More" links render on www as Bootstrap `btn btn-success`
 * (the CV plugin + Bootstrap). We don't load Bootstrap, so reproduce the green
 * button here so the /providers grid matches production. */
.entry-content a.pt-cv-readmore {
  display: inline-block;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 4px;
  color: #fff;
  background-color: #5cb85c;
  border: 1px solid #4cae4c;
  text-decoration: none;
}
.entry-content a.pt-cv-readmore:hover,
.entry-content a.pt-cv-readmore:focus {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
  text-decoration: none;
}

/* WordPress core image/alignment styles. www serves these via the block-library
 * + global-styles stylesheets (bundled by Autoptimize); we only ship main.css,
 * which has `img { max-width:100% }` but none of the alignment/aspect rules.
 * Without them, `.entry-content` images (e.g. the destination photo on
 * /travel-insurance-for-jamaica/) lose `height:auto`/centering and render at the
 * wrong size vs www. Ported verbatim from www so images match production. */
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin: 0.5em 1em 0.5em 0;
}
.alignright {
  float: right;
  margin: 0.5em 0 0.5em 1em;
}
.entry-content img,
img.size-full {
  max-width: 100%;
  width: auto;
}
.entry-content img,
img[class*='align'],
img[class*='wp-image-'] {
  height: auto;
}
.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}
.wp-block-image .aligncenter,
.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* Drew 19-Aug #9: body images on inner content PAGES (e.g.
 * /history-of-travel-insurance/, /claims/) render at their natural (small) size.
 * main.css makes blog-POST images fill the reading column via
 * `@media (min-width:640px){ .post img { width:100% } }`, but our inner pages use
 * the `.entry-content` page layout (content-page.php) without the `.post`
 * wrapper, so that rule never applies and the migrated images look tiny vs www.
 * Mirror the same behaviour for inner-page (`.subpage`) body images at the same
 * breakpoint. Floated/aligned images (alignleft/alignright/aligncenter) keep
 * their intrinsic size so pull-quote/wrapped images are untouched. */
@media only screen and (min-width: 640px) {
  .subpage .entry-content img:not([class*='align']) {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
}

/* Collapse duplicated horizontal rules. WordPress-authored separators in the
 * migrated content sometimes sit directly against the decorative `<hr>` the
 * LinkGrid renders around a section heading, stacking 2-3 rules where www shows
 * one (e.g. /travel-insurance-101/). Adjacent `<hr>`s never appear on www — the
 * section rules are always split by an `<h2>` — so hiding any `<hr>` that
 * immediately follows another restores the www layout site-wide. */
.entry-content hr + hr {
  display: none;
}

/* "The Basics of Travel Insurance" (and sibling) link grids. On www these are
 * WordPress "Content Views" lists — `h4.pt-cv-title` links, font-size 18 /
 * weight 600, with even bottom spacing so every cell resolves to a consistent
 * box. Match that so the ported `.link-grid` looks like production. */
.entry-content .link-grid h4 {
  margin-top: 0;
  font-size: 18px;
}
.entry-content .link-grid h4 a {
  font-weight: 600;
  border-bottom: none;
}
.entry-content .link-grid .columns {
  padding-bottom: 15px;
}

/* Compare page (page-compare-plan.php). www defines `.noviewDetail` in an inline
 * <style> block on the template itself (not main.css), so reproduce it here for
 * the ported /travel-insurance-quotes/compare page. It's the "no coverage"
 * counterpart to main.css's green `.viewDetail` — same centered layout, a red
 * "no" icon and the theme link colour. */
.plans .plan .noviewDetail {
  width: 120px;
  margin-left: -60px;
  display: block;
  background-image: url('../images/icon-no.gif');
  background-repeat: no-repeat;
  background-position: left 4px;
  padding-left: 25px;
  font-weight: 500;
  color: #2379a1;
  position: relative;
  left: 50%;
}

/* The Customer Reviews cell stacks star graphics over the review count /
 * recommended lines. main.css blocks `.plan-reviews span` (so the count sits on
 * its own line); keep the inline star PNGs inline-block and centered. */
.plans .plan .plan-reviews .reviews {
  display: block;
}
.plans .plan .plan-reviews .reviews img {
  display: inline-block;
}
/* Drew 19-Aug #1b: the star row, "N Reviews" and "N% Recommended" lines are
 * separated only by <br>, so with the default line-height they touch. Open up
 * the line spacing so the cell reads with breathing room like www. */
.plans .plan .plan-reviews .reviews a {
  line-height: 1.9;
}

/* Drew 19-Aug #5: the checkout "Purchase Your Policy" hero must sit flush-left
 * like www. main.css keeps `#banner h1` with no text-align (byte-for-byte with
 * www); pin it left on the checkout (`.buypolicy`) page so it never reads
 * centered. */
.buypolicy #banner h1 {
  text-align: left;
}

/* Drew 19-Aug #1h: the footnote paragraphs below the compare table
 * ("* Maximum Benefit Amounts…" / "** Benefit may only be…") should sit
 * flush-left like www; without this they pick up the centered plan-column
 * alignment and read centered on Next. main.css keeps `.plans > p` byte-for-byte
 * with www (no text-align), so scope the left-align here under `.compare`. */
.compare .plans > p {
  text-align: left;
}

/* main.css only styles `.plan-prod-name a` as the table-cell; when a plan has no
 * certificate PDF we render a plain <span> for the product name, so give it the
 * same vertical-centering. */
.plans .plan .plan-prod-name span {
  line-height: normal;
  display: table-cell;
  vertical-align: middle;
}

/* --- Quote-results infobox lightbox (1a/1b/1f) -----------------------------
 * The production popup tabs are rendered by the jQuery responsive-tabs plugin,
 * which main.css styles via `.r-tabs-*`. We emit the same DOM from React (no
 * plugin JS), so these few resets — which the plugin's own stylesheet supplies
 * and main.css omits — keep the tab bar looking identical: strip the <ul>
 * bullets/margins and pad the panel body. */
.responsiveTabs .r-tabs-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.responsiveTabs .r-tabs-nav .r-tabs-tab {
  margin: 0;
  list-style: none;
}
.responsiveTabs .r-tabs-panel {
  padding: 15px;
}
/* The infobox tables (Coverage Details / Definitions / Exclusions) come from
 * info_box_data as raw HTML; give them the same light grid as production. */
#viewBenefit .r-tabs-panel table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px;
}
#viewBenefit .r-tabs-panel th,
#viewBenefit .r-tabs-panel td {
  border: 1px solid #dddddd;
  padding: 6px 10px;
  font-size: 0.875em;
  text-align: left;
  vertical-align: top;
}

/* Drew 14-Aug #1: reveal the "Compare Now" button once two or more plans are
 * selected. main.css hides `.result-btn-compare-now` by default (production
 * shows it via the compare-count JS); the React results page adds `is-active`
 * when selectedCount >= 2. The button lives in the Buy Now column and reuses the
 * `ti-btn`/`ti-outline-primary-btn` classes, so it sizes/aligns identically to
 * Buy Now — the extra `.is-active` class outranks main.css's `display:none`. */
.getquotes .quote .result-btn-compare-now.is-active {
  display: inline-block;
}

/* Drew mobile #3: inner-page body content is too narrow on phones. main.css
 * indents page/post content by a `small-offset-1` (8.33%) on small screens and
 * only removes it for a hardcoded list of production page-ids
 * (`.page-id-N .small-offset-1 { margin-left: 1% }` at max-width:600px). Our CMS
 * pages have no page-id body class, so the content stays indented/narrow and the
 * full-width images inside it render smaller than www. Reapply the same widening
 * generically for every inner page (`.subpage`, set on #bd), matching www's
 * values and breakpoint. Scoped to #main-content + ≤600px, so the desktop
 * layout (where `large-12` already resets the offset) is untouched.
 * `!important` is required exactly as www uses it: foundation.css declares
 * `.small-offset-1 { margin-left: 8.33333% !important }`, so without it the
 * offset survives, shifting the 98%-wide column 32px right and spilling the
 * page past the viewport on phones (Drew 20-Aug clutter sweep). */
@media only screen and (max-width: 600px) {
  .subpage #main-content > .row > .columns.small-offset-1 {
    margin-left: 1% !important;
    width: 98% !important;
  }
}

/* Drew mobile #2: the mobile "Get Travel Insurance Quotes" CTA reveals the
 * sidebar quote form, which main.css hides below the large breakpoint. The CTA
 * links to `#subpage-form-wrapper`, so this `:target` rule opens the form on
 * click with no JS (robust regardless of hydration). Scoped below large-up so
 * desktop — where the form is already visible via main.css — is untouched. */
@media only screen and (max-width: 1025px) {
  #subpage-form-wrapper:target {
    display: block;
  }
}

/* Compare page (Drew): on mobile the fixed label column (`.plans-label`) must
 * stay put while ONLY the plan columns scroll horizontally. Production swipes
 * via the ti15 slick slider; until/if that JS initialises, the plan-list
 * otherwise crams every column into the narrow strip. Make the plan-list a
 * native horizontal scroller with readable, fixed-width columns so the plans
 * scroll under the fixed label column. Scoped to `:not(.slick-initialized)` so
 * the production slick slider is untouched, and to ≤1025px so desktop (all
 * columns side by side) is unaffected. */
@media only screen and (max-width: 1025px) {
  .compare .plan-list:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Snap to each plan column so a swipe lands one-per-view, like the slick
     * slider production uses. */
    scroll-snap-type: x mandatory;
  }
  .compare .plan-list:not(.slick-initialized) > .plan {
    flex: 0 0 auto;
    width: 200px;
    scroll-snap-align: start;
  }
}

/* Blog post share links (TI-46, gap ref D3). Production ran social-media-feather;
 * the launch decision was lightweight share links with no third-party script.
 * Rendered in the post's `.entry-meta` footer. Kept deliberately minimal so it
 * reads as part of the ti15 post furniture, not a bolt-on widget — inline pills
 * using the theme's link blue, wrapping cleanly on mobile (no clutter). */
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
  padding-top: 14px;
  border-top: 1px solid #dddddd;
}
.post-share-label {
  font-weight: 700;
  color: #323a45;
  margin-right: 2px;
}
.post-share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-share-links li {
  margin: 0;
}
.post-share-link {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #2379a1;
  border-radius: 30px;
  color: #2379a1;
  font-size: 0.8125em;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.post-share-link:hover,
.post-share-link:focus {
  background-color: #2379a1;
  color: #ffffff;
}