/*
Theme Name:   Desk&Wifi
Theme URI:    https://deskandwifi.pk
Description:  Child theme of GeneratePress for Desk&Wifi Coworking, Bahria Town Lahore.
              Presentation only — all functionality lives in the deskandwifi-core plugin
              (handbook decision D-3), so that bookings, invoices and member records
              survive a theme change.
Author:       Desk&Wifi
Template:     generatepress
Version:      0.2.0
Text Domain:  deskandwifi
*/

/* ===========================================================================
   Direction C — availability-first.
   IBM Plex Sans and Mono, near-white ground, one green that means "available".
   The legacy site loaded three Bootstrap builds and two jQuery versions for
   ~1.1s of blocking time. Nothing is imported here beyond the two webfonts.
   =========================================================================== */

:root {
	--dw-bg:        #FCFCFB;
	--dw-surface:   #FFFFFF;
	--dw-sunken:    #F6F6F4;
	--dw-ink:       #16181A;
	--dw-muted:     #5B6165;
	--dw-faint:     #6B7176;   /* 4.8:1 on paper; #7A8085 failed WCAG AA at 3.9 (a11y check, 14 Sep 2026) */
	--dw-line:      #E3E3E0;
	--dw-line-soft: #EDEDEA;

	/* Brand green, taken from the logo (#39B549, hue 128). The raw brand green is
	   DECORATIVE ONLY — white on it is 2.67:1, so it must never carry text. The two
	   darker steps below sit at the same hue and clear WCAG AA. */
	--dw-brand:     #39B549;   /* logo, rules, graphic marks */
	--dw-go:        #277C32;   /* links and text: 5.23:1 on white, 4.86:1 on paper */
	--dw-go-deep:   #25742F;   /* buttons: white on it is 5.80:1 */
	--dw-go-bg:     #EAF6EB;   /* available / open tint */
	--dw-stop:      #8A7F73;   /* taken */
	--dw-stop-bg:   #F3EEE9;
	--dw-warn:      #A0442E;   /* overdue, unpaid */
	--dw-warn-bg:   #F7E7E2;

	--dw-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--dw-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

	--dw-gutter: 64px;
}

body {
	background: var(--dw-bg);
	color: var(--dw-ink);
	font-family: var(--dw-sans);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--dw-go); text-decoration: none; }
a:hover { color: var(--dw-brand); }

.dw-mono { font-family: var(--dw-mono); }

/* The eyebrow appears above almost every section, so making it brand green is the
   cheapest way to thread the identity through the whole site rather than leaving
   green as an occasional accent. The small green rule before it echoes the arc in
   the logo. */
.dw-lbl {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--dw-go);
}

.dw-lbl::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--dw-brand);
	flex: none;
}

/* Inside the dark band the rule needs the brighter brand green to hold up. */
.dw-lbl--light { color: #B9AC9C; }
.dw-lbl--light::before { background: var(--dw-brand); }

/* Table headers and column labels are structural, not editorial — no rule there. */
.dw-table__head .dw-lbl,
.dw-board__head .dw-lbl {
	color: var(--dw-faint);
	font-weight: 500;
}

.dw-table__head .dw-lbl::before,
.dw-board__head .dw-lbl::before { display: none; }

::selection { background: #CBEBD1; color: var(--dw-ink); }

.dw-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--dw-gutter); }

/* --- controls ----------------------------------------------------------- */

.dw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;              /* never below 44px — real hit target */
	box-sizing: border-box;
	padding: 13px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	border: 0;
	cursor: pointer;
}

