/* main.css */

:root {
	--font-main: "Lucida Grande","Lucida Sans","Lucida Sans Unicode",sans-serif;
	--color-bg: #eee;
	--color-text: #333;
	--color-accent: #0077cc;
	--color-footer-bg: #333333;
	--color-footer-text: #eeeeee;
	--color-header-border: #aaa;
	--max-width: 900px;
}

html {
	box-sizing: border-box;
	font-size: 13px;
	background-color: #333;
	height: 100%;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	
	margin: 0;
	font-family: var(--font-main);
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.4;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

main {
    flex-grow: 1; /* Allows main content to expand and fill available space */
	padding: 0.75rem 0rem;
	/* margin: 0 auto; */
}

header,
footer {
	background: var(--color-footer-bg);
	
}
header {
	padding: 2.75rem 1.5rem 0.75rem 1.5rem;
	font-size: 1.85rem;
}
header a {
	text-decoration: none;
	color: var(--color-footer-text);
	
}
footer {
	color: var(--color-footer-text);
	padding: 1.5rem 0rem;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1;
}
nav {
	justify-content: center;
	display: flex;
}

nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

nav a {
	text-decoration: none;
	color: var(--color-footer-text);
	font-weight: 500;
}


h1 {
	font-size: 1.75em;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--color-header-border);
	margin-bottom: 1.25rem;
	
}



h3 {
	margin-top: 0rem;
	margin-bottom: 1rem;
	font-size: 1.35rem;
}

p {
	margin: 0.5rem 0 0.35rem 0;
}

/* p after h3 */
h3 + p {
	margin-top: 0;
	
}

p + h3 {
	margin-top: 2.5rem;
}

li {
	margin-bottom: 0.5rem;
}

/* Page Section Styles */

.page-section {
	width: 100%;
	margin: 0;
	padding: 0;
}

.page-section--centered {
	display: flex;
	justify-content: center;
}

.page-section--left {
	display: flex;
	justify-content: left;
}


.page-section--border {
	border-bottom: 1px solid #888888;
}

.page-section-background--nav {
	background-color: var(--color-footer-bg);
	color: var(--color-footer-text)
}

.page-section-background--odd {
	background-color: #bbbbbb;
}

.page-section-background--even {
	background-color: #cccccc;
}

.page-section__container {
	max-width: var(--max-width);
	width: 100%;
	
}

@media (max-width: 900px) {
	.page-section__container {
		padding-left: 2rem;
		padding-right: 2rem;
		
	}
}

.page-section__container--padded {
	padding-top: 1.5rem ;
	padding-bottom: 1.5rem ;
}

.page-section-title {
	margin:0;
	padding: 2rem 0 0.75rem 0; 
	font-weight: normal;
	
	
}

/* Side by side */

.side-by-side {
	width: 100%;
	margin: 3rem auto 3rem auto;
	/* padding: 0 1em; */
}
.side-by-side--border {
	border-bottom: 1px solid #ccc;
}
.side-by-side__container {
	max-width: var(--max-width);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem;
	margin: 0 auto; /* Center the container */
}
.side-by-side__image {
	flex: 0 0 auto;
	max-width: 220px;
	width: 100%;
	margin: 0;
	display: flex;
	align-items: flex-start;
}

.side-by-side__image--large {
	max-width: 300px;
}
.side-by-side__image img {
	width: 100%;
	height: auto;
}

.side-by-side__content {
	flex: 1 1 0;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.side-by-side__reverse {
	flex-direction: row-reverse;
}
@media (max-width: 700px) {
	.side-by-side__container,
	.side-by-side__reverse {
		flex-direction: column !important;
		gap: 1rem;
	}
	.side-by-side__image {
		max-width: 100%;
		/* width: 100%; */
		margin-bottom: 1rem;
		justify-content: center;
		
	}
}


/* App store badge */
.app-store-badge{
	margin: 2rem 0;
}
.app-store-badge img {
	display: inline-block;
	vertical-align: middle;
}


/*	Newspaper style columns, with class name .newspaper-columns
	Three columns to start, shrinking to two if screen width < 900px, then one column if < 700px
	Text flows down in the first column, continuing to next, etc.
	Height of the component is automatic, so that all columns are the same height and fully filled in
	There is a border between columns like in a newspaper between columns, but not before first and not after last
	No padding or margins on the entire class (it will be used in a container with fixed width)

*/
.newspaper-columns {
  column-count: 3; /* Start with 3 columns */
  column-gap: 2em; /* Adjust this value for the desired gap */
  column-rule: 1px solid var(--color-header-border); /* Add a border between columns */
  text-align: justify; /* Optional: justify text for a cleaner look */
  /* Remove any default padding or margin that might be applied by browsers */
  padding: 0;
  margin: 0 0 3rem 0;
}


/* Media query for screens less than 900px */
@media screen and (max-width: 900px) {
  .newspaper-columns {
    column-count: 2; /* Change to 2 columns */
  }
}

/* Media query for screens less than 700px */
@media screen and (max-width: 700px) {
  .newspaper-columns {
    column-count: 1; /* Change to 1 column */
  }
}

.newspaper-columns h4 {
	font-weight: bold;
	font-size: 1.125rem;
	margin: 0 0 0.75em 0;
}

.newspaper-columns p + h4 {
	margin-top: 1.5em;
}

.newspaper-columns__header {
	border-bottom: 1px solid var(--color-header-border);
	padding-bottom: 0.25em;
	margin-bottom: 1em;
}




/* App overview table layout (matches WordPress style) */

.width-size {
	max-width: 900px;
	margin: 0 auto;
}
.app-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}
.app-overview-image,
.app-features-image {
	flex: 0 0 300px;
	max-width: 300px;
	margin: 0 auto;
}
.app-overview-image img,
.app-features-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.app-overview-info,
.app-features-info {
	flex: 1 1 300px;
	min-width: 220px;
}
.app-tagline {
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: 0.5em;
}
.featured-app-links {
	margin-top: 1em;
}

.app-section-header {
	margin: 2.5em 0 1em 0;
}
.app-features-section {
	margin-bottom: 2em;
}
.app-features-content {
	align-items: flex-start;
}
@media (max-width: 900px) {
	.app-flex {
		gap: 1rem;
	}
}
@media (max-width: 700px) {
	.app-flex {
		flex-direction: column;
		gap: 1.5rem;
	}
	.app-overview-image,
	.app-features-image {
		max-width: 55%;
		width: 55%;
	}

	img {
		max-width: 80%		
	}
}

/* Entry content blocks for info pages */
.entry-title {
	font-size: 2em;
	margin-bottom: 0.5em;
}
.entry-content {
	font-size: 1.1em;
	margin-bottom: 2em;
}
.entry-content ol {
	margin-left: 1.5em;
}
.entry-content strong {
	color: var(--color-accent);
}
.appstore-page ul {
	margin-left: 1.5em;
}
.appstore-page h1 {
	font-size: 2em;
	margin-bottom: 0.5em;
}