/*
Theme Name: Uptime (Kadence child)
Theme URI: https://uptimebusinessproducts.com
Template: kadence
Author: Uptime Business Products
Description: Child theme of Kadence for Uptime Business Products. Kadence supplies the header, footer, global colors and typography (Appearance > Customize). This child theme adds Uptime's fonts, its block styles (cards, chips, spec tables, checklists and more, picked in each block's Styles panel), the Uptime Quote Form block, section patterns and SEO tags.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: uptime
*/

/* =========================================================================
   How this file is organised
   0. Kadence integration (fonts, page width, header, footer)
   1. Base and layout helpers
   3. Block styles (picked in the editor's Styles panel)
   4. Quote form block
   5. Small screens
   Colors use the theme.json presets, which point at Kadence's global palette
   where they match (Customize > Colors), so palette changes carry through.
   ========================================================================= */

/* 0. Kadence integration -------------------------------------------------- */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Kadence's page wrapper carries the wp-site-blocks class; keep block spacing from adding gaps around the header and footer. */
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0; }

/* Pages start with their own full-width title section: no gap under the header. */
.content-area { margin-top: 0; margin-bottom: 0; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > .wp-block-group.alignfull, .entry-content > .wp-block-cover.alignfull, .entry-content > .wp-block-image.alignfull { margin-top: 0; margin-bottom: 0; }

/* Headings take the color of the section they sit in (Kadence sets heading colors globally). */
.has-text-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.wp-block-cover :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: inherit; }

/* Header: phone number beside the quote button. */
.site-header .header-html a { text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-header .header-button { white-space: nowrap; }
.site-main-header-wrap .site-header-row-container-inner { border-bottom: 1px solid rgba(255,255,255,.1); }

/* Links in page content take their section's text color, as in the design
   (Kadence colors all links with the accent by default). */
.entry-content a:where(:not(.wp-element-button):not(.button)) { color: inherit; }

/* Buttons: Kadence styles buttons globally; keep the Uptime button styles on top. */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid rgba(11,15,20,.3); color: var(--wp--preset--color--ink); }
.entry-content .wp-block-button.is-style-outline-light .wp-block-button__link { background: transparent; border: 1px solid rgba(255,255,255,.3); color: var(--wp--preset--color--white); }
.entry-content .wp-block-button.is-style-dark .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.entry-content .wp-block-button__link { box-shadow: none; }

/* Footer: small-caps column headings and plain link lists. */
.site-footer ul.is-style-plain { padding-left: 0; margin-left: 0; }
.site-footer .wp-block-image img { height: auto; }
.site-footer p.is-style-eyebrow { margin-bottom: 12px; }
.site-footer ul.is-style-plain li { margin-bottom: 6px; }
.site-footer .footer-html p { margin: 0 0 10px; }
.site-footer .footer-html strong { color: var(--global-palette8); }

/* 1. Base and layout helpers ------------------------------------------- */
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Keep long paragraphs at a readable line length while staying left-aligned. */
.is-layout-constrained > p:not(.has-text-align-center):not([class*="is-style-"]) {
	max-width: min(76ch, var(--wp--style--global--content-size));
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.is-layout-flow > p:not([class*="is-style-"]) { max-width: 76ch; }
/* Links inside lists of links and the footer read as plain text until hovered. */
.site-footer a, ul.is-style-plain a { text-decoration: none; }


/* Full-width page sections: thin divider between same-colored sections. */
.entry-content > .wp-block-group.alignfull { border-bottom: 1px solid var(--wp--custom--border--light); }
.entry-content > .wp-block-group.alignfull.has-ink-background-color { border-bottom-color: var(--wp--custom--border--dark); }

/* Whole card clickable: give a card group the extra class "has-card-link";
   the link in its heading then covers the card. */
.has-card-link { position: relative; transition: box-shadow .15s, border-color .15s; }
.has-card-link :is(h2, h3, h4) a { text-decoration: none; }
.has-card-link :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; }
.has-card-link:hover { border-color: var(--wp--preset--color--accent) !important; box-shadow: 0 8px 24px rgba(11,15,20,.08); }