.dw-btn--solid   { background: var(--dw-ink); color: var(--dw-bg); }
.dw-btn--solid:hover { background: #2B2F33; color: var(--dw-bg); }
.dw-btn--outline { background: transparent; color: var(--dw-ink); border: 1px solid #C9CBCC; }
.dw-btn--outline:hover { border-color: var(--dw-ink); color: var(--dw-ink); }
.dw-btn--go      { background: var(--dw-go-deep); color: #FFFFFF; }
.dw-btn--go:hover { background: #1D5D26; color: #FFFFFF; }

/* --- state pills -------------------------------------------------------- */

.dw-pill {
	font-family: var(--dw-mono);
	font-size: 12px;
	padding: 5px 11px;
	display: inline-block;
	white-space: nowrap;
}

.dw-pill--open   { background: var(--dw-go-bg);   color: var(--dw-go); }
.dw-pill--closed { background: var(--dw-stop-bg); color: var(--dw-stop); }
.dw-pill--warn   { background: var(--dw-warn-bg); color: var(--dw-warn); }

/* --- open / closed status ------------------------------------------------
   The site's most useful single fact, so it is sized and coloured like it.
   Colour never carries the meaning alone: the word "Open now" does that, and
   the pill still reads correctly in greyscale.
   ------------------------------------------------------------------------- */

.dw-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.dw-status--open {
	background: var(--dw-go-bg);
	color: var(--dw-go);
	border: 1px solid #C6E5CC;
}

.dw-status--shut {
	background: var(--dw-sunken);
	color: var(--dw-muted);
	border: 1px solid var(--dw-line);
}

.dw-status__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: currentColor;
}

.dw-status--open .dw-status__dot {
	background: var(--dw-brand);
	box-shadow: 0 0 0 3px rgba(57, 181, 73, 0.22);
}

.dw-status__detail {
	font-weight: 400;
	/* Full opacity: at 0.8 the green detail on the open tint measured 3.3:1 (a11y check, 14 Sep 2026). */
	opacity: 1;
	font-size: 13px;
}

.dw-status__detail::before {
	content: "·";
	margin-right: 7px;
	opacity: 0.55;
}

/* The hero repeats it larger, where the eye actually lands first. */
.dw-status--hero {
	font-size: 16px;
	padding: 10px 18px 10px 15px;
}

.dw-status--hero .dw-status__dot { width: 11px; height: 11px; }
.dw-status--hero .dw-status__detail { font-size: 15px; }

/* --- the availability board --------------------------------------------- */

.dw-board { border: 1px solid var(--dw-line); background: var(--dw-surface); }

.dw-board__head,
.dw-board__foot {
	background: var(--dw-sunken);
	padding: 13px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.dw-board__head { border-bottom: 1px solid var(--dw-line); }
.dw-board__foot { border-top: 1px solid var(--dw-line); }

.dw-board__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--dw-line-soft);
}

.dw-board__row:last-of-type { border-bottom: 0; }

/* --- tables ------------------------------------------------------------- */

.dw-table { border: 1px solid var(--dw-line); background: var(--dw-surface); }

.dw-table__head {
	background: var(--dw-sunken);
	border-bottom: 1px solid var(--dw-line);
}

.dw-table__row { border-bottom: 1px solid var(--dw-line-soft); }
.dw-table__row:last-child { border-bottom: 0; }
.dw-table__row:hover { background: #FAFAF9; }

/* Wide content scrolls inside its own container — the page body never does. */
.dw-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- cards / panels ----------------------------------------------------- */

.dw-panel { background: var(--dw-surface); border: 1px solid var(--dw-line); }

/* ===========================================================================
   The library.

   Direction C's table was correct for scanning and dull to look at — "like an
   article", which for a room full of books is the wrong feeling entirely. This
   borrows Direction A's cover grid and its serif.

   It reads as deliberate rather than inconsistent because the header, footer,
   navigation and controls stay pure C. Only the room changes, which is true of
   the actual space too.
   =========================================================================== */

.dw-lib {
	--dw-paper: #FAF6F0;   /* warm ground, only inside the library */
	--dw-lib-line: #E6DDD1;
	background: var(--dw-paper);
}

.dw-serif {
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -0.005em;
}

.dw-lib__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 30px 22px;
}

.dw-lib__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Covers vary in proportion, so contain rather than cover — cropping a book
   jacket cuts off the title, which is the one thing it must show. */
.dw-lib__cover {
	aspect-ratio: 2 / 3;
	background: #FFFFFF;
	border: 1px solid var(--dw-lib-line);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: border-color 120ms ease;
}

.dw-lib__cover img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.dw-lib__card a:hover .dw-lib__cover { border-color: #9C8F7E; }

.dw-lib__cover--empty {
	color: var(--dw-faint);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dw-lib__title {
	font-size: 19px;
	line-height: 1.2;
	color: var(--dw-ink);
	text-wrap: pretty;
}

.dw-lib__author {
	font-size: 13px;
	color: #6E655C;
}

@media (max-width: 1100px) { .dw-lib__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .dw-lib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .dw-lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
	:root { --dw-gutter: 32px; }
}

@media (max-width: 782px) {
	:root { --dw-gutter: 18px; }

	.dw-stack-mobile { grid-template-columns: 1fr !important; }
	.dw-hide-mobile  { display: none !important; }

	/* Book table: drop the shelf and author columns rather than squeeze five
	   columns into 375px. */
	.dw-books__row,
	.dw-books__head { grid-template-columns: 1fr auto auto !important; }
	.dw-books__author,
	.dw-books__shelf { display: none !important; }
}

/* --- accessibility ------------------------------------------------------ */

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--dw-go);
	outline-offset: 2px;
}

.dw-skip {
	position: absolute;
	left: -9999px;
}

.dw-skip:focus {
	left: 8px;
	top: 8px;
	z-index: 999;
	background: var(--dw-ink);
	color: var(--dw-bg);
	padding: 10px 16px;
}

/* ===========================================================================
   Long-form prose — blog posts (.dw-prose)
   
   The editor outputs plain HTML, so this styles the elements rather than any
   class the writer has to remember. Measure is capped on the container in
   single.php, not here, so the same styles can be reused elsewhere.
   =========================================================================== */

.dw-prose {
	font-size: 17px;
	line-height: 1.72;
	color: #362F29;
	text-wrap: pretty;
}

.dw-prose > * + * { margin-top: 1.15em; }

.dw-prose h2 {
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -0.005em;
	font-size: 30px;
	line-height: 1.14;
	margin-top: 1.9em;
	margin-bottom: 0.1em;
	color: var(--dw-ink);
}

.dw-prose h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1.7em;
	margin-bottom: 0.1em;
	color: var(--dw-ink);
}

.dw-prose a {
	color: var(--dw-go);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.dw-prose ul,
.dw-prose ol { padding-left: 1.3em; }
.dw-prose li { margin-top: 0.45em; }
.dw-prose li::marker { color: #72685D; }

.dw-prose strong { font-weight: 600; color: var(--dw-ink); }

/* A pull-out for the number that matters. Sparingly. */
.dw-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--dw-brand);
	font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
	font-size: 22px;
	line-height: 1.35;
	color: var(--dw-ink);
}

.dw-prose blockquote p { margin: 0; }

/* Tables carry the price comparisons, so they must survive a phone. The wrapper
   scrolls rather than the page — a body that scrolls sideways is a bug. */
.dw-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: #FFFFFF;
	border: 1px solid #E6DDD1;
}

