/*!
Theme Name: Exemed Pharmaceuticals
Theme URI: https://www.exemedpharma.com/
Author: Exemed Pharmaceuticals
Author URI: https://www.exemedpharma.com/
Description: The Exemed Pharmaceuticals theme. Intermediates, Active Pharmaceutical Ingredients and finished formulations, from two approved facilities in Gujarat, India. Every editable region is a Secure Custom Fields (SCF/ACF) field, synced from /acf-json.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: exemedpharma
Tags: custom-logo, custom-menu, featured-images, translation-ready

Built on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.

--------------------------------------------------------------
THE DESIGN SYSTEM LIVES IN assets/css/main.css
--------------------------------------------------------------
main.css carries its own reset, tokens and every component class the
templates use. It is enqueued before this file, so nothing generic belongs
here — a normalize block in this file would override the design.

This file holds only what main.css has no reason to know about: markup
WordPress emits that the static pages never had.
--------------------------------------------------------------
*/

/* ============================================================================
   RESPONSIVE — narrow-viewport fixes
   ----------------------------------------------------------------------------
   Measured at 360 / 414 / 768 / 1024 / 1440. Every page is clean at 414 and
   above; these fix the last few pixels of horizontal overflow at 360.

   main.css states its policy at the body rule: no overflow-x on the root,
   because that computes overflow-y to auto and silently kills position:sticky.
   So each of these is scoped to the component that actually overflows.
   ========================================================================== */

/* Long chemical and company names cannot wrap, so they spill out of their grid
   cell. Measured culprits: "Dextromethorphan Hydrobromide", "Macleods
   Pharmaceuticals", "Teneligliptin Hemipenta Hydrobromide Hydrate".

   `anywhere` rather than `break-word`, because the grid itself overflows on
   the clientele wall: the cell has to report a smaller min-content size before
   the track will fit, and only `anywhere` does that.

   Scoped to phone widths on purpose. `anywhere` re-sizes grid tracks, and left
   unscoped it made the lead bento tile 44px taller at 768px and rewrapped
   "Levetiracetam" and "Dextromethorphan Hydrobromide" onto lines the design
   does not have. From 481px up the design lets a long name sit slightly proud
   of its tile without the page overflowing, so nothing is needed there. */
@media (max-width: 480px) {

	.exmbtile-n,
	.exmbtile-use,
	.exmbtile-cas,
	.exmbtile-list b,
	.exmbtile-list span,
	.exmtile-n,
	.exmpt-name,
	.exmwall-c figcaption,
	.exmcgrid span,
	.exmcertband-row span,
	.exmphero-plate dd,
	.exmcmp-v,
	.exmsite-spec dd,
	.exmroom-a,
	.exmdoc-t,
	.exmpol-t {
		overflow-wrap: anywhere;
	}
}

/* The porthole ring spins, and a rotating square's bounding box grows by up to
   √2, pushing past the figure it sits in. `clip` contains it without creating
   a scroll container, so sticky still works. The ring's visible circle and the
   caption both sit well inside, so nothing is cut. */
.exmport {
	overflow: clip;
}

/* The About hero's dot-grid strip is meant to bleed outside the frame, and it
   bleeds 22px. The page gutter is only 20px, so on a 360px screen the last
   2px land outside the document. Trimming the bleed to 12px keeps the effect
   and puts it back inside the gutter. Above 560px the gutter is wide enough
   for the full 22px, so the design is untouched there. */
@media (max-width: 560px) {
	.exmphero-frame::before {
		top: -12px;
		right: -12px;
	}
}

/* ------------------------------------------------------------- Editor output
   Blocks and classes the block editor emits inside .exmread-in. */
.exmread-in section ul,
.exmread-in section ol {
	margin: 0 0 var(--s5, 24px);
	padding-left: 1.25em;
}

.exmread-in section ul li,
.exmread-in section ol li {
	margin-bottom: 0.5em;
	line-height: 1.62;
}

.exmread-in section blockquote {
	margin: var(--s6, 32px) 0;
	padding-left: var(--s5, 24px);
	border-left: 2px solid var(--green, #0E8544);
	font-size: 1.125rem;
	line-height: 1.5;
}

.exmread-in section figure img,
.exmread-in section img {
	max-width: 100%;
	height: auto;
}

.exmread-in .wp-caption-text,
.exmread-in figcaption {
	margin-top: 0.5em;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin: 0 var(--s5, 24px) var(--s4, 16px) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--s4, 16px) var(--s5, 24px);
}

/* ------------------------------------------------------- Product tile links
   Bento tiles and spec tiles become links once products are real posts. */
.exmbtile-n a,
.exmtile-n a {
	color: inherit;
	text-decoration: none;
}

.exmbtile-n a:hover,
.exmbtile-n a:focus-visible,
.exmtile-n a:hover,
.exmtile-n a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- Search form
   Only ever seen on 404 and the fallback listing. */
.exmread-in .search-form {
	display: flex;
	gap: var(--s3, 12px);
	flex-wrap: wrap;
}

.exmread-in .search-form label {
	flex: 1 1 240px;
}

.exmread-in .search-form .search-field {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid currentColor;
	background: transparent;
	font: inherit;
}

/* ----------------------------------------------------------- Admin bar offset
   The fixed masthead would otherwise sit under the WordPress toolbar. */
.admin-bar .exmmast {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .exmmast {
		top: 46px;
	}
}

/* ------------------------------------------------------------ Screen readers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #1f4585;
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}