/*
   Charlbury Website responsive CSS

   The desktop layout (980px and wider) is the fixed 960 grid and is unaffected by this file.
   Below that:
   - medium (700-979px): the grid becomes fluid; sidebars keep their width, main columns stretch
   - narrow (below 700px): a single column, with sidebars moved below the main content     */

.narrow_only { display: none; }

.action_button {
	display: block;
	color: white !important;
	background-color: #165829;
	padding: 8px 12px;
	font-weight: bold;
	font-size: 1.1em;
	text-align: center;
	border-radius: 4px;
	margin: 4px 0 12px 0;
}
.action_button:hover { background-color: #99D47F; text-decoration: none; }

/* =================================================================================================
   Medium and narrow
   ================================================================================================= */

@media screen and (max-width: 979px) {

	/* -------------------------------------------------------------------------------------------------
	   Page structure
	   ------------------------------------------------------------------------------------------------- */

	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	html body {
		min-width: 0;
		background-image: none;
		background-color: #ffffed;
	}
	html #background {
		width: auto;
		background-image: none;
		padding-bottom: 10px;
	}

	.container_12 {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.container_12 > [class*="grid_"] { min-width: 0; }
	.container_12 > .grid_1  { flex: 0 0 calc( 8.333% - 20px); }
	.container_12 > .grid_2  { flex: 0 0 calc(16.667% - 20px); }
	.container_12 > .grid_3  { flex: 0 0 180px; }
	.container_12 > .grid_4  { flex: 0 0 calc(33.333% - 20px); }
	.container_12 > .grid_5  { flex: 0 0 calc(41.667% - 20px); }
	.container_12 > .grid_6,
	.container_12 > .grid_7,
	.container_12 > .grid_8,
	.container_12 > .grid_9,
	.container_12 > .grid_10,
	.container_12 > .grid_11 { flex: 1 1 0; }
	.container_12 > .grid_12 { flex: 0 0 calc(100% - 20px); }
	.container_12 > .sidebar { flex: 0 0 140px; }
	.container_12 > .clear,
	.container_12 > #index_listing { flex: 0 0 100%; }

	/* Nested grids divide their parent column (the alpha/omega margins provide the gutters) */
	.container_12 .grid_4.alpha, .container_12 .grid_4.omega,
	.container_12 .grid_5.alpha, .container_12 .grid_5.omega { width: calc(50% - 10px); }
	.container_12 .gallerybutton { width: calc((100% - 40px) / 3); }
	#index_listing .grid_4 { width: calc(33.333% - 20px); }

	/* Fixed-width content */
	.container_12 img, .container_12 iframe, .container_12 video { max-width: 100%; }
	.container_12 img { height: auto; }
	.container_12 input[type=text], .container_12 input[type=email], .container_12 input[type=password],
	.container_12 textarea, .container_12 select { max-width: 100%; box-sizing: border-box; }
	#column1 img, #column2 img { max-width: 100%; }
	#map { width: auto; max-width: 100%; }
	.contributed table, table.gallery { display: block; overflow-x: auto; }

	/* -------------------------------------------------------------------------------------------------
	   Header
	   ------------------------------------------------------------------------------------------------- */

	#header {
		width: auto;
		height: auto;
		background-size: cover;
	}
	#navbar {
		flex: 0 0 100%;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		column-gap: 10px;
		margin: 0;
	}
	#navbar .nav_links { display: contents; }
	#navbar .grid_1 { width: auto; margin: 0; padding: 2px 0; white-space: nowrap; }
	#navbar .nav_blank { display: none; }
	#navbar #login, #navbar #search {
		order: 1;
		width: auto;
		margin: 4px 0 0 0;
		padding-top: 4px;
		border-top: 1px solid rgba(255,255,255,0.4);
	}
	#navbar #login {
		grid-column: 1 / span 2;
		text-align: left;
		white-space: nowrap;
	}
	#navbar #search {
		grid-column: 3 / -1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.4em;
	}
	#search .input {
		max-width: none;
		width: 12em;
		font-size: 13px;
		padding: 2px 4px;
	}

	#logo {
		flex: 0 0 auto;
		height: auto;
		width: auto;
		margin: 0;
		padding: 15px 20px 15px 10px;
	}
	#logo p { margin: 0; }
	#logo img { display: block; width: 130px; height: auto; }
	#header_info { flex: 1 1 0; }

	#credits { padding: 5px 0; }

	/* -------------------------------------------------------------------------------------------------
	   Front page: the welcome, then news, events and adverts side by side, then the activity buttons
	   ------------------------------------------------------------------------------------------------- */

	#front_page > #front_intro { display: contents; }
	#front_intro > div:first-child { flex: 0 0 calc(100% - 20px); margin: 0 10px 20px 10px; }
	#front_page > #front_news    { order: 1; flex: 0 0 calc(50% - 20px); }
	#front_page > #front_events  { order: 2; flex: 0 0 calc(25% - 20px); }
	#front_page > #front_adverts { order: 3; flex: 0 0 calc(25% - 20px); }
	#front_intro > .button {
		order: 4;
		flex: 0 0 calc(25% - 20px);
		width: auto;
		margin: 0 10px 14px 10px;
	}

	#trains, #trains a { text-shadow: 0 0 2px #000, 0 0 5px #000, 1px 1px 1px #000; }
}

