/*
Theme Name: Global International Freight
Theme URI: https://globalintfrieight.com
Template: twentytwentyfive
Author: Global International Freight
Description: Child theme of Twenty Twenty-Five, set up for the Global International Freight site: navy palette, wide content layout, and a header and footer built into the theme.
Version: 1.2
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gif-freight
*/

/* Twenty Twenty-Five ships its own stylesheet; everything below is additive. */

/* ---------------------------------------------------------------------
   HEADER
   One row on every screen: brand on the left, navigation and the Track
   button on the right. The rules below are deliberately forceful because
   the header has to hold its shape no matter how many items end up in the
   menu, and core's own layout styles are quite happy to wrap it otherwise.
   --------------------------------------------------------------------- */

.gif-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 #dbe2ea, 0 4px 18px rgba(18, 41, 76, 0.06);
}
.admin-bar .gif-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .gif-header { top: 46px; }
}

/* The main bar never stacks. */
.gif-header .gif-bar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px;
	width: 100%;
}

/* Brand keeps its size; everything else gives way first. */
.gif-header .gif-brand {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	min-width: 0;
}

/* Logo height is capped so a large upload cannot inflate the header. */
.gif-header .wp-block-site-logo,
.gif-header .wp-block-site-logo a,
.gif-header .wp-block-site-logo img {
	display: block;
	max-height: 42px;
	width: auto;
}
.gif-header .wp-block-site-logo img {
	height: 42px;
	max-width: 190px;
	object-fit: contain;
}

/* The logo already carries the company name, so the text title is only a
   fallback for when no logo is set. */
.gif-header .wp-block-site-logo + .wp-block-site-title { display: none; }
.gif-header .wp-block-site-title { white-space: nowrap; }

/* Navigation and the button share the right-hand side and shrink together. */
.gif-header .gif-actions {
	flex: 0 1 auto !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 16px;
	min-width: 0;
}
.gif-header .wp-block-navigation { min-width: 0; }
.gif-header .wp-block-navigation__container { flex-wrap: wrap; }

.gif-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.gif-nav a:hover { border-bottom-color: #e8b647; }
.gif-nav .current-menu-item > a,
.gif-nav .wp-block-navigation-item.current-menu-item > a { border-bottom-color: #e8b647; }

/* Track button: fixed size. Without this the flex row squeezes it until
   the label breaks across two lines. */
.gif-header .gif-cta,
.gif-header .gif-cta .wp-block-button,
.gif-header .gif-cta .wp-block-button__link {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	word-break: keep-all !important;
	margin: 0;
}
.gif-header .gif-cta .wp-block-button__link { min-width: max-content; }

/* Tighten as the viewport narrows, before falling back to the hamburger. */
@media (max-width: 1340px) {
	.gif-nav a { font-size: 14px; }
	.gif-header .wp-block-navigation { gap: 14px !important; }
	.gif-header .wp-block-navigation__container { gap: 14px !important; }
}

/* The Navigation block collapses at 600px by default, which leaves a long
   menu wrapping badly in between. Move the switch up so the header stays a
   single tidy row: logo on the left, hamburger and Track on the right. */
@media (max-width: 1200px) {
	.gif-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.gif-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
	.gif-header .wp-block-site-logo img { height: 38px; max-width: 170px; }
}

@media (max-width: 600px) {
	.gif-header .gif-mainbar { padding-left: 16px !important; padding-right: 16px !important; }
	.gif-header .gif-topbar { padding-left: 16px !important; padding-right: 16px !important; }
	.gif-header .wp-block-site-logo img { height: 34px; max-width: 150px; }
	.gif-header .gif-actions { gap: 10px; }
	.gif-header .wp-block-navigation__submenu-container { box-shadow: none; }
	.gif-header .gif-cta .wp-block-button__link {
		padding: 9px 14px !important;
		font-size: 13px !important;
	}
	/* The tagline is the first thing to go when space is tight. */
	.gif-header .gif-tagline { display: none; }
}

@media (max-width: 380px) {
	.gif-header .gif-cta { display: none; }
}

/* Shipping dropdown */
.gif-header .wp-block-navigation__submenu-container {
	background-color: #ffffff !important;
	border: 1px solid #dbe2ea !important;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(18, 41, 76, 0.14);
	padding: 6px 0;
	min-width: 210px;
}
.gif-header .wp-block-navigation__submenu-container a {
	padding: 9px 16px !important;
	font-size: 14px;
	border-bottom: none;
	white-space: nowrap;
}
.gif-header .wp-block-navigation__submenu-container a:hover {
	background: #eaf0f8;
	border-bottom: none;
}

/* Mobile overlay: the light header colours would be unreadable on navy. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #12294c !important;
	color: #ffffff !important;
	padding-top: 72px;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #ffffff !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px !important;
}

/* Footer links */
.gif-footer a { text-decoration: none; }
.gif-footer a:hover { text-decoration: underline; }

/* Tables inside page content, so rate cards read cleanly under any width. */
.wp-block-table table { border-collapse: collapse; }
.wp-block-table th { background: #1b3a6b; color: #fff; text-align: left; }
.wp-block-table td, .wp-block-table th { padding: 12px 16px; }
.wp-block-table tbody tr:nth-child(odd) { background: #fbfcfd; }

/* Details blocks used for the FAQs */
.wp-block-details {
	background: #fff;
	border: 1px solid #dbe2ea;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 12px;
}
.wp-block-details summary { cursor: pointer; font-weight: 700; color: #1b3a6b; }

/* ---------------------------------------------------------------------
   IMAGES
   Left alone, a tall photo sets the height of whatever section it sits in,
   which leaves a short paragraph floating beside a huge picture. These
   rules invert that: the text decides the height and the photo crops to
   fill the space it is given.
   --------------------------------------------------------------------- */

/* Media & text: the image column stretches to match the text column. */
.wp-block-media-text {
	align-items: stretch;
}
.wp-block-media-text > .wp-block-media-text__media {
	display: flex;
	margin: 0;
	height: 100%;
}
.wp-block-media-text > .wp-block-media-text__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 330px;
	max-height: 560px;
	object-fit: cover;
	object-position: center;
}

/* Photos inside cards and columns share one shape, so a row of service
   cards lines up instead of stepping up and down. */
.wp-block-column > .wp-block-image img,
.wp-block-column > figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

/* Any other content image: never taller than a comfortable screenful. */
.wp-block-post-content .wp-block-image img {
	max-height: 620px;
	width: auto;
	max-width: 100%;
}
.wp-block-post-content .wp-block-image.alignfull img,
.wp-block-post-content .wp-block-image.alignwide img {
	width: 100%;
}

/* Cover blocks already carry a min-height; stop a very tall one on phones. */
@media (max-width: 781px) {
	.wp-block-cover { min-height: 420px !important; }
	.wp-block-media-text > .wp-block-media-text__media img {
		min-height: 240px;
		max-height: 300px;
	}
	.wp-block-column > .wp-block-image img { aspect-ratio: 16 / 9; }
}