:root {
	--primary-color: #7B2429; /* red, match global */
	--secondary-color: #7FAE6E; /* green accent */
	--accent-color: #A1BBAC;
	--bg-color: #DDE5DB;
	--surface-color: #7FAE6E1a;
	--border-color: #7FAE6E33;
	--text-color: #7B2429; /* red text */
}

/* Enable native scrolling */
html, body { overflow-y: auto; }

.sections-grid {
	display: block; /* single column instead of flex two columns */
}

.sections-grid .col {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* vertical spacing between sections */
	margin-bottom: 2rem; /* gap between columns when stacked */
}

.sections-grid .col:last-child {
	margin-bottom: 0;
}

section {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	border: 1.5px solid #4a556840;
	/* spacing is handled by grid gap on the container */
}

.region-selector {
    margin-bottom: 2rem;
}

body {
	font-family: 'Red Hat Display', 'Segoe UI', Arial, sans-serif;
	background: var(--bg-color);
	color: var(--text-color);
	margin: 0;
}

/* Bottom page credit (inline footer, not floating) */
.site-credit {
	position: static;
	left: auto;
	bottom: auto;
	display: block;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	text-align: left;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.55);
	background: transparent;
	border: none;
	padding: 0 2rem 2rem 2rem;
	border-radius: 8px;
	z-index: auto;
	pointer-events: auto;
}
@media (max-width: 480px) {
	.site-credit { font-size: 11px; padding: 4px 6px; margin: 1.5rem 0 0.75rem 0; }
}

/* ---- Custom scrollbar utilities (same as index) ---- */
:root {
	--scrollbar-track: rgba(0, 0, 0, 0.05);
	--scrollbar-thumb: rgba(0, 0, 0, 0.35);
	--scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
	--scrollbar-radius: 6px;
}

.scrollbar-thin {
	scrollbar-width: thin;              /* Firefox */
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.scrollbar-thin::-webkit-scrollbar {  /* WebKit */
	width: 8px;
	height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: var(--scrollbar-radius);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: var(--scrollbar-radius);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

.scrollbar-narrow {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.scrollbar-narrow::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-narrow::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--scrollbar-radius); }
.scrollbar-narrow::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); }
.scrollbar-narrow::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.scrollbar-mini {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.scrollbar-mini::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-mini::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 2px; }
.scrollbar-mini::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; }

.scrollbar-hide {
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* IE/Edge */
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

.container {
	max-width: 1100px;
	margin: 2rem auto;
	padding: 2rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 16px 0 var(--surface-color);
}

.h1 {
	font-family: 'Red Hat Display', sans-serif;
	font-size: clamp(22px, 2.1vw, 30px);
	font-weight: 800;
	color: var(--text-color); /* match nav-logo color */
	text-decoration: none;
	transition: color 0.3s ease;
	margin: 0;
}

.h1:hover {
    color: var(--primary-color);
}

.main-content {max-width: 100%;}
/* Override pages.css styles for regions page */
.main-content .page-header {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem;
	flex-wrap: wrap; /* allow wrap on small widths */
	box-shadow: none;
	text-align: center !important;
	/* Responsive vertical sizing: grows on taller screens, shrinks gracefully on short ones */
	min-height: auto;
	height: auto;
	/* Mid-range vertical padding */
	padding: 1rem 0 !important;
	box-sizing: border-box;
	transition: min-height 0.35s ease, padding 0.35s ease; /* smooth when orientation / viewport changes */
	margin-bottom: 2rem !important;
}
.page-header .search-bar {
	margin: 0;
}

.page-header .search-input {
	width: auto;
	flex: 0 1 28rem;
}

/* Single column per region for cards inside each section */
.logos {
	gap: 0; /* no gaps between items */
}

/* Optional: extra internal spacing for two-item sections if desired */
.two-items .logos {
	row-gap: 6.5rem;
}

select {
	font-size: 1rem;
	padding: 0.5rem 1.2rem 0.5rem 0.7rem;
	border-radius: 6px;
	border: 1.5px solid var(--border-color);
	background: var(--surface-color);
	color: var(--primary-color);
	outline: none;
	transition: border 0.2s;
}
select:focus {
	border: 1.5px solid var(--primary-color);
}

.logo-card {
	display: grid; /* two columns: logo + content */
	grid-template-columns: 100px 1fr;
	background: #7fae6e2d;
	border-radius: 12px;
	box-shadow: 0 1px 6px 0 var(--border-color);
	padding: 0.6rem 0.8rem;
	margin: 1rem;
	text-align: left;
	transition: box-shadow 0.2s, transform 0.2s;
	align-items: center;
	gap: 1rem;
	border: 1.5px solid var(--border-color);
	box-sizing: border-box;
}

h2 {
	font-size: clamp(1.1rem, 1.4vw, 1.625rem);
	font-weight: 750;
	margin: 0;
	padding: 1rem;
	border-bottom: 1.5px solid #4a556840;
}

.logo-frame {
	width: 90px;
	aspect-ratio: 1 / 1;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0; /* no auto margins in grid row */
	overflow: hidden;
}
.logo-card img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.logo-card .org-info {
	display: grid;
	/* Make name auto-width (content) and let second track flex; actions align to right inside it */
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.6rem;
}
.logo-card .org-name {
	font-size: clamp(1.0625rem, 1.2vw, 1.375rem);
	font-weight: 600;
	word-break: normal;
	white-space: nowrap; /* keep on one line */
	/* Ensure it doesn't accidentally stretch */
	width: auto;
}

.logo-card .org-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	justify-self: end; /* push actions to the right edge of the card */
	flex-wrap: wrap; /* wrap if tight */
}

