/* ==========================================================================
   mobile.css — phone-width fixes
   Loaded last, after responsive.min.css, so it wins on equal specificity.

   EVERY rule here sits inside a max-width media query. Nothing in this file
   can affect the desktop site. To roll the whole thing back, delete the one
   <link> tag in _includes/_templates/header.php — no other file depends on it.

   Each fix says what it corrects and what the measured symptom was. Widths
   quoted are from rendering the real blocks against the real stylesheets at
   360px, 390px and 414px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HORIZONTAL OVERFLOW
   Bulma sets html{overflow-x:hidden}, so these never showed a scrollbar —
   the content was simply cut off the side of the screen where nobody could
   reach it.
   -------------------------------------------------------------------------- */

/* 1a. The main content blocks (text, text_text, text_text_text,
   text_text_text_text, image_text) use `columns is-variable is-8`, which
   sets --columnGap:2rem and so puts a -32px margin on each side. The section
   only has 24px of padding to absorb it, so every one of those blocks hung
   8px off both edges. Pulling the gutter back to 0.75rem on phones leaves
   the margin inside the padding. Desktop keeps the 2rem gutter. */
@media screen and (max-width: 768px) {
	.columns.is-variable.is-6,
	.columns.is-variable.is-7,
	.columns.is-variable.is-8 { --columnGap: 0.75rem; }
}

/* 1b. section[data-popup] .modal-content is a hard 500px with no max-width.
   Measured 544px right edge in a 360px viewport — 184px off screen. */
@media screen and (max-width: 768px) {
	section[data-popup] .modal-content {
		width: auto;
		max-width: 100%;
		margin-left: 1rem;
		margin-right: 1rem;
	}
}

/* 1c. section.middler .block_image is set to 400x400 inside responsive.min.css's
   own max-width:768px block — a 400px box on a 360px phone, 64px off screen.
   Square aspect is kept; it just stops being wider than the screen. */
@media screen and (max-width: 768px) {
	section.middler .block_image {
		width: 100%;
		max-width: 400px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 1d. The testimonial block's offset backing panel is inline-styled
   width:100% and then given ml-5 (24px), so it sat 20px past the edge.
   The offset frame is a desktop decoration; square it up on phones. */
@media screen and (max-width: 768px) {
	section.block_type_testimonial .has-background-light.ml-5 { margin-left: 0 !important; }
	section.block_type_testimonial .has-background-light.mt-5 { margin-top: 0 !important; }
}

/* 1e. Safety net. Media and embeds are the usual source of new overflow as
   content gets added, so cap them rather than waiting for the next report. */
@media screen and (max-width: 768px) {
	img, video, canvas, svg:not(.image), iframe, embed, object {
		max-width: 100%;
	}
	img, video, iframe { height: auto; }
	table { max-width: 100%; }
	pre, code { overflow-x: auto; max-width: 100%; }
	/* long unbroken strings (URLs, order refs) shouldn't widen the page */
	p, li, dd, td, th, h1, h2, h3, h4, h5, h6, .title, .subtitle {
		overflow-wrap: break-word;
	}
}


/* --------------------------------------------------------------------------
   2. TAP TARGETS
   44x44 CSS px is the figure Apple and the WCAG 2.5.5 target-size rule both
   use. Measurements below were taken from the rendered page.
   -------------------------------------------------------------------------- */

/* 2a. The burger. Bulma sizes it 3.25rem (52px) square; custom.min.css
   overrides that to 30x21px, and the SVG inside is 40px wide so the icon
   overflowed its own box. It is the only navigation control on a phone.
   Restoring 44x44 keeps the icon the same visual size as now. */
@media screen and (max-width: 1023px) {
	.navbar-burger {
		width: 44px;
		height: 44px;
		padding: 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.navbar-burger svg {
		display: block;
		width: 32px;
		height: 32px;
	}
}

/* 2b. Buttons, links-as-buttons and form controls were landing at 42-43px —
   just short. min-height rather than height so nothing that is already
   taller gets squashed. */
@media screen and (max-width: 768px) {
	.button,
	.input,
	.textarea,
	.select select,
	select,
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="search"], input[type="password"],
	input[type="date"], input[type="submit"], button,
	a.button {
		min-height: 44px;
	}
	.select::after { z-index: 1; }
}

/* 2c. Checkboxes and radios rendered 16x16 (the configurator's DDoS and
   firewall options, among others). The control itself grows a little and
   its label takes the rest of the tap area. */
@media screen and (max-width: 768px) {
	input[type="checkbox"],
	input[type="radio"] {
		width: 22px !important;
		height: 22px !important;
		min-height: 22px;
		flex-shrink: 0;
	}
	label:has(> input[type="checkbox"]),
	label:has(> input[type="radio"]),
	.checkbox, .radio {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
	}
}

/* 2d. Range sliders rendered 16px tall — hard to grab on a touchscreen.
   The track keeps its appearance; the hit area and thumb grow. */
@media screen and (max-width: 768px) {
	input[type="range"] {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
		background-clip: content-box;
	}
	input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
	input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
}

/* 2e. Small icon links (article and author share rows) were 40-42px. */
@media screen and (max-width: 768px) {
	.article-share-acts a, .article-share-acts button,
	.author-card-share-acts a, .author-card-share-acts button {
		width: 44px;
		height: 44px;
	}
}


/* --------------------------------------------------------------------------
   3. FORM FIELDS — stop iOS zooming the page
   Safari on iOS zooms the viewport whenever a field with a font-size under
   16px takes focus, and does not zoom back out. Bulma sets controls to
   0.9rem, which renders at 14.4px, so this fired on every field on the site:
   the contact form, the colocation and IP transit calculators, the dedicated
   server configurator and the news search.

   16px is the threshold, not a preference — 15.9px still zooms.

   !important is needed here and is not laziness. The calculator and
   configurator blocks each print their own <style> block into the page with
   ID-scoped rules — "#calc_7 select{font-size:0.9rem}" and the like. An ID
   in the selector outranks anything a stylesheet can say, and the number in
   the ID is the block's database row, so the selectors cannot be listed here
   in advance. Marking these important is the only way a stylesheet can win.
   The rules stay inside the phone-width media query, so desktop is untouched.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.input,
	.textarea,
	.select select,
	select,
	textarea,
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="search"], input[type="password"],
	input[type="date"], input[type="url"] {
		font-size: 16px !important;
	}
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY MINIMUMS
   A lot of secondary text renders at 11-13px, which is below comfortable
   reading size on a phone held at arm's length. Raised to 14px on phones
   only; desktop sizes are untouched.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	section.footer p,
	section.footer a.navbar-item,
	section.footer .navbar-item,
	section.footer .copyright small,
	.byline-sub,
	.related-articles-label,
	.related-articles .card.article .subtitle,
	.article-share .copied,
	.author-card-share .copied,
	.author-card-k,
	.pagination-sm > li > a,
	.pagination-sm > li > span,
	.content .callout strong:first-child,
	.services_meganav .svc-label,
	.services_meganav .svc-desc {
		font-size: 14px;
	}

	/* Calculator and pricing captions. Marked important for the same reason
	   as the form fields above: these are set by ID-scoped rules in each
	   block's own inline <style>, which a stylesheet cannot otherwise beat. */
	.chint, .cnote, .ctitle, .ftitle, .tprice, .cs-sum,
	.feats-title, .feat-txt, .punits, .co-chip-s,
	.cf-back, .ubtn-custom, .feat-txt {
		font-size: 14px !important;
	}

	/* option text in native selects follows the select itself */
	option { font-size: 16px; }
}


/* --------------------------------------------------------------------------
   5. HEADER ON PHONES
   responsive.min.css hides every .navbar-item in the header below 550px, so
   both "Login" and the call-to-action button disappeared, leaving a header
   that is 100px tall and holds nothing but a logo and the burger.

   The CTA is put back; Login stays hidden because it is already in the
   burger menu. To hide the CTA again, delete this block.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 550px) {
	section.header .navbar-end .navbar-item:last-child {
		display: flex;
		padding-left: 0.5rem;
	}
	section.header .navbar-end .navbar-item:last-child .button {
		min-height: 44px;
		padding-left: 0.9rem;
		padding-right: 0.9rem;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* Very narrow phones: the logo gives way before the CTA does. */
@media screen and (max-width: 380px) {
	section.header .navbar-brand img { max-width: 130px; height: auto; }
	section.header .navbar-end .navbar-item:last-child .button {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}
}


/* --------------------------------------------------------------------------
   6. VERTICAL RHYTHM
   Sections carry 4.5rem (72px) of padding top and bottom on mobile, so a
   six-block page spends roughly 860px on whitespace alone before any content
   is drawn. 3rem keeps the sections visually separate on a small screen
   without the dead scrolling.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
	.section {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.section.padding_small {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	/* hero sections keep their own height rules */
	.section.hero, section.hero { padding-top: 0; padding-bottom: 0; }
}


