/*
Theme Name:   Dig Mitchelville
Author:       ECC Media Pro
Author URI:   https://eccmediapro.com
Description:  Custom theme for Dig Mitchelville — the public archaeological archive of Historic Mitchelville Freedom Park. Renders the site header, primary navigation, responsive menu panel, and footer in PHP, and carries the brand colour and type system. Built to work alongside Elementor free and Elements Ultra.
Version:      1.0.10
Requires at least: 5.6
Requires PHP: 7.2
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dig-mitchelville
Tags:         custom-logo, custom-menu, elementor
*/

/* ==========================================================================
   1. Brand tokens
   Sampled from the live site. Change a value here and it changes everywhere.
   ========================================================================== */

:root {
	--dig-brown:        #423A2C; /* logo bar, footer                        */
	--dig-brown-deep:   #2E281E; /* footer base bar                         */
	--dig-teal:         #1E9B97; /* primary accent, current page            */
	--dig-teal-dark:    #17807C; /* accent hover                            */
	--dig-gold:         #D2A145; /* call-to-action buttons                  */
	--dig-gold-dark:    #B8862F;
	--dig-bone:         #F1F1ED; /* page background                         */
	--dig-ink:          #27231C; /* body and menu text                      */
	--dig-ink-soft:     #5A5347; /* secondary text                          */
	--dig-white:        #FFFFFF;
	--dig-rule:         #E0DFD8; /* hairline dividers                       */

	--dig-font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--dig-font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--dig-header-h:     96px;  /* desktop header height                     */
	--dig-header-h-sm:  72px;  /* mobile header height                      */
	--dig-gutter:       24px;
	--dig-max:          1040px; /* article / content column                 */
	--dig-max-header:   1140px; /* header + footer bar                      */

	/* Horizontal padding on a nav link. Shrinks with the viewport so the
	   items compress instead of wrapping to a second line. */
	--dig-nav-pad:      clamp(6px, 1.1vw, 16px);

	--dig-ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	/* clip, never hidden — overflow-x: hidden breaks position: sticky. */
	overflow-x: clip;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--dig-bone);
	color: var(--dig-ink);
	font-family: var(--dig-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--dig-font-display);
	color: var(--dig-ink);
	line-height: 1.15;
	margin: 0 0 0.5em;
	font-weight: 700;
	/* Spread a multi-line heading evenly across its lines instead of leaving
	   one orphaned word, which is what a hand-placed <br> is usually for. */
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }

p { margin: 0 0 1.15em; }

a { color: var(--dig-teal); }
a:hover { color: var(--dig-teal-dark); }

img { max-width: 100%; height: auto; }

:focus-visible {
	outline: 3px solid var(--dig-teal);
	outline-offset: 2px;
}

.dig-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--dig-ink);
	color: var(--dig-white);
	font-weight: 600;
}
.dig-skip-link:focus {
	left: 8px;
	top: 8px;
	color: var(--dig-white);
}

.dig-container {
	width: 100%;
	max-width: var(--dig-max);
	margin-inline: auto;
	padding-inline: var(--dig-gutter);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.dig-header {
	position: relative;
	z-index: 500;
	background: var(--dig-bone);
	border-bottom: 1px solid var(--dig-rule);
}

.dig-header--sticky {
	position: sticky;
	top: 0;
}

.dig-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 2vw, 32px);
	min-height: var(--dig-header-h);
	width: 100%;
	max-width: var(--dig-max-header);
	margin-inline: auto;
	padding-inline: var(--dig-gutter);
}

.dig-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.dig-header__brand img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: calc(var(--dig-header-h) - 24px);
}

.dig-header__title {
	font-family: var(--dig-font-display);
	font-size: 1.5rem;
	color: var(--dig-ink);
	text-decoration: none;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   4. Primary navigation — desktop
   ========================================================================== */

.dig-nav__list,
.dig-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dig-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(0px, 0.5vw, 6px);
}

.dig-nav__list li { position: relative; }