.org-btn {
	padding: 0.38rem 1.1rem;
	background: var(--primary-color); /* default red */
	/* progress-fill setup: green gradient grows on hover */
	background-image: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
	background-size: 0% 100%;
	background-repeat: no-repeat;
	color: white;
	font-size: clamp(0.875rem, 0.9vw, 1.125rem);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 4px 0 var(--border-color);
	letter-spacing: 0.01em;
	transition: background-size 0.25s ease, color 0.18s, border 0.18s, box-shadow 0.18s;
	outline: none;
	display: inline-block;
	border-radius: 8px;
}
.org-btn:hover, .org-btn:focus {
	/* animate the green fill to 100% width */
	background-size: 100% 100%;
	color: #fff;
	box-shadow: 0 3px 12px 0 var(--border-color);
}
/* Optional: subtle press effect */
.org-btn:active { box-shadow: 0 2px 8px 0 var(--border-color); }

.search-bar {
	margin-bottom: 3rem;
}

.search-input {
	display: inline-flex;           /* removes inline text gaps between children */
	align-items: center;            /* vertically center icon and input */
	background: var(--surface-color);
	border: 1.5px solid var(--border-color);
	border-radius: 8px;
	width: clamp(180px, 42vw, 520px);
	/* Adaptive vertical padding: 6px -> 9px -> 14px */
	padding: clamp(6px, 0.9vh, 14px) 10px;
	position: relative;
	overflow: hidden;
	transition: width 0.35s ease, padding 0.35s ease, background-color 0.3s ease;
	justify-content: center; /* center the input inside */
}

/* Collapsed (icon only) state restored */
.search-input.is-collapsed {
	--collapsed-size: clamp(34px, 5.2vh, 48px);
	width: var(--collapsed-size);
	height: var(--collapsed-size); /* ensure perfect square */
	padding: 0; /* no inner padding so icon centers */
	cursor: pointer;
	justify-content: center;
	align-items: center;
}
.search-input.is-collapsed #orgSearch {
	opacity: 0;
	width: 0;
	padding: 0;
	border: none;
	pointer-events: none;
	color: transparent; /* hide text color entirely */
}
.search-input.is-collapsed .search-toggle {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Expanded state */
.search-input:not(.is-collapsed) {
	padding: clamp(6px, 0.9vh, 14px) 10px; /* restore side padding when expanded */
}
.search-input:not(.is-collapsed) #orgSearch {
	width: 100%;
	opacity: 1;
	padding: 0; /* no extra padding */
	text-align: left; /* caret at start when expanded */
	transition: opacity 0.25s ease 0.05s, width 0.3s ease;
}
.search-toggle { /* hidden after expansion */
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.search-input:not(.is-collapsed) .search-toggle {
	display: none;
}
.search-input .search-icon {
	width: 60%;
	height: 60%;
	transform: none;
	display: block;
	margin: 0;
	padding: 0;
}

/* Search input always visible: centered; padding defined in main block above */

.search-toggle { display: none; }


#orgSearch {
	width: 100%;
	max-width: none;
	font-size: clamp(0.9375rem, 1.1vw, 1.25rem);
	border: none; /* border on wrapper */
	background: transparent; /* background on wrapper */
	/* Neutralize away from theme red on blur */
	color: #444;
	outline: none;
	padding: 0;
	border-left: none; /* remove divider since icon removed */
	text-align: center; /* default (collapsed hidden state shows centered placeholder) */
	transition: color 0.2s ease, text-align 0.25s ease;
}
/* When wrapper expanded switch alignment (duplicate selector for specificity without !important) */
.search-input:not(.is-collapsed) #orgSearch {
	text-align: left; 
	padding: 0 1rem !important;
}
/* Make placeholder text use the same color (browsers fade it by default) */
/* Neutral placeholder tone */
#orgSearch::placeholder { color: #5d5d5d; opacity: 0.7; }
/* Optional vendor prefixes for broader support */
#orgSearch::-webkit-input-placeholder { color: #5d5d5d; opacity: 0.7; }
#orgSearch::-moz-placeholder { color: #5d5d5d; opacity: 0.7; }
#orgSearch:-ms-input-placeholder { color: #5d5d5d; opacity: 0.7; }
#orgSearch::-ms-input-placeholder { color: #5d5d5d; opacity: 0.7; }

