/*
Theme Name: GL702
Theme URI: https://gl702.com
Description: Child theme of Twenty Twenty-Four for GL702 vehicle logistics.
Template: twentytwentyfour
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: gl702
*/

:root { --wp--style--gallery-gap-default: 0.5rem; }

/* Sections: 30px top and bottom; odd sections white, even sections light gray.
   The colour rules use :is(.gd-section-wrapper, #gl702) to raise their priority, so stylesheets
   added by the hosting platform cannot repaint section text white. */
.gd-section-wrapper { padding-top: 30px; padding-bottom: 30px; }
.gd-section-wrapper,
.gd-section-wrapper .wp-block-group { background-color: #ffffff !important; }
:is(.gd-section-wrapper, #gl702) *:is(p, li, label, th, td) { color: #000000 !important; }
.gd-section-wrapper:nth-of-type(2n),
.gd-section-wrapper:nth-of-type(2n) .wp-block-group { background-color: var(--wp--preset--color--secondary) !important; }
:is(.gd-section-wrapper, #gl702):nth-of-type(2n) *:is(p, li, label, th, td) { color: var(--wp--preset--color--secondary-text) !important; }
:is(.gd-section-wrapper, #gl702) *:is(h1, h2) { color: var(--wp--preset--color--primary) !important; }
:is(.gd-section-wrapper, #gl702) *:is(h3, h4, h5, h6) { color: var(--wp--preset--color--accent) !important; }
.wp-block-cover *:is(.wp-block-group) { background-color: transparent !important; }

/* Service cards: same height as the reference cards. */
.gl702-card { min-height: 240px; border-color: #000000 !important; }
.gl702-card > .wp-block-group > .wp-block-group { border-top: 0 !important; } /* avoid a double line under the outline */

/* Standard numerals so "GL702" never reads as "GL7o2". */
.wp-block-site-title, h1, h2, h3, h4, h5, h6 { font-variant-numeric: lining-nums; }

/* Buttons */
:is(.wp-block-button, #gl702):not(.is-style-outline) > .wp-element-button {
	color: var(--wp--preset--color--accent-text) !important;
	background-color: var(--wp--preset--color--accent) !important;
}
:is(.wp-block-button, #gl702).is-style-outline > .wp-element-button {
	color: var(--wp--preset--color--accent) !important;
	background-color: transparent !important;
	border-color: var(--wp--preset--color--accent) !important;
}

/* Image helpers */
.wp-block-image.is-circle-image img { border-radius: 50%; }
.wp-block-image.is-style-rounded img { border-radius: var(--wp--preset--spacing--20); }

/* Footer links */
.gl702-footer-legal a { color: #ffffff; }
.gl702-footer-legal .sep { color: #ffffff; font-weight: bold; margin: 0 8px; }

/* Contact form */
.gl702-form .gl702-label { display: block; font-size: var(--wp--preset--font-size--medium); margin: 0 0 4px; }
.gl702-form .gl702-field {
	width: 100%; box-sizing: border-box; padding: 0.875rem 1rem; min-height: 2.75rem; border-radius: 0.375rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-text) 20%, transparent);
	font: inherit; margin: 0 0 1.25rem; background: #fff; color: #000;
}
.gl702-form textarea.gl702-field { min-height: 6.5rem; height: 200px; resize: vertical; }
.gl702-form .required { color: #b42318; }
.gl702-form .gl702-sms { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 20px; }
.gl702-form .gl702-sms input { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; }
.gl702-form .gl702-sms label { font-size: 12px; line-height: 1.4; font-style: italic; }
.gl702-form .gl702-sms a, .gl702-form .gl702-legal a { font-size: inherit; }
.gl702-form .gl702-legal { font-size: 12px; line-height: 1.5; margin-top: 16px; }
.gl702-form .gl702-hp { position: absolute; left: -9999px; }
.gl702-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; }
.gl702-notice.is-success { background: #e7f5ec; color: #14532d; }
.gl702-notice.is-error { background: #fdecec; color: #8a1c1c; }

/* Contact details icons */
.gl702-contact-icon svg { width: 60px; height: 60px; color: #000; }

/* Contact details read as plain text, like the reference. */
.gd-section-wrapper p a[href^="tel:"],
.gd-section-wrapper p a[href^="mailto:"] { color: inherit; font-family: inherit; font-size: inherit; text-decoration: none; }
.gd-section-wrapper iframe { background: #e5e3df; display: block; }

/* On phones, show the photo first in text-then-photo rows. */
@media (max-width: 781px) {
	.gl702-media-last > .wp-block-image { order: -1; }
}

/* Services and Partners hero: the 30% text and 40% photo columns sit centered as a group. */
.wp-block-columns.is-content-justification-center { justify-content: center; }

/* Headings inside columns shrink just enough that long words ("Comprehensive", "Coordination")
   never break mid-word. Where the words already fit, the normal size applies. */
/* Only for full-width column rows (feature rows, Services/Partners hero): columns inside a
   content-sized group (the home hero) would collapse with size containment. */
:is(.wp-block-columns.alignwide, .wp-block-columns.is-content-justification-center) > .wp-block-column { container-type: inline-size; }
:is(.wp-block-columns.alignwide, .wp-block-columns.is-content-justification-center) > .wp-block-column h1 { font-size: min(var(--wp--preset--font-size--xx-large), 13.8cqi); }
:is(.wp-block-columns.alignwide, .wp-block-columns.is-content-justification-center) > .wp-block-column h2 { font-size: min(var(--wp--preset--font-size--x-large), 14.2cqi); }

/* Footer phone link reads as plain white text. */
.site-footer a[href^="tel:"], footer.wp-block-template-part a[href^="tel:"] { color: inherit; font-family: inherit; text-decoration: none; }

/* Phones: extra-large section headings scale down so long words ("Communications") fit. */
@media (max-width: 480px) {
	h1.has-xx-large-font-size, h2.has-xx-large-font-size { font-size: clamp(1.9rem, 9.5vw, 2.65rem) !important; }
}