.dw-prose thead th {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6E655C;
	background: #F7F1E8;
	padding: 11px 14px;
	border-bottom: 1px solid #E6DDD1;
}

.dw-prose tbody td {
	padding: 11px 14px;
	border-bottom: 1px solid #F0E9DF;
	vertical-align: top;
}

.dw-prose tbody tr:last-child td { border-bottom: 0; }

.dw-prose figure { margin-left: 0; margin-right: 0; }
.dw-prose img { height: auto; border: 1px solid #E6DDD1; }

.dw-prose figcaption {
	font-size: 13px;
	color: #72685D;
	margin-top: 8px;
}

.dw-prose hr {
	height: 1px;
	background: #E6DDD1;
	border: 0;
	margin: 2.2em 0;
}

@media (max-width: 782px) {
	.dw-prose    { font-size: 16.5px; }
	.dw-prose h2 { font-size: 25px; }
}

/* ===========================================================================
   Header navigation on small screens

   🔴 This is a Core Web Vitals fix, not a styling preference.

   The nav is eight items (six links, Sign in, and the CTA). At 375px they
   wrapped onto several lines — and the number of lines depended on the width
   of the text, which CHANGES when IBM Plex Sans swaps in over the fallback.
   The header grew after the swap, every pixel of the page below it moved, and
   /blog/ measured CLS 0.293 with Lighthouse blaming <main> — because <main>
   was indeed what moved, just not what caused it.

   One non-wrapping row cannot change height, whatever the font does. It scrolls
   sideways instead, which is also better than eight items in a ragged block.
   The page body still must never scroll sideways; only this strip does.
   =========================================================================== */

@media (max-width: 782px) {
	.dw-nav {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 18px !important;
		/* Room for the CTA to sit fully on the line rather than half-clipped. */
		padding-right: 4px;
	}

	.dw-nav::-webkit-scrollbar { display: none; }

	/* Nothing in the strip may shrink, or the flex algorithm reintroduces the
	   very reflow this is here to prevent. */
	.dw-nav > * { flex: 0 0 auto; white-space: nowrap; }
}

/* The links strip shrinks and scrolls; the CTA beside it never does — see F-39
   and the note in header.php. Without min-width:0 a flex child refuses to
   shrink below its content, and the button gets pushed off the row again. */
@media (max-width: 782px) {
	.dw-nav { flex: 1 1 0; min-width: 0; }
}