.wp-block-columns { margin-bottom: 0; }
.wp-block-image { margin-bottom: 0; }
.wp-block-image img { display: block; }
.wp-block-buttons { gap: 12px; }
.wp-block-button__link { text-decoration: none; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-separator { border: 0; height: 1px; }

/* 3. Block styles -------------------------------------------------------- */

/* Group: Card */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--border--light);
	border-radius: var(--wp--custom--radius--card);
	padding: 24px;
	color: var(--wp--preset--color--ink);
	overflow: hidden;
}
.wp-block-group.is-style-card.has-background:not(.has-white-background-color) { border-color: transparent; }
/* A photo placed first in a card runs edge to edge across the top. */
.wp-block-group.is-style-card > .wp-block-image:first-child:not(.is-style-icon):not(.is-style-framed):not(.is-style-framed-paper) { margin: -24px -24px 18px; }
.wp-block-group.is-style-card > .wp-block-image:first-child:not(.is-style-icon) img { width: 100%; }

/* Group: Card on dark backgrounds */
.wp-block-group.is-style-card-dark {
	background: rgba(255,255,255,.05);
	border: 1px solid var(--wp--custom--border--dark);
	border-radius: var(--wp--custom--radius--card);
	padding: 24px;
	overflow: hidden;
}
/* Group: Ruled grid (cells separated by thin lines, e.g. FAQs) */
.wp-block-group.is-style-ruled { border: 1px solid var(--wp--custom--border--light); border-radius: 4px; overflow: hidden; padding: 0 !important; }
.wp-block-group.is-style-ruled > * { margin: 0 !important; }
.wp-block-group.is-style-ruled > .wp-block-group { padding: 24px 26px; }

/* Group: Panel (tinted box, no border) */
.wp-block-group.is-style-panel {
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--card);
	padding: 20px 24px;
}
.has-ink-background-color .wp-block-group.is-style-panel,
.has-ink-2-background-color .wp-block-group.is-style-panel { background: rgba(255,107,44,.1); }
/* Group: Dark hero with grid texture */
.wp-block-group.is-style-hero-texture {
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(90deg, rgba(11,15,20,1) 35%, rgba(11,15,20,.6) 100%),
		repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px);
}

/* Paragraph: Eyebrow */
p.is-style-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0;
}
p.is-style-eyebrow + * { margin-block-start: 10px; }
/* Paragraph: Breadcrumb */
p.is-style-breadcrumb {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--mist);
}
p.is-style-breadcrumb a { color: inherit; text-decoration: none; }
p.is-style-breadcrumb a:hover { color: var(--wp--preset--color--white); }
/* Paragraph: Label (small caps, used for spec labels and form-style headings) */
p.is-style-label {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--wp--preset--color--slate);
}
.has-ink-background-color p.is-style-label, .is-style-card-dark p.is-style-label { color: var(--wp--preset--color--mist); }
/* Paragraph: Chips and badges */
p.is-style-chip, p.is-style-chip-teal, p.is-style-badge {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 7px 14px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}
p.is-style-chip { background: rgba(255,107,44,.14); border: 1px solid rgba(255,107,44,.3); color: #C2410C; }
.has-ink-background-color p.is-style-chip, .has-ink-2-background-color p.is-style-chip, .is-style-card-dark p.is-style-chip { color: var(--wp--preset--color--accent-soft); }
p.is-style-chip-teal { background: rgba(55,211,160,.12); border: 1px solid rgba(55,211,160,.32); color: var(--wp--preset--color--teal-deep); }
.has-ink-background-color p.is-style-chip-teal, .has-ink-2-background-color p.is-style-chip-teal, .is-style-card-dark p.is-style-chip-teal { color: var(--wp--preset--color--teal-soft); }
p.is-style-badge { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); font-size: 11.5px; font-weight: 800; padding: 6px 12px; }
p.is-style-badge.has-background { border: 0; }
/* Groups of chips sit in a wrapping row */
.wp-block-group.is-layout-flex > p.is-style-chip, .wp-block-group.is-layout-flex > p.is-style-chip-teal { margin: 0; }
/* Paragraph: Tag (neutral pill, e.g. "5 storage options") */
p.is-style-tag {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--border--light);
	color: var(--wp--preset--color--ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}