.dig-nav__list a {
	display: block;
	padding: 10px var(--dig-nav-pad);
	color: var(--dig-ink);
	font-size: clamp(0.6875rem, 0.92vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: clamp(0.02em, 0.28vw, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.16s var(--dig-ease);
}

.dig-nav__list > li > a { position: relative; }

.dig-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: var(--dig-nav-pad);
	right: var(--dig-nav-pad);
	bottom: 2px;
	height: 2px;
	background: var(--dig-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s var(--dig-ease);
}

.dig-nav__list > li:hover > a::after,
.dig-nav__list > li:focus-within > a::after,
.dig-nav__list > li.current-menu-item > a::after,
.dig-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }

.dig-nav__list a:hover,
.dig-nav__list .current-menu-item > a,
.dig-nav__list .current-menu-ancestor > a { color: var(--dig-teal); }

/* Desktop dropdown panel */
.dig-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 8px 0;
	background: var(--dig-white);
	border: 1px solid var(--dig-rule);
	box-shadow: 0 14px 34px rgba(39, 35, 28, 0.13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s var(--dig-ease), transform 0.18s var(--dig-ease), visibility 0.18s var(--dig-ease);
	z-index: 60;
}

.dig-nav__list li:hover > .sub-menu,
.dig-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dig-nav__list .sub-menu a {
	padding: 11px 18px;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.dig-nav__list .sub-menu a:hover { background: var(--dig-bone); }

.dig-nav__list .sub-menu .sub-menu { top: 0; left: 100%; }

/* The accordion caret is mobile-only; hide it on the desktop bar. */
.dig-sub-toggle { display: none; }

/* ==========================================================================
   5. Toggle button (hamburger that becomes an ×)
   ========================================================================== */

.dig-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-right: -10px; /* optical trim so the icon sits on the text edge */
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--dig-ink);
}

.dig-nav-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	transition: transform 0.22s var(--dig-ease), opacity 0.18s var(--dig-ease);
}

.dig-nav-open .dig-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dig-nav-open .dig-nav-toggle__bar:nth-child(2) { opacity: 0; }
.dig-nav-open .dig-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   6. Responsive panel
   Drops from the header bar, full width. No slide-in, no overlay scrim.
   ========================================================================== */

@media (max-width: 900px) {

	.dig-header__inner {
		min-height: var(--dig-header-h-sm);
		padding-inline: 20px;
	}

	.dig-header__brand img {
		max-height: calc(var(--dig-header-h-sm) - 18px);
	}

	.dig-nav-toggle { display: flex; }

	.dig-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--dig-header-h-sm));
		overflow-y: auto;
		background: var(--dig-white);
		border-top: 1px solid var(--dig-rule);
		box-shadow: 0 18px 30px rgba(39, 35, 28, 0.10);
		display: none;
	}

	.dig-nav-open .dig-nav { display: block; }

	.dig-nav__list {
		display: block;
		padding: 4px 20px 20px;
	}

	.dig-nav__list > li + li { border-top: 1px solid var(--dig-rule); }

	.dig-nav__list li { display: block; }

	.dig-nav__list a {
		padding: 20px 0;
		font-size: 0.875rem;
	}

	/* No underline sweep on mobile — the divider already does that work. */
	.dig-nav__list > li > a::after { content: none; }

	/* Parent rows: link on the left, caret button on the right. */
	.dig-nav__list .menu-item-has-children > a {
		display: inline-block;
		width: calc(100% - 52px);
		vertical-align: middle;
	}

	.dig-sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		color: var(--dig-ink);
		vertical-align: middle;
	}

	.dig-sub-toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s var(--dig-ease);
	}

	.dig-sub-open > .dig-sub-toggle::before {
		transform: translateY(2px) rotate(-135deg);
	}

	.dig-sub-toggle:hover,
	.dig-sub-toggle:focus-visible { color: var(--dig-teal); }

	/* Sub-menus collapse by default and open in place. */
	.dig-nav__list .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 8px 16px;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.dig-nav__list .sub-open > .sub-menu,
	.dig-nav__list .dig-sub-open > .sub-menu { display: block; }

	.dig-nav__list .sub-menu a {
		padding: 14px 0;
		font-weight: 600;
		letter-spacing: 0.06em;
		color: var(--dig-ink-soft);
		white-space: normal;
	}

	.dig-nav__list .sub-menu a:hover { background: none; color: var(--dig-teal); }
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.dig-btn {
	display: inline-block;
	padding: 14px 28px;
	background: var(--dig-gold);
	color: var(--dig-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background 0.18s var(--dig-ease);
}

.dig-btn:hover { background: var(--dig-gold-dark); color: var(--dig-ink); }

.dig-btn--teal { background: var(--dig-teal); color: var(--dig-white); }
.dig-btn--teal:hover { background: var(--dig-teal-dark); color: var(--dig-white); }

/* ==========================================================================
   8. Content
   ========================================================================== */

.dig-main { min-height: 50vh; }

.dig-entry {
	padding-block: 64px;
}

.dig-entry__title { margin-bottom: 24px; }

.dig-entry__meta {
	margin-bottom: 32px;
	color: var(--dig-ink-soft);
	font-size: 0.9375rem;
}

.dig-entry__content { max-width: 72ch; }

.dig-entry__thumb { margin-bottom: 32px; }

.dig-post-list {
	display: grid;
	gap: 40px;
	padding-block: 64px;
}

.dig-post-card {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--dig-rule);
}

