/* For ios we need to use two font variants, otherwise bold fonts look spaced out */
@font-face {
	font-family: avenir-next-ios;
	src: url('/assets/avenir-next-medium-CLnZle4p.woff');
	font-weight: normal;
}
@font-face {
	font-family: avenir-next-ios;
	src: url('/assets/avenir-next-demi-gjqKVDmJ.woff');
	font-weight: bold;
}
html.ios {
	--ion-font-family: avenir-next-ios, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif;
}

/* For android we need to use only one font variant, otherwise bold fonts look spaced out */
@font-face {
	font-family: avenir-next-md;
	src: url('/assets/avenir-next-medium-CLnZle4p.woff');
}
html.md {
	--ion-font-family: avenir-next-md, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif;
}

/* Define a font named just "avenir-next" for edge cases where it's used in font-family css in the app */
@font-face {
	font-family: avenir-next;
	src: url('/assets/avenir-next-medium-CLnZle4p.woff');
}

.full-screen-overlay {
	--width: 94%;
	--height: 90%;
	--offset-y: 3%;
	--offset-x: 2%;
}

hr {
	background-color: var(--ion-color-light-shade);
}

/* highlight text light gray in both light & dark modes */
*::selection {
	background: #dcdcdc;
}

.alert-wrapper {
	padding: 3px; /* needed so chrome correctly emulates text wrapping in ios alerts */
	outline-style: none; /* prevent blue box around initial feedback alert */
}

ion-alert.left-aligned-alert .alert-message {
	text-align: left;
}

@media (min-width: 576px) {
	ion-alert.large-alert {
		--max-width: 500px;
	}
	ion-alert.large-alert .alert-message {
		max-height: 400px;
	}
}

/* reduce para spacing */
ion-alert .alert-message p {
	margin-top: 3px;
	margin-bottom: 6px;
}

/* on phone, position just above drawer when at minimum height */
.mapboxgl-ctrl-bottom-left {
	bottom: 115px!important;
}

/* on wider screens, drawer is at the side */
@media (min-width: 768px) {
	.mapboxgl-ctrl-bottom-left {
		position: absolute;
		bottom: 10px!important;
		left: 10px!important;
	}
}

/* position attribution to right of mapbox logo */
.mapboxgl-ctrl-bottom-left {
	display: flex;
	direction: rtl;
}

/* prevent ionic highlighting focused items */
ion-item.ion-focused::part(native)::after {
    opacity: 0!important;
}

/* standardize card margin across ios and android */
ion-card {
	margin: 16px;
}

/* style buttons closer to how they were in ionic v6 */
ion-button {
	letter-spacing: -0.03em;
	min-height: 2.5rem;
}
ion-button.button-small {
	min-height: 1.75rem;
}
ion-button.button-large {
	min-height: 2.75rem;
}

/* rounder corners, no uppercase for android */
.md ion-button {
	--border-radius: 14px;
	text-transform: none;
}

/* make 'destructive' role buttons in android red */
.md .alert-button-role-destructive.sc-ion-alert-md,
.md .alert-button-role-destructive.ion-activated.sc-ion-alert-md,
.md .alert-button-role-destructive.ion-focused.sc-ion-alert-md {
	color: var(--ion-color-danger, #eb445a);
}

/* fix vertical positioning of strikethrough */
s {
    display: inline-block;
    text-decoration: none;
    position: relative;
}
s:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 1px;
    left: 0;
    border-bottom: 1px solid;
}

/* center pickers on larger screens */
@media (min-width: 992px) {
	ion-picker-legacy .picker-wrapper {
		bottom: 50%!important;
		transform: translateY(50%)!important;
	}
}