.wp-block-group.is-layout-flex > p.is-style-tag { margin: 0; }

/* Paragraph: Color swatch (set the swatch color with the block's Background color) */
p.is-style-swatch {
	display: flex;
	align-items: flex-end;
	width: 110px;
	min-height: 80px;
	margin: 0;
	padding: 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
	box-shadow: inset 0 0 0 1px rgba(11,15,20,.08);
}
/* Paragraph: Arrow link (bold orange link, e.g. "View Specs →") */
p.is-style-arrow-link { font-size: 13.5px; font-weight: 700; }
p.is-style-arrow-link a { color: var(--wp--preset--color--accent); text-decoration: none; }
p.is-style-arrow-link a:hover { text-decoration: underline; }
.has-card-link a { text-decoration: none; }

/* Paragraph: Big number */
p.is-style-stat {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 4px;
	color: var(--wp--preset--color--accent);
}

/* List: Checklist / Dots / Plain */
ul.is-style-checklist, ul.is-style-dots, ul.is-style-plain { list-style: none; padding-left: 0; }
ul.is-style-checklist li, ul.is-style-dots li { position: relative; padding-left: 32px; margin-bottom: 12px; }
ul.is-style-checklist li::before {
	content: "";
	position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px;
	border-radius: 3px;
	background: rgba(255,107,44,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B2C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
ul.is-style-dots li { padding-left: 18px; margin-bottom: 8px; }
ul.is-style-dots li::before {
	content: ""; position: absolute; left: 0; top: .6em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
ul.is-style-plain li { margin-bottom: 8px; }
ul.is-style-plain a { text-decoration: none; }

/* Table: Spec sheet (two columns, label + value) */
.wp-block-table.is-style-specs table { border-top: 1px solid var(--wp--custom--border--light); }
.wp-block-table.is-style-specs td, .wp-block-table.is-style-specs th {
	border: 0;
	border-bottom: 1px solid var(--wp--custom--border--light);
	padding: 12px 16px 12px 0;
	vertical-align: top;
	text-align: left;
}
.wp-block-table.is-style-specs td:first-child {
	width: 34%;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
/* Table: Comparison (header row, several product columns) */
.wp-block-table.is-style-compare { overflow-x: auto; }
.wp-block-table.is-style-compare th, .wp-block-table.is-style-compare td {
	border: 0;
	border-bottom: 1px solid var(--wp--custom--border--light);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}
.wp-block-table.is-style-compare thead { border-bottom: 0; }
.wp-block-table.is-style-compare thead th { border-bottom: 2px solid var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--archivo); font-weight: 800; }
.wp-block-table.is-style-compare td:first-child {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	min-width: 150px;
}
/* Tables on dark sections */
:is(.has-ink-background-color, .has-ink-2-background-color) .wp-block-table :is(td, th) { border-bottom-color: var(--wp--custom--border--dark) !important; }
:is(.has-ink-background-color, .has-ink-2-background-color) .wp-block-table.is-style-specs table { border-top-color: var(--wp--custom--border--dark); }
:is(.has-ink-background-color, .has-ink-2-background-color) .wp-block-table :is(td:first-child) { color: var(--wp--preset--color--mist); }
:is(.has-ink-background-color, .has-ink-2-background-color) .wp-block-table td { color: var(--wp--preset--color--fog); }

/* Image: product photo frames. Set the photo's height in the block's dimension controls. */
.wp-block-image.is-style-framed, .wp-block-image.is-style-framed-paper {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	padding: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.wp-block-image.is-style-framed-paper { background: var(--wp--preset--color--paper); }
.wp-block-image.is-style-framed img, .wp-block-image.is-style-framed-paper img { object-fit: contain; max-height: 100%; }
.is-style-card > .wp-block-image.is-style-framed:first-child { margin: -24px -24px 16px; border-radius: 0; border-bottom: 1px solid var(--wp--custom--border--light); }
.wp-block-image.is-style-icon img { width: auto; max-height: 72px; }

/* Buttons */
.wp-block-button.is-style-dark .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: #222831; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid rgba(11,15,20,.3); color: var(--wp--preset--color--ink); padding: 12px 25px; }
.wp-block-button.is-style-outline-light .wp-block-button__link { background: transparent; border: 1px solid rgba(255,255,255,.3); color: var(--wp--preset--color--white); padding: 12px 25px; }
.wp-block-button.is-style-text .wp-block-button__link { background: none; padding: 0; color: inherit; text-decoration: underline; font-size: 13.5px; }
.wp-block-button.is-style-text .wp-block-button__link::after { content: " →"; }

/* Details (FAQ) */
.wp-block-details summary { font-family: var(--wp--preset--font-family--archivo); font-weight: 700; font-size: 15.5px; cursor: pointer; }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--slate); }

/* 4. Quote form block ------------------------------------------------------ */
.uptime-quote-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.uptime-quote-form__field.is-wide { grid-column: 1 / -1; }
.uptime-quote-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.uptime-quote-form label .is-optional { text-transform: none; letter-spacing: 0; font-weight: 500; color: #8b93a0; }
.uptime-quote-form :is(input, select, textarea) {
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--paper-2);
	border: 1px solid rgba(11,15,20,.15);
	border-radius: 3px;
	padding: 11px 12px;
	font: 14px var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--ink);
}
.uptime-quote-form textarea { min-height: 96px; resize: vertical; }
.uptime-quote-form__upload { border: 1px dashed rgba(11,15,20,.25); border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--wp--preset--color--slate); background: var(--wp--preset--color--paper-2); }
.uptime-quote-form__upload input { border: 0; padding: 0; background: none; }
.uptime-quote-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; font-size: 13px; color: var(--wp--preset--color--slate); }
.uptime-quote-form__actions a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.uptime-quote-form button { border: 0; cursor: pointer; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); font: 700 14.5px var(--wp--preset--font-family--inter); padding: 13px 28px; border-radius: 3px; }
.uptime-quote-form button:hover { background: var(--wp--preset--color--accent-deep); }
.uptime-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.uptime-notice { padding: 18px clamp(16px, 4vw, 56px); font-weight: 600; }
.uptime-notice--ok { background: rgba(55,211,160,.15); color: #0b5e44; }
.uptime-notice--err { background: rgba(255,107,44,.14); color: #8a2c07; }

/* 5. Small screens ---------------------------------------------------------- */
@media (max-width: 1100px) {
}
@media (max-width: 781px) {
	.uptime-quote-form__grid { grid-template-columns: 1fr; }
	.wp-block-group.is-layout-grid { grid-template-columns: 1fr !important; }
	/* Call-to-action rows: stack text above the buttons. */
	.entry-content .wp-block-group.is-layout-flex:has(> .wp-block-buttons) { flex-direction: column; align-items: flex-start; }
	.entry-content .wp-block-button__link { white-space: nowrap; }
	.wp-block-image.is-style-framed img, .wp-block-image.is-style-framed-paper img { height: auto !important; max-height: 320px; }
	h1.wp-block-heading { font-size: 30px !important; }
	.wp-block-table.is-style-specs td:first-child { width: 42%; }
}
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-group.is-layout-grid { grid-template-columns: 1fr 1fr !important; }
}