/* ==========================================================================
   /offline-payments/ — page styles.
   This page is NOT an Elementor page (the baseline body classes carry no
   `elementor-page`): it is a plain GeneratePress "separate containers"
   article, so there is no per-page Elementor CSS to read numbers from.
   Widths come from baseline/css/inline/offline-payments__generate-style-inline-css.css
   (`body .grid-container{max-width:1100px}`); the vertical rhythm is matched
   pixel-for-pixel against baseline/screens/offline-payments-{1440,390}.png.
   ========================================================================== */

.op-page { width: 100%; max-width: var(--container); margin: 0 auto; }
.op-article { background-color: #fff; }
/* live: text box runs 180 -> 1260 at 1440 (1100 container, 10px article padding);
   first line box sits 30px under the 75px header, footer starts 5px after the
   last paragraph's 1.5em bottom margin. */
.op-inside { padding: 30px 10px 5px; }

/* 34px clears the h1 line box down to the first paragraph, as on the live page. */
.op-title { font-size: 40px; font-weight: 300; line-height: 1.2em; margin: 0 0 34px; }

.op-entry p { margin: 0 0 1.5em; }

/* Cloudflare's email-protection script replaces the live <a> with a plain <span>,
   so the address renders in body colour, not link blue. We ship a real mailto:
   instead but keep the live appearance. */
.op-email { color: inherit; }
.op-email:hover, .op-email:focus { color: #000; text-decoration: underline; }

/* WordPress block table ---------------------------------------------------- */
/* `.wp-block-table` is a scroll container on the live site, so the table's own
   1.5em bottom margin stays inside the <figure> and does not collapse with the
   figure's — hence the double gap under the table. */
.op-table { margin: 0 0 1.5em; overflow-x: auto; }
.op-table table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; }
.op-table td {
	border: 1px solid;
	padding: .5em;
	text-align: left;
	font-weight: 400;
}

/* GeneratePress drops h1 to 30px at <=768 (generate-style-inline-css); the page
   class would otherwise out-specify site.css's element rule. */
@media (max-width: 768px) {
	.op-title { font-size: 30px; }
}