/* Keep same neutral tone on focus (no red flash) */
#orgSearch:focus { color: #444; }
#orgSearch:focus::placeholder { color: #666; opacity: 1; }
#orgSearch:focus::-webkit-input-placeholder { color: #666; opacity: 1; }
#orgSearch:focus::-moz-placeholder { color: #666; opacity: 1; }
#orgSearch:focus:-ms-input-placeholder { color: #666; opacity: 1; }
#orgSearch:focus::-ms-input-placeholder { color: #666; opacity: 1; }

/* Collapsed: hide placeholder and remove transition side-effects */
.search-input.is-collapsed #orgSearch::placeholder,
.search-input.is-collapsed #orgSearch::-webkit-input-placeholder,
.search-input.is-collapsed #orgSearch::-moz-placeholder,
.search-input.is-collapsed #orgSearch:-ms-input-placeholder,
.search-input.is-collapsed #orgSearch::-ms-input-placeholder { opacity: 0; }
.search-input.is-collapsed #orgSearch { transition: none; }

/* Override pages.css styles for regions page */
.main-content .page-title {
	color: #7B2429 !important;
	font-size: 2.5rem !important;
	font-weight: 700 !important;
	margin: 0 !important;
	text-align: center !important;
	width: 100%;
	letter-spacing: -1px !important;
}

@media (min-height: 1061px) {
  .page-header { height: 5rem; }
  .h1 { font-size: 3rem; }
  #orgSearch { font-size: 1.7rem !important; }
}

@media (min-height: 1001px) and (max-height: 1060px) {
  .page-header { height: 4rem; }
  .h1 { font-size: 2.9rem; }
  #orgSearch { font-size: 1.6rem !important; }
}

@media (min-height: 901px) and (max-height: 1000px) {
  .page-header { height: 3.5rem; }
  .h1 { font-size: 2.5rem; }
  #orgSearch { font-size: 1.5rem !important; }
}

@media (min-height: 821px) and (max-height: 900px) {
  .page-header { height: 3rem; }
  .h1 { font-size: 2.3rem; }
  #orgSearch { font-size: 1.3rem !important; }
}

@media (min-height: 701px) and (max-height: 820px) {
  .page-header { height: 2rem; }
  .h1 { font-size: 2rem; }
	#orgSearch { font-size: 1rem !important; }
}

@media (min-height: 641px) and (max-height: 700px) {
  .page-header { height: 1.5rem; }
  .h1 { font-size: 1.9rem; }
  #orgSearch { font-size: 1rem !important; }
}

@media (min-height: 581px) and (max-height: 640px) {
  .page-header { height: 1.3rem; }
  .h1 { font-size: 1.6rem; }
  #orgSearch { font-size: 0.9rem !important; }
}

@media (max-height: 580px) {
  .page-header { height: 1.3rem; }
  .h1 { font-size: 1.6rem; }
  #orgSearch { font-size: 0.9rem !important; }
}

/* Two-column merged layout styles */
.merged-content {
    display: flex;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.left-column,
.right-column {
    flex: 1;
}

.left-column {
    max-width: 50%;
}

.right-column {
    max-width: 50%;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Right column header with title and search side by side */
.right-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.right-column-header .section-title {
    flex: 1 1 auto;
}

.right-column-header .search-bar {
    flex: 0 0 auto;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.right-column-header .search-input {
    margin: 0.75rem 10px !important;
    align-self: center;
    max-width: 300px;
    width: auto;
    min-width: 40px;
    font-size: 1.5rem;
    font-weight: 600;
    height: 40px !important;
    padding: 0 !important;
    box-sizing: border-box;
    line-height: 1.2;
}

.right-column-header .search-input.is-collapsed {
    width: 40px;
    height: 40px !important;
    margin: 0.75rem 10px;
    padding: 0;
}

.right-column-header .search-input:not(.is-collapsed) {
    height: 40px !important;
    margin: 0.75rem 10px;
    padding: 0 !important;
}

.right-column-header .search-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
}

/* Content cards for left column */
.content-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(107, 59, 41, 0.1);
    overflow: hidden;
    background: transparent;
}

.content-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    padding: 1.2rem 1.5rem;
    background: #7fae6e2d;
    border-bottom: 1px solid var(--border-color);
}

.content-card .card-content {
    padding: 1.5rem;
    background: #DDE5DB;
}

.content-card .card-content p {
    margin: 0;
    line-height: 1.6;

}

.content-card .card-content p:last-child {
    margin-bottom: 0;
}

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

.content-list li {
    padding-bottom: 1rem;
    padding-left: 1.2rem;
    position: relative;
}

.content-list li:before {
    content: "•";
    color: var(--secondary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
    .merged-content {
        flex-direction: column;
        gap: 2rem;
    }
    
    .left-column,
    .right-column {
        max-width: none;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .content-card {
        padding: 1.2rem;
    }
    
    .content-card .card-title {
        font-size: 1rem;
    }
    
    .right-column-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .right-column-header .section-title {
        min-width: auto;
    }
    
    .right-column-header .search-input {
        max-width: none;
        width: 100%;
    }
}

/* Medium tablet breakpoint */
@media (max-width: 900px) and (min-width: 769px) {
    .right-column-header .search-input {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .merged-content {
        padding: 0 0.5rem;
        gap: 1.5rem;
    }
    
    .content-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .section-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
}