/* hack floating labels to work like they used to in ionic v6 */
.label-floating {
	transition: font-size 0.2s, margin-top 0.2s, padding-top 0.2s!important;
	margin-bottom: -10px!important;
}
.label-floating + ion-input,
.label-floating + * ion-input {
	margin-bottom: -4px;
	opacity: 0;
}
.label-floating + .has-focus,
.label-floating + .has-value,
.label-floating + * .has-focus,
.label-floating + * .has-value {
	opacity: 1;
}
.ios.label-floating:has(+ .has-focus),
.ios.label-floating:has(+ .has-value),
.ios.label-floating:has(+ * > .has-focus),
.ios.label-floating:has(+ * > .has-value) {
	padding-top: 10px!important;
	font-size: 14px!important;
	margin-top: -20px!important;
}
.md.label-floating:has(+ .has-focus),
.md.label-floating:has(+ .has-value),
.md.label-floating:has(+ * > .has-focus),
.md.label-floating:has(+ * > .has-value) {
	font-size: 12px!important;
	margin-top: -22rem!important;
}

/* move stacked labels closer to inputs */
.ios.label-stacked {
	margin-bottom: -10px!important;
	padding-top: 8.25px;
}
.md.label-stacked {
	margin-bottom: -4px!important;
}

/* adjust date input vertical position to match text input */
.plt-capacitor ion-input.ios[type="date"] input {
	padding-top: 10px;
}

