/*
* foosol — links.foosol.com
* Brand layer on top of LittleLink. Loaded after style.css and brands.css
* so everything here overrides the upstream defaults.
*
* Brand colors sampled from the foosol logo:
*   blue  #2A7FFF
*   slate #444444
*/

:root {
	--foosol-blue:#2A7FFF;
	--foosol-blue-dark:#0B5FE0;
	--foosol-blue-light:#6BA6FF;
	--foosol-slate:#444444;
}

/* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
a:not(.button) {
	color:var(--foosol-blue);
}
a:not(.button):hover {
	color:var(--foosol-blue-dark);
}
:root.theme-dark a:not(.button) {
	color:var(--foosol-blue-light);
}
:root.theme-dark a:not(.button):hover {
	color:#9CC3FF;
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto a:not(.button) {
		color:var(--foosol-blue-light);
	}
	:root.theme-auto a:not(.button):hover {
		color:#9CC3FF;
	}
}

/* Avatar
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* The foosol mark is dark on transparent, so it sits on a white tile to stay
   legible in both light and dark themes. */
.avatar--tile {
	border-radius:1.5rem;                   /* 24px */
	background-color:#ffffff;
	object-fit:contain;
	padding:0.875rem;                       /* 14px */
	box-sizing:border-box;
	box-shadow:0 1px 3px rgba(0,0,0,0.12);
}

/* Coil Breach card
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.app-card {
	margin:0 0 var(--spacing-xl) 0;
	text-align:center;
}
.app-icon {
	width:5.5rem;                           /* 88px */
	height:5.5rem;
	border-radius:1.25rem;                  /* 20px */
	display:block;
	margin:0 auto var(--spacing-s) auto;
	box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.app-card h2 {
	font-size:var(--scale-2);               /* 25px */
	font-weight:700;
	line-height:1.2;
	margin:0 0 var(--spacing-m) 0;
}

/* Buttons
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Upstream leaves `.button-stack` unstyled and relies on inline-flex + centered
   text. Making it an explicit column keeps the two store buttons stacked and
   equal width at every viewport. */
.button-stack {
	display:flex;
	flex-direction:column;
	align-items:center;
}
.button-stack .button:last-child {
	margin-bottom:0;
}
/* Buttons are a fixed 300px upstream, which overflows narrow phones */
.button,button {
	max-width:100%;
}
/* A little wider and a notch smaller than the default so the official store
   wording ("Download on the App Store") stays on one line. `.button-wide` is
   the same geometry for non-store buttons, so everything shares one grid. */
.button-store,
.button-wide {
	width:20rem;                            /* 320px */
	font-size:1.0625rem;                    /* 17px */
	min-height:3.5rem;                      /* keeps buttons equal height if a
	                                           label wraps on a small phone */
}

/* Footer
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
	margin:var(--spacing-xl) 0 var(--spacing-l) 0;
}
.social {
	list-style:none;
	margin:0 0 var(--spacing-m) 0;
	padding:0;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:var(--spacing-m);
}
.social li {
	margin:0;
}
.social a {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:2.75rem;                          /* 44px — comfortable tap target */
	height:2.75rem;
	border-radius:50%;
	color:var(--foosol-slate);
	text-decoration:none;
	transition:color 0.15s ease,background-color 0.15s ease;
}
.social a:hover,
.social a:focus-visible {
	color:var(--foosol-blue);
	background-color:rgba(42,127,255,0.10);
}
.social-icon {
	width:1.375rem;                         /* 22px */
	height:1.375rem;
	display:block;
}
:root.theme-dark .social a {
	color:#B8B8B8;
}
:root.theme-dark .social a:hover,
:root.theme-dark .social a:focus-visible {
	color:var(--foosol-blue-light);
	background-color:rgba(107,166,255,0.14);
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto .social a {
		color:#B8B8B8;
	}
	:root.theme-auto .social a:hover,
	:root.theme-auto .social a:focus-visible {
		color:var(--foosol-blue-light);
		background-color:rgba(107,166,255,0.14);
	}
}

/* Overrides `.container p`, which sets a 48px bottom margin and 20px type */
.container .footer-links,
.container .copyright {
	font-size:var(--scale-0);               /* 16px */
	margin:0;
	line-height:1.6;
}
.container .footer-links {
	margin-bottom:var(--spacing-xs);
}
.container .copyright {
	color:#6B6B6B;
}
:root.theme-dark .container .copyright {
	color:#9A9A9A;
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto .container .copyright {
		color:#9A9A9A;
	}
}

/* In-app browser banner
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Unhidden by js/inapp.js only inside an embedded webview. `display:flex` beats
   the UA's `[hidden]{display:none}`, so the hidden state needs restating. */
.inapp-banner[hidden] {
	display:none;
}
.inapp-banner {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:var(--spacing-xs) var(--spacing-s);
	margin:0;
	padding:var(--spacing-s);
	background-color:#FFF4D6;
	border-bottom:1px solid #E8D9A8;
	color:#4A3A10;
	text-align:center;
}
.inapp-banner__text {
	font-size:0.9375rem;                    /* 15px */
	line-height:1.5;
	margin:0;
	max-width:34rem;
}
.inapp-banner__hint {
	display:block;
	font-weight:700;
}
/* Not a LittleLink `.button` — that's 300px wide and would dominate the bar */
.inapp-banner__copy {
	flex:0 0 auto;
	width:auto;
	min-height:0;
	margin:0;
	padding:var(--spacing-xs) var(--spacing-s);
	font-size:0.875rem;                     /* 14px */
	font-weight:700;
	line-height:1.2;
	color:#ffffff;
	background-color:var(--foosol-blue);
	border:none;
	border-radius:0.375rem;
	cursor:pointer;
}
.inapp-banner__copy:hover,
.inapp-banner__copy:focus-visible {
	background-color:var(--foosol-blue-dark);
}
:root.theme-dark .inapp-banner {
	background-color:#3A3117;
	border-bottom-color:#554824;
	color:#F2E4BE;
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto .inapp-banner {
		background-color:#3A3117;
		border-bottom-color:#554824;
		color:#F2E4BE;
	}
}

/* Responsive adjustments
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:34.375rem) {              /* 550px */
	.app-card h2 {
		font-size:var(--scale-1);           /* 20px */
	}
	.container .footer-links,
	.container .copyright {
		font-size:0.875rem;                 /* 14px */
	}
	.inapp-banner__text {
		font-size:0.875rem;                 /* 14px */
	}
}