/* =================================================================================================
   Narrow
   ================================================================================================= */

@media screen and (max-width: 699px) {

	body { font-size: 15px; }
	.narrow_only { display: block; }

	/* -------------------------------------------------------------------------------------------------
	   Single column, with sidebars after the main content
	   ------------------------------------------------------------------------------------------------- */

	.container_12 { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.container_12 > [class*="grid_"] {
		flex: 0 0 auto;
		width: auto;
		margin-left: 10px;
		margin-right: 10px;
	}
	.container_12 > .sidebar { order: 1; }
	.container_12 > .sidebar .box { margin-top: 10px; }

	.container_12 .grid_4.alpha, .container_12 .grid_4.omega,
	.container_12 .grid_5.alpha, .container_12 .grid_5.omega,
	.container_12 .gallerybutton {
		float: none;
		display: block;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	#index_listing .grid_4 { float: none; display: block; width: auto; }

	/* Info section buttons sit two to a row */
	.container_12:has(> .section_button) { flex-direction: row; flex-wrap: wrap; }
	.container_12:has(> .section_button) > .grid_12 { flex: 0 0 calc(100% - 20px); }
	.container_12:has(> .section_button) > .section_button { flex: 0 0 calc(50% - 20px); padding: 6px 0; }

	/* Activity buttons in sidebars sit two to a row */
	.container_12 > .sidebar:has(> .button) { display: flex; flex-wrap: wrap; gap: 0 10px; }
	.sidebar > .button { flex: 0 0 calc(50% - 5px); }

	/* Advert columns */
	#column1 { margin-right: 0; padding-right: 0; border-right: none; }
	#column2 { padding-left: 0; }

	/* -------------------------------------------------------------------------------------------------
	   Header
	   ------------------------------------------------------------------------------------------------- */

	#header { flex-direction: row; flex-wrap: wrap; align-items: center; background-position: right top; }
	#navbar {
		font-size: 15px;
		grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	}
	#navbar .grid_1 { padding: 3px 0; }
	#navbar #search .user_links { white-space: nowrap; }
	#navbar #search .input { flex: 0 1 7em; min-width: 3em; width: auto; font-size: 16px; }
	#logo { padding: 20px 10px 20px 15px; }
	#logo img { width: 135px; }
	#header_info { align-self: flex-start; margin: 0; padding: 0 10px 8px 0; }
	#trains { font-size: 13px; }

	/* -------------------------------------------------------------------------------------------------
	   Front page: the welcome, then each box in turn with news first, then the activity buttons
	   ------------------------------------------------------------------------------------------------- */

	#front_page { flex-direction: row; flex-wrap: wrap; }
	#front_page > #front_news { display: contents; }
	#front_page > #front_news > .box { order: 4; flex: 0 0 calc(100% - 20px); margin: 0 10px 15px 10px; }
	#front_page > #front_news > #news { order: 1; }
	#front_page > #front_events,
	#front_page > #front_adverts { flex: 0 0 calc(100% - 20px); }
	#front_intro > .button { order: 5; flex: 0 0 calc(50% - 15px); margin: 0 0 10px 10px; }

	/* -------------------------------------------------------------------------------------------------
	   Text and content
	   ------------------------------------------------------------------------------------------------- */

	h1 { font-size: 1.6em; margin-top: 0; }
	.box h2 { font-size: 1.45em; }
	.box h3 { font-size: 1.15em; }
	.box_content { font-size: 0.9em; }
	.content img, #news img { max-width: 40%; }
	.content table { font-size: 1em; }
	.content form input[type=text], .content form textarea { width: 100%; }

	/* Liftshare tables: labels above their fields */
	table#ride_table, table#ride_table tbody, table#ride_table tr, table#ride_table td { display: block; }
	table#ride_table td { padding: 2px 4px; }
	table#ride_table tr { padding: 4px 0; }

	/* Forum and mail index tables become a list */
	#forumcontents, #mailcontents,
	#forumcontents tbody, #mailcontents tbody { display: block; }
	#forumcontents tr, #mailcontents tr { display: block; padding: 6px 4px; }
	#forumcontents tr:first-child, #mailcontents tr:first-child { display: none; }
	#forumcontents td, #mailcontents td { display: inline; padding: 0; font-size: 0.85em; }
	#forumcontents td:first-child { display: none; }
	#forumcontents td:nth-child(2) { display: block; font-size: 1em; }
	#forumcontents td:nth-child(3)::after { content: " posts ·"; }
	#forumcontents td:nth-child(4)::after { content: " ·"; }

	/* Forum and mail posts: author details above each post */
	table.forum, table.mail,
	table.forum tbody, table.mail tbody,
	table.forum tr, table.mail tr { display: block; }
	table.forum td, table.mail td { display: block; box-sizing: border-box; width: auto; }
	.forumattrib, .mailattrib { width: auto; border-bottom: none; }
	table.forum tr { margin-bottom: 10px; }
}

/* =================================================================================================
   Very narrow
   ================================================================================================= */

@media screen and (max-width: 389px) {
	#navbar #search .input { display: none; }
}