/* lighter header shadow on android */
ion-header.header-md {
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* RevenueCat web purchase dialog */

/* match ionic modal layout on larger screens */
@media (min-width: 768px) and (min-height: 600px) {
	#layout-query-container { max-height: 650px; margin: auto; }
	.rcb-ui-layout { max-width: 600px; max-height: 650px; border-radius: 10px; margin: auto; overflow: hidden!important; }
	.rcb-ui-navbar { width: 45%!important; }
	.rcb-ui-main .layout-wrapper { min-height: 100%!important; overflow-y: scroll!important; }
	.rcb-main-block { padding: 15px!important; }
	.rcb-navbar { padding-top: 10px!important; }
	.rcb-navbar .navbar-header { padding: 0 50px!important; }
	.rcb-navbar .navbar-body { padding: 0 50px!important; }
	.rc-checkout-pay-container { margin-top: 15px!important; }
	.rc-checkout-secure-container { margin-top: 15px!important; }
	.rc-checkout-secure-container .footer-caption-container { row-gap: 0!important; }
}

/* hide sandbox bar because it's confusing */
.rcb-ui-sandbox-banner {
	display: none!important;
}
/* Go to https://ionicframework.com/docs/theming/themes for generating stepped shades */

:root {
	--ion-background-color: #ffffff;
	--ion-background-color-rgb: 255,255,255;

	--ion-text-color: #000043;
	--ion-text-color-rgb: 0,0,67;

	--ion-color-step-50: #f2f2f6;
	--ion-color-step-100: #e6e6ec;
	--ion-color-step-150: #d9d9e3;
	--ion-color-step-200: #ccccd9;
	--ion-color-step-250: #bfbfd0;
	--ion-color-step-300: #b3b3c7;
	--ion-color-step-350: #a6a6bd;
	--ion-color-step-400: #9999b4;
	--ion-color-step-450: #8c8caa;
	--ion-color-step-500: #8080a1;
	--ion-color-step-550: #737398;
	--ion-color-step-600: #66668e;
	--ion-color-step-650: #595985;
	--ion-color-step-700: #4d4d7b;
	--ion-color-step-750: #404072;
	--ion-color-step-800: #333369;
	--ion-color-step-850: #26265f;
	--ion-color-step-900: #191956;
	--ion-color-step-950: #0d0d4c;
}

/* Go to https://ionicframework.com/docs/theming/color-generator for generating color shades */

:root {

	/* standard ionic colors */

	--ion-color-primary: #5768D1;
	--ion-color-primary-rgb: 87,104,209;
	--ion-color-primary-contrast: #ffffff;
	--ion-color-primary-contrast-rgb: 255,255,255;
	--ion-color-primary-shade: #4d5cb8;
	--ion-color-primary-tint: #6877d6;

	--ion-color-secondary: #1A1A56;
	--ion-color-secondary-rgb: 26,26,86;
	--ion-color-secondary-contrast: #ffffff;
	--ion-color-secondary-contrast-rgb: 255,255,255;
	--ion-color-secondary-shade: #17174c;
	--ion-color-secondary-tint: #313167;

	--ion-color-tertiary: #1A8DFF;
	--ion-color-tertiary-rgb: 26,141,255;
	--ion-color-tertiary-contrast: #ffffff;
	--ion-color-tertiary-contrast-rgb: 255,255,255;
	--ion-color-tertiary-shade: #177ce0;
	--ion-color-tertiary-tint: #3198ff;

	--ion-color-success: #23ae09;
	--ion-color-success-rgb: 35,174,9;
	--ion-color-success-contrast: #ffffff;
	--ion-color-success-contrast-rgb: 255,255,255;
	--ion-color-success-shade: #1f9908;
	--ion-color-success-tint: #39b622;

	--ion-color-warning: #fd9104;
	--ion-color-warning-rgb: 253,145,4;
	--ion-color-warning-contrast: #000000;
	--ion-color-warning-contrast-rgb: 0,0,0;
	--ion-color-warning-shade: #df8004;
	--ion-color-warning-tint: #fd9c1d;

	--ion-color-danger: #db163d;
	--ion-color-danger-rgb: 219,22,61;
	--ion-color-danger-contrast: #ffffff;
	--ion-color-danger-contrast-rgb: 255,255,255;
	--ion-color-danger-shade: #c11336;
	--ion-color-danger-tint: #df2d50;

	--ion-color-dark: #000043;
	--ion-color-dark-rgb: 0,0,67;
	--ion-color-dark-contrast: #ffffff;
	--ion-color-dark-contrast-rgb: 255,255,255;
	--ion-color-dark-shade: #00003b;
	--ion-color-dark-tint: #1a1a56;

	--ion-color-medium: #7A7C93;
	--ion-color-medium-rgb: 122,124,147;
	--ion-color-medium-contrast: #ffffff;
	--ion-color-medium-contrast-rgb: 255,255,255;
	--ion-color-medium-shade: #6b6d81;
	--ion-color-medium-tint: #87899e;

	--ion-color-light: #F4F5FA;
	--ion-color-light-rgb: 244,245,250;
	--ion-color-light-contrast: #000000;
	--ion-color-light-contrast-rgb: 0,0,0;
	--ion-color-light-shade: #d7d8dc;
	--ion-color-light-tint: #f5f6fb;

	/* custom autopylot colors */

	--ion-color-advisory-laanc: #fd9104;
	--ion-color-advisory-laanc-rgb: 253,145,4;
	--ion-color-advisory-laanc-contrast: #000000;
	--ion-color-advisory-laanc-contrast-rgb: 0,0,0;
	--ion-color-advisory-laanc-shade: #df8004;
	--ion-color-advisory-laanc-tint: #fd9c1d;

	--ion-color-advisory-warning: #ECC025;
	--ion-color-advisory-warning-rgb: 236,192,37;
	--ion-color-advisory-warning-contrast: #000000;
	--ion-color-advisory-warning-contrast-rgb: 0,0,0;
	--ion-color-advisory-warning-shade: #d0a921;
	--ion-color-advisory-warning-tint: #eec63b;

	--ion-color-insurance: #65B144;
	--ion-color-insurance-rgb: 101,177,68;
	--ion-color-insurance-contrast: #ffffff;
	--ion-color-insurance-contrast-rgb: 255,255,255;
	--ion-color-insurance-shade: #599c3c;
	--ion-color-insurance-tint: #74b957;
}

.ion-color-advisory-warning {
	--ion-color-base: var(--ion-color-advisory-warning) !important;
	--ion-color-base-rgb: var(--ion-color-advisory-warning-rgb) !important;
	--ion-color-contrast: var(--ion-color-advisory-warning-contrast) !important;
	--ion-color-contrast-rgb: var(--ion-color-advisory-warning-contrast-rgb) !important;
	--ion-color-shade: var(--ion-color-advisory-warning-shade) !important;
	--ion-color-tint: var(--ion-color-advisory-warning-tint) !important;
}

.ion-color-advisory-laanc {
	--ion-color-base: var(--ion-color-advisory-laanc) !important;
	--ion-color-base-rgb: var(--ion-color-advisory-laanc-rgb) !important;
	--ion-color-contrast: var(--ion-color-advisory-laanc-contrast) !important;
	--ion-color-contrast-rgb: var(--ion-color-advisory-laanc-contrast-rgb) !important;
	--ion-color-shade: var(--ion-color-advisory-laanc-shade) !important;
	--ion-color-tint: var(--ion-color-advisory-laanc-tint) !important;
}

.ion-color-insurance {
	--ion-color-base: var(--ion-color-insurance) !important;
	--ion-color-base-rgb: var(--ion-color-insurance-rgb) !important;
	--ion-color-contrast: var(--ion-color-insurance-contrast) !important;
	--ion-color-contrast-rgb: var(--ion-color-insurance-contrast-rgb) !important;
	--ion-color-shade: var(--ion-color-insurance-shade) !important;
	--ion-color-tint: var(--ion-color-insurance-tint) !important;
}
/* menu */

#windy #mobile-ovr-select {
    display: none !important;
}

