/**
 * What nobody gave a colour.
 *
 * The parent theme's reset paints a link #c36 (#336 under the pointer) and a button
 * #c36, filling it pink on hover and focus: a colour from no site's palette, and the
 * first thing a site with no header built yet shows. This sheet comes straight after
 * that reset, never before it, and the first two blocks use its own selectors. Same
 * weight, same place in the cascade, so everything that outranks the reset today
 * outranks this as well: a kit's link and button colours, global colours, the panel,
 * a widget's own class.
 *
 * `inherit`, not a dark colour written here: it is the site's text colour on a white
 * page, and it stays readable in a section an author made dark.
 */
a {
	color: inherit;
}

a:active,
a:hover {
	color: inherit;
}

[type=button],
[type=submit],
button {
	border-color: currentColor;
	color: inherit;
}

/* Grey at half strength over whatever is behind it: it shows on a light page and on a
   dark one, and the text stays the text colour. */
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
	background-color: rgba( 127, 127, 127, .25 );
	color: inherit;
}

/* A link in text has to read as a link once it stops being pink. The reset's companion
   underlines .page-content a, and Elementor takes that off again everywhere in its own
   content. The class is printed only while the kit has no link colour or decoration:
   a kit's colour is the mark there, and nothing is added to it. */
.geeks-plain-links .elementor-widget-text-editor a,
.geeks-plain-links .elementor-widget-theme-post-content a {
	text-decoration: underline;
}

/* The parent's default header and footer: the only thing under the pointer now. */
.geeks-plain-links .site-header a:hover,
.geeks-plain-links .site-footer a:hover {
	text-decoration: underline;
}

/* The menu's links are padded 15px, which left the first word 15px off the site title
   when the menu falls to a row of its own. On the same row as the title it does not
   move: the row's far edge holds it. A stacked header is centred, so it keeps its own. */
.site-header:where( :not( .header-stacked ) ) .site-navigation ul.menu {
	margin-inline-start: -15px;
}

/* The same 15px on the phone's toggle, and the open list's words on the title's line
   too. Its panel is as wide as the header, and the title sits in the parent's centred
   box, so the padding is what is left of that box's width on each side. Those widths
   are the parent's own; a full-width header has no box to line up with. */
.site-header:where( :not( .header-stacked ) ) .site-navigation-toggle-holder {
	padding-inline: 0;
}

.site-header:where( :not( .header-stacked, .header-full-width ) ) .site-navigation-dropdown ul.menu li a {
	padding-inline-start: max( 10px, calc( ( 100% - var( --geeks-hello-box, 500px ) ) / 2 ) );
}

@media ( min-width: 768px ) {
	.site-header {
		--geeks-hello-box: 600px;
	}
}

@media ( min-width: 992px ) {
	.site-header {
		--geeks-hello-box: 800px;
	}
}

@media ( min-width: 1200px ) {
	.site-header {
		--geeks-hello-box: 1140px;
	}
}

/* A long address or a run of numbers breaks at the edge rather than widening a phone's
   page. Not `anywhere`: that shrinks the link's minimum width and can squeeze it in a
   flex row. The shortcodes print a bare link with no wrapper, so the rule names the link. */
a[href^="mailto:"],
a[href^="tel:"] {
	overflow-wrap: break-word;
}

/* The reset clips the body's sideways overflow, but with the root left at `visible` the
   body hands that to the window, so a phone's layout still grew to fit anything too wide,
   and the fixed bell slid off with it. Set here, the root takes the hand-over and the
   body's own clip works. Not a scroll container: sticky and pinned things are unaffected. */
html {
	overflow-x: clip;
}

/* The branch hours table. The reset gives any table a heavy grid, zebra rows and 15px
   cells. These are the reset's own selectors again, the class in :where() so each weighs
   exactly what its original weighs and comes right after it: whatever beats the reset
   (Elementor custom CSS, a kit's table style) beats this too. Thin lines between rows
   and nothing else, a day and its hours at one weight, both to the left. */
table:where( .geeks-wh-table ) td,
table:where( .geeks-wh-table ) th {
	border: 0;
	border-block-end: 1px solid hsla( 0, 0%, 50%, .25 );
	font-weight: inherit;
	padding: 5px 8px;
	text-align: start;
}

table:where( .geeks-wh-table ) :where( tr:last-child ) td,
table:where( .geeks-wh-table ) :where( tr:last-child ) th,
table:where( .geeks-wh-table[data-geeks-wh-today] ) td,
table:where( .geeks-wh-table[data-geeks-wh-today] ) th {
	border-block-end: 0;
}

table:where( .geeks-wh-table ) :where( tr.is-today ) td,
table:where( .geeks-wh-table ) :where( tr.is-today ) th {
	font-weight: 700;
}

table:where( .geeks-wh-table ) tbody > tr:nth-child( odd ) > td,
table:where( .geeks-wh-table ) tbody > tr:nth-child( odd ) > th,
table:where( .geeks-wh-table ) tbody tr:hover > td,
table:where( .geeks-wh-table ) tbody tr:hover > th {
	background-color: transparent;
}