/* ==========================================================================
   SHANNON KITCHEN v2 - RESPONSIVE / MOBILE LAYER
   ==========================================================================

   THIS IS THE FILE TO EDIT FOR MOBILE TWEAKS.

   Everything is grouped and labelled in plain English. If you only want to
   change how tall the home page banner is, or stop a photo being cropped,
   you almost certainly only need to touch SECTION 1 below - the dials.

   Section map
     1.  The dials         - change numbers here first
     2.  Overflow guard    - stops the sideways-scroll / "cut off" problem
     3.  Photos & media    - never let an image overflow or stretch
     4.  HERO / COVER      - the home page banner (the main bug you reported)
     5.  Big headings      - shrinks oversized headings on phones
     6.  Header & menu     - bigger tap targets, tidier mobile bar
     7.  Buttons           - stack and go full width on phones
     8.  Blog list & cards - shorter thumbnails on phones
     9.  Columns           - sane stacking
     10. Footer
     11. Tables, code, embeds
     12. BLOCK STYLES      - the one-click styles in the editor sidebar
     13. Accessibility & motion
   ========================================================================== */


/* ==========================================================================
   1. THE DIALS
   Change a number here and it applies everywhere. No need to hunt through
   the rest of the file.
   ========================================================================== */

:root {
	/* --- HOME PAGE BANNER HEIGHT ---
	   The old theme forced 700px tall on every screen. On a phone that is
	   taller than the whole screen, which is what was cropping your photo so
	   hard. These are the replacements. Make them smaller to crop less. */
	--sk-hero-height-desktop: 700px;
	--sk-hero-height-tablet: 460px;
	--sk-hero-height-phone: 380px;

	/* --- HOME PAGE BANNER HEADLINE ---
	   min size, preferred size (scales with screen width), max size. */
	--sk-hero-title-size: clamp(2rem, 9vw, 6.25rem);
	--sk-hero-title-spacing: clamp(2px, 2.2vw, 30px);

	/* --- BLOG THUMBNAILS --- the old theme forced 400px tall on phones too. */
	--sk-thumb-height-desktop: 400px;
	--sk-thumb-height-tablet: 300px;
	--sk-thumb-height-phone: 210px;

	/* --- LETTERBOX COLOUR ---
	   Used behind a photo when you pick the "Show whole photo" style, so the
	   uncropped picture has something to sit on. */
	--sk-letterbox: var(--wp--preset--color--mono-1, #432812);

	/* --- CARD LOOK --- used by the "Card" and "Framed" block styles. */
	--sk-card-radius: 10px;
	--sk-card-shadow: 0 4px 20px rgba(0, 0, 0, .08);
	--sk-card-padding: clamp(16px, 4vw, 32px);
	--sk-hairline: var(--wp--preset--color--mono-3, #E0CEBF);

	/* --- MINIMUM TAP TARGET --- Apple and Google both recommend 44px. */
	--sk-tap-target: 44px;
}


/* ==========================================================================
   2. OVERFLOW GUARD
   The single biggest cause of "my site is cut off on mobile" is one wide
   element forcing the whole page sideways. `clip` stops that WITHOUT breaking
   sticky headers the way `hidden` does.
   ========================================================================== */

html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/* Belt and braces for older browsers that do not know overflow: clip. */
@supports not (overflow: clip) {

	html,
	body {
		overflow-x: hidden;
	}
}

/* Nothing inside the page may be wider than the page. */
.wp-site-blocks,
.wp-block-post-content,
main {
	max-width: 100%;
}

/* Long unbroken words / URLs are a classic phone-layout breaker. */
body,
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote {
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}


/* ==========================================================================
   3. PHOTOS & MEDIA
   ========================================================================== */

img,
video,
iframe,
svg,
canvas {
	max-width: 100%;
	height: auto;
}

/* WordPress sometimes sets an explicit height attribute; keep the ratio. */
figure.wp-block-image img {
	height: auto;
}

/* When an image IS deliberately cropped to a set height, centre the crop so
   faces stay in frame instead of being sliced off the top. */
.wp-block-image img[style*="object-fit"],
.wp-block-post-featured-image img {
	object-position: center center;
}

/* Handy helper classes. Add one of these in the block's Advanced >
   "Additional CSS class(es)" box to move the visible part of a cropped photo. */
.sk-focus-top img      { object-position: center top !important; }
.sk-focus-bottom img   { object-position: center bottom !important; }
.sk-focus-left img     { object-position: left center !important; }
.sk-focus-right img    { object-position: right center !important; }
.sk-focus-center img   { object-position: center center !important; }

/* Add class "sk-no-crop" to ANY block to guarantee its photo is never cut. */
.sk-no-crop img {
	object-fit: contain !important;
	width: 100% !important;
	height: auto !important;
}


/* ==========================================================================
   4. HERO / COVER BLOCK  <- the main bug you reported
   --------------------------------------------------------------------------
   The old hero had min-height:700px baked into the page as an inline style.
   Inline styles beat stylesheets, so these rules use !important on purpose.
   That is deliberate, not sloppy - it is the only way to override a value
   that is hard-coded into the block markup and possibly saved in your
   database from an earlier edit.
   ========================================================================== */

/* Tablet and below */
@media (max-width: 781px) {

	.wp-block-cover,
	.wp-block-cover-image {
		min-height: var(--sk-hero-height-tablet) !important;
		padding-left: clamp(16px, 5vw, 40px) !important;
		padding-right: clamp(16px, 5vw, 40px) !important;
	}

	/* Trim the giant top/bottom padding the hero carried over from desktop. */
	.wp-block-cover>.wp-block-cover__inner-container,
	.wp-block-cover-image>.wp-block-cover__inner-container {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Phones */
@media (max-width: 599px) {

	.wp-block-cover,
	.wp-block-cover-image {
		min-height: var(--sk-hero-height-phone) !important;
	}
}

/* Prefer the modern "small viewport height" unit where supported - it accounts
   for the browser's address bar on phones, so the banner never gets taller
   than the visible screen. */
@supports (height: 100svh) {
	@media (max-width: 599px) {

		.wp-block-cover,
		.wp-block-cover-image {
			min-height: min(var(--sk-hero-height-phone), 70svh) !important;
		}
	}
}

/* Keep the cover's own background image behaving. */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover-image .wp-block-cover__image-background {
	object-fit: cover;
}

/* The hero headline in this theme carries the class below. It had a
   hard-coded font-size:100px and letter-spacing:30px, which is roughly 800px
   of text trying to fit into a 375px phone. That is what was pushing your
   page sideways. */
.superbthemes-navigation-004-headline {
	font-size: var(--sk-hero-title-size) !important;
	letter-spacing: var(--sk-hero-title-spacing) !important;
	/* Wide letter-spacing adds a trailing gap after the last letter, which
	   makes centred text look shifted left. This puts it back. */
	text-indent: var(--sk-hero-title-spacing);
	line-height: 1.1 !important;
	max-width: 100%;
	word-break: normal;
	hyphens: none;
}

/* The hero paragraph used hard <br> tags, which force awkward line breaks on
   a narrow screen. Neutralise them on phones and let the text wrap naturally. */
@media (max-width: 599px) {
	.wp-block-cover p br {
		display: none;
	}

	.wp-block-cover p {
		max-width: 34ch;
		margin-left: auto;
		margin-right: auto;
	}
}


/* ==========================================================================
   5. BIG HEADINGS ON SMALL SCREENS
   Any heading with a hard-coded pixel size gets brought back into range on a
   phone. Desktop is untouched.
   ========================================================================== */

@media (max-width: 599px) {

	h1,
	.wp-block-post-title,
	.wp-block-heading.has-superbfont-xxlarge-font-size {
		font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
		line-height: 1.2 !important;
		letter-spacing: normal !important;
	}

	h2,
	.wp-block-heading.has-superbfont-xlarge-font-size {
		font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
		line-height: 1.25 !important;
	}

	h3,
	.wp-block-heading.has-superbfont-large-font-size {
		font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
		line-height: 1.3 !important;
	}
}


/* ==========================================================================
   6. HEADER & MENU
   ========================================================================== */

/* Give every menu item and the hamburger a proper finger-sized target. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: var(--sk-tap-target);
	min-height: var(--sk-tap-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 12px 4px;
	min-height: var(--sk-tap-target);
	display: flex;
	align-items: center;
}

@media (max-width: 781px) {

	/* Stop the site title wrapping into three lines on a narrow phone. */
	.superbthemes-navigation-004-columns-logo .wp-block-site-title {
		font-size: clamp(1rem, 4.5vw, 1.25rem);
		line-height: 1.2;
		margin: 0;
	}

	/* Tighten the bar so it does not eat a third of the screen. */
	.superbthemes-navigation-004 {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	/* The header columns are set to NOT stack, which is correct for a
	   logo + hamburger bar - but they need to be allowed to shrink. */
	.superbthemes-navigation-004-columns-wrapper {
		gap: 12px !important;
		flex-wrap: nowrap !important;
	}

	.superbthemes-navigation-004-columns-wrapper>.wp-block-column {
		min-width: 0;
	}
}

/* The open mobile menu should be readable and comfortably tappable. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(20px, 8vw, 60px) clamp(16px, 6vw, 40px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
	font-size: 1.125rem;
}

/* Add class "sk-sticky-header" to the header group to make it stick. */
.sk-sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base, #F7EADF);
}

.admin-bar .sk-sticky-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sk-sticky-header {
		top: 46px;
	}
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

@media (max-width: 599px) {

	/* Two side-by-side buttons in a hero become a cramped mess on a phone.
	   Stack them and let them fill the width. */
	.wp-block-cover .wp-block-buttons,
	.wp-block-buttons.sk-stack-on-mobile {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-cover .wp-block-buttons .wp-block-button,
	.wp-block-buttons.sk-stack-on-mobile .wp-block-button {
		width: 100%;
	}

	.wp-block-cover .wp-block-buttons .wp-block-button__link,
	.wp-block-buttons.sk-stack-on-mobile .wp-block-button__link {
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* Every button gets a finger-sized hit area, everywhere. */
.wp-block-button__link,
.wp-element-button {
	min-height: var(--sk-tap-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ==========================================================================
   8. BLOG LIST & POST CARDS
   ========================================================================== */

/* The theme hard-codes height:400px on featured images. Fine on a desktop,
   enormous on a phone. */
@media (max-width: 781px) {

	.wp-block-post-featured-image img,
	.wp-block-post-featured-image {
		height: var(--sk-thumb-height-tablet) !important;
	}
}

@media (max-width: 599px) {

	.wp-block-post-featured-image img,
	.wp-block-post-featured-image {
		height: var(--sk-thumb-height-phone) !important;
	}
}

/* The two-column blog layout: stack cleanly and lose the forced min-width. */
@media (max-width: 781px) {

	.blog-two-columns .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.blog-two-columns .wp-block-group {
		flex-wrap: wrap !important;
	}

	.blog-two-columns .wp-block-post-featured-image {
		min-width: 100% !important;
	}
}

/* Post meta (date / author) should wrap rather than overflow. */
.wp-block-post-date,
.wp-block-post-author-name {
	white-space: normal;
}


/* ==========================================================================
   9. COLUMNS
   ========================================================================== */

@media (max-width: 781px) {

	/* Percentage widths set for desktop (40%, 70%) must be released once the
	   columns stack, or you get a skinny sliver of content. */
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}

	/* Give stacked columns breathing room. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: clamp(24px, 6vw, 48px);
	}
}

/* Very heavy top/bottom section padding shrinks on phones so people are not
   scrolling through empty space. */
@media (max-width: 599px) {

	.wp-block-group.alignfull[style*="superbspacing-xxlarge"] {
		padding-top: clamp(32px, 10vw, 60px) !important;
		padding-bottom: clamp(32px, 10vw, 60px) !important;
	}
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

@media (max-width: 781px) {

	.superbthemes-footer-001 {
		text-align: center;
	}

	.superbthemes-footer-001 .wp-block-columns {
		gap: 20px;
	}

	.superbthemes-footer-001 .wp-block-social-links {
		justify-content: center !important;
	}
}

/* Social icons: proper tap targets. */
.wp-block-social-links .wp-social-link {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ==========================================================================
   11. TABLES, CODE, EMBEDS
   Classic sources of horizontal scroll on phones.
   ========================================================================== */

.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	min-width: 100%;
}

@media (max-width: 599px) {
	.wp-block-table table {
		font-size: .9rem;
	}

	.wp-block-table td,
	.wp-block-table th {
		padding: 8px;
	}
}

pre,
.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-width: 100%;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed iframe {
	max-width: 100%;
}


/* ==========================================================================
   12. BLOCK STYLES
   These power the one-click options in the editor's Styles sidebar tab.
   (Registered in functions.php - search for "register_block_style".)
   ========================================================================== */

/* --- Cover: "Show whole photo" -------------------------------------------
   Guarantees the picture is never cropped. The photo is fitted inside the
   banner and any leftover space is filled with --sk-letterbox.
   THIS IS THE ONE TO USE IF THE HOME PAGE PHOTO IS CUTTING YOU OFF. */
.wp-block-cover.is-style-shannon-uncropped {
	background-color: var(--sk-letterbox);
}

.wp-block-cover.is-style-shannon-uncropped .wp-block-cover__image-background {
	object-fit: contain !important;
	object-position: center !important;
}

/* --- Cover: "Short on mobile" -------------------------------------------- */
@media (max-width: 599px) {
	.wp-block-cover.is-style-shannon-short-mobile {
		min-height: 260px !important;
	}
}

/* --- Image: "Rounded" ---------------------------------------------------- */
.wp-block-image.is-style-shannon-rounded img {
	border-radius: var(--sk-card-radius);
}

/* --- Image: "Framed" ----------------------------------------------------- */
.wp-block-image.is-style-shannon-framed {
	padding: 10px;
	border: 1px solid var(--sk-hairline);
	background: var(--wp--preset--color--contrast-light, #fff);
}

.wp-block-image.is-style-shannon-framed img {
	display: block;
}

/* --- Image: "Portrait crop" ---------------------------------------------- */
.wp-block-image.is-style-shannon-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	border-radius: var(--sk-card-radius);
}

/* --- Group: "Card" ------------------------------------------------------- */
.wp-block-group.is-style-shannon-card {
	background: var(--wp--preset--color--contrast-light, #fff);
	border-radius: var(--sk-card-radius);
	box-shadow: var(--sk-card-shadow);
	padding: var(--sk-card-padding);
}

/* --- Group: "Boxed" ------------------------------------------------------ */
.wp-block-group.is-style-shannon-boxed {
	background: var(--wp--preset--color--mono-4, #F2E2D4);
	border-radius: var(--sk-card-radius);
	padding: var(--sk-card-padding);
}

/* --- Columns: "Stay side by side" ---------------------------------------- */
.wp-block-columns.is-style-shannon-no-stack {
	flex-wrap: nowrap !important;
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-shannon-no-stack>.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		max-width: none !important;
	}
}

/* --- Post featured image: "Short on mobile" ------------------------------ */
@media (max-width: 599px) {

	.wp-block-post-featured-image.is-style-shannon-short-mobile,
	.wp-block-post-featured-image.is-style-shannon-short-mobile img {
		height: 160px !important;
	}
}

/* --- Quote: "Pull quote" ------------------------------------------------- */
.wp-block-quote.is-style-shannon-pull {
	border: 0;
	border-left: 4px solid var(--wp--preset--color--featured, #59615F);
	padding-left: clamp(16px, 4vw, 32px);
	font-size: clamp(1.125rem, 3vw, 1.5rem);
	line-height: 1.45;
	font-style: normal;
}

.wp-block-quote.is-style-shannon-pull cite {
	display: block;
	margin-top: 12px;
	font-size: .875rem;
	font-style: normal;
	opacity: .75;
}


/* ==========================================================================
   13. ACCESSIBILITY & MOTION
   ========================================================================== */

/* A visible focus ring for keyboard users. The old theme had none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #59615F);
	outline-offset: 2px;
}

/* Never let a form field be smaller than the iOS zoom threshold (16px), or
   Safari zooms the whole page when someone taps into it. */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	font-size: max(16px, 1rem);
	max-width: 100%;
}

/* Comment form and search form should never overflow. */
.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea,
.wp-block-search__input {
	width: 100%;
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print: hide the furniture. */
@media print {

	header,
	footer,
	.wp-block-navigation,
	.wp-block-social-links {
		display: none !important;
	}
}