/* zoom */

#windy #embed-zoom {
    display: none !important;
}

/* accumulations */

#windy #accumulations {
	display: none;
}

/* custom controls */

#windy-full #windy-custom-controls {
	position: fixed;
	bottom: 100px;
	right: 10px;
}

#windy-preview #windy-custom-controls {
	display: none;
}

/* bottom controls */

#windy-full #windy #bottom {
	position: fixed;
}

#windy-full #windy #progress-bar {
	bottom: 20px;
}

#windy-full #windy #progress-bar #playpause {
	color: #5768D1!important;
	background-color: rgba(255,255,255,.8);
}

#windy-full #windy .timecode .box {
	background-color: rgba(255,255, 255,.8) !important;
	color: #000043 !important;
}

#windy-full #windy #legend-mobile {
	height: 30px;
}

#windy-preview #windy #bottom {
	visibility: hidden;
}

/* logo */

#windy-full #windy #logo-wrapper {
	position: fixed;
}


/* TODO: get this to follow pattern as ToggleLayers
	Ran out of time, notes for future self
	 - windy's logo is in src, but toggle's base layer images are in public
	 - Jeremy couldn't recall why Windy's is in src, and doesn't entirely know how it works
	 - we agreed that the pattern to follow is to use public, b/c that is the pattern we're using for many others (eg windy icons)
*/

#windy-preview #windy #logo-wrapper {
    top: initial;
    bottom: 40px;
}

#windy-preview #windy #logo-wrapper #logo {
    left: 0.5em;
	margin-left: 0;
	width: 60px;
}

#windy-full #windy #logo-wrapper {
    top: initial;
    bottom: 140px;
}

#windy-full #windy #logo-wrapper #logo {
    left: 0.6em;
	margin-left: 0;
	width: 110px;
}
.notes-for-pdf {
    line-height: 12px;
    font-size: 12px;
}

.notes-for-pdf p {
    padding: 0;
    margin: 0;
}ion-toast::part(button) {
    /*
        note is likely a better color variable to use that would work on both IOS and Andrdoid
         creates more visual affordance that the button is different than the text, but Zannah
         doesn't want to spend time on that, so accepting this regression in iOS and improvement
         in Android, as an overall net positive
      */
    --button-color: var(--color) !important;
}
@media (min-width: 768px) {
    .affiliate-link-modal img {
        /* runway to vary the style here... but Tauty asked to drop it */
    }
}