.dig-post-card__title { margin-bottom: 8px; }
.dig-post-card__title a { color: var(--dig-ink); text-decoration: none; }
.dig-post-card__title a:hover { color: var(--dig-teal); }

.dig-pagination {
	display: flex;
	gap: 10px;
	padding-bottom: 64px;
}

.dig-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--dig-rule);
	color: var(--dig-ink);
	text-decoration: none;
}

.dig-pagination .page-numbers.current,
.dig-pagination .page-numbers:hover {
	background: var(--dig-teal);
	border-color: var(--dig-teal);
	color: var(--dig-white);
}

/* Elementor pages run edge to edge; the theme wrapper must not box them in. */
.dig-main--elementor .dig-container {
	max-width: none;
	padding-inline: 0;
}

/* A default measure for boxed Elementor containers, wrapped in :where() so it
   carries zero specificity. Anything set in Elementor — Site Settings, or a
   width on an individual container — overrides this without a fight. Sections
   set to full width are untouched, so the hero still spans the viewport. */
:where(.dig-main--elementor) {
	--container-max-width: var(--dig-max);
}

:where(.dig-main--elementor .e-con.e-con-boxed > .e-con-inner),
:where(.dig-main--elementor .elementor-section.elementor-section-boxed > .elementor-container) {
	max-width: var(--dig-max);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.dig-footer {
	background: var(--dig-brown);
	color: #DCD8CE;
	font-size: 0.9375rem;
}

.dig-footer a { color: #DCD8CE; text-decoration: none; }
.dig-footer a:hover { color: var(--dig-teal); }

.dig-footer .dig-container { max-width: var(--dig-max-header); }

.dig-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0;
	padding-block: 56px;
}

/* Dashed rules between columns. The first column has none, so the rule always
   sits between two columns rather than against the outer edge. */
.dig-footer__col {
	padding-inline: 40px;
}

.dig-footer__col:first-child { padding-left: 0; }
.dig-footer__col:last-child  { padding-right: 0; }

.dig-footer__col + .dig-footer__col {
	border-left: 1px dashed rgba(255, 255, 255, 0.28);
}

.dig-footer__heading {
	margin-bottom: 16px;
	color: var(--dig-white);
	font-family: var(--dig-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dig-footer__logo { margin-bottom: 18px; max-width: 240px; }

.dig-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dig-footer__menu li { margin-bottom: 10px; }

.dig-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dig-footer__social li { margin-bottom: 12px; }

.dig-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.dig-social__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--dig-teal);
	transition: color 0.16s var(--dig-ease);
}

.dig-footer__social a:hover .dig-social__icon { color: var(--dig-white); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dig-footer__base {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--dig-brown-deep);
}

.dig-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	padding-block: 20px;
	font-size: 0.8125rem;
	color: #B4AE9F;
}

@media (max-width: 760px) {
	.dig-footer__col {
		padding-inline: 0;
		padding-block: 28px;
	}

	.dig-footer__col:first-child { padding-top: 0; }
	.dig-footer__col:last-child  { padding-bottom: 0; }

	.dig-footer__col + .dig-footer__col {
		border-left: 0;
		border-top: 1px dashed rgba(255, 255, 255, 0.28);
	}
}

@media (max-width: 600px) {
	.dig-footer__base-inner { justify-content: flex-start; }
}