/* --------------------------------------------------------------------------
   7. SMALL CORRECTIONS
   -------------------------------------------------------------------------- */

/* 7a. hero_smaller uses min-height:40vh. On iOS, vh is measured against the
   tallest viewport, so the hero jumps as the address bar shows and hides.
   dvh tracks the visible viewport; the vh line stays first as the fallback
   for anything that doesn't support dvh. */
@media screen and (max-width: 768px) {
	section.hero.hero_smaller.is-halfheight .hero-body {
		min-height: 40vh;
		min-height: 40dvh;
	}
}

/* 7b. Tables inside content scroll in their own box rather than widening
   the page. The news and careers tables already do this; this covers tables
   typed into wysiwyg content. */
@media screen and (max-width: 768px) {
	.content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}
}

/* 7c. Grouped fields (Bulma's .field.is-grouped) lay an input and a button
   side by side and do not wrap, which pushed the subscribe form off screen.
   Stack them on phones. */
@media screen and (max-width: 600px) {
	.field.is-grouped {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.field.is-grouped > .control { flex: 1 1 100%; }
	.field.is-grouped > .control .input,
	.field.is-grouped > .control .button { width: 100%; }
}


/* --------------------------------------------------------------------------
   8. BLOCK-LEVEL TEXT AND CONTROLS
   Found by re-measuring after sections 1-7 were in place. These all come from
   the calculator / configurator / pricing blocks, which print their own
   ID-scoped <style> into the page, so they need the same important marking
   as section 3. Scoped to the generated block wrappers rather than applied
   globally, so ordinary page content is left alone.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* Form labels and the consent line were rendering at 12.2-13.6px. These
	   are text the visitor has to read to fill the form in correctly. */
	section[class*="block_type_"] label,
	section[class*="block_type_"] .cf-check,
	section[class*="block_type_"] .cf-ghead,
	section[class*="block_type_"] .cf-note,
	section[class*="block_type_"] .cf-deploy,
	section[class*="block_type_"] .dstb-l {
		font-size: 14px !important;
	}

	/* Sub-headings inside the configurator were 11.5px and 12.5px. */
	section[class*="block_type_"] h4,
	section[class*="block_type_"] h5 {
		font-size: 14px !important;
	}

	/* "Go back to all servers" is a standalone navigation link, not an inline
	   link in prose, so it gets a real tap target. */
	.cf-back {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* The logo link rendered 32px tall. */
	section.header .navbar-brand a.navbar-item {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}