/*
Theme Name:  Rotary Ireland
Template:    hello-elementor
Description: Child theme carrying the Rotary Ireland header and footer, replacing the Elementor Pro Theme Builder templates.
Version:     1.0.0
*/

:root {
	--ri-primary:   #17458F;
	--ri-secondary: #F7A81B;
	/* #F7A81B on white is ~1.99:1 — fails WCAG AA (4.5:1) by more than half.
	   Use this darker gold anywhere the accent is applied as TEXT color;
	   --ri-secondary itself stays as-is for backgrounds/tints, where the
	   contrast requirement is against whatever sits ON it, not against the
	   page background. ~4.95:1 on white. */
	--ri-secondary-text: #9C640A;
	--ri-text:      #000000;
	--ri-accent:    #0067C8;
	--ri-ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
}

.ri-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ri-header__logo { padding: 32px 0; }

.ri-header__logo img { width: 424px; height: auto; }

.ri-nav-toggle { display: none; }

.ri-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: "Open Sans", sans-serif;
}

.ri-menu > li { margin: 0 21px; position: relative; }

.ri-menu a {
	color: var(--ri-text);
	text-decoration: none;
	display: block;
	transition: color 150ms ease;
}

.ri-menu a:hover,
.ri-menu a:focus,
.ri-menu .current-menu-item > a {
	color: var(--ri-secondary-text);
}

/* Chevron affordance: signals a submenu exists before the visitor commits to
   hovering. Sits inside the trigger's own box (position:relative + absolute
   child) so it never changes the link's display type or tap-target size. */
.ri-menu > li.menu-item-has-children > a {
	position: relative;
	padding-right: 18px;
}

.ri-menu > li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 180ms var(--ri-ease-out), opacity 150ms ease;
	opacity: .55;
	pointer-events: none;
}

.ri-menu > li.menu-item-has-children:hover > a::after,
.ri-menu > li.menu-item-has-children:focus-within > a::after,
.ri-menu > li.menu-item-has-children.is-open > a::after,
.ri-menu > li.menu-item-has-children > a[aria-expanded="true"]::after {
	transform: rotate(225deg);
	opacity: 1;
}

.ri-menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 240px;
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	border-radius: 8px;
	z-index: 100;
	box-shadow: 0 10px 24px rgba(23,69,143,.14), 0 2px 6px rgba(23,69,143,.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 180ms var(--ri-ease-out), transform 180ms var(--ri-ease-out), visibility 0s 180ms;
}

.ri-menu li:focus-within > .sub-menu,
.ri-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 180ms var(--ri-ease-out), transform 180ms var(--ri-ease-out), visibility 0s 0s;
}

@media (hover: hover) and (pointer: fine) {
	.ri-menu li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 180ms var(--ri-ease-out), transform 180ms var(--ri-ease-out), visibility 0s 0s;
	}
}

.ri-menu .sub-menu a {
	padding: .5rem 1rem;
	transition: color 150ms ease, background-color 150ms ease;
}

.ri-menu .sub-menu a:hover,
.ri-menu .sub-menu a:focus {
	color: var(--ri-secondary-text);
	background: rgba(247,168,27,.08);
}

@media (prefers-reduced-motion: reduce) {
	.ri-menu .sub-menu,
	.ri-menu > li.menu-item-has-children > a::after {
		transition-duration: 0ms, 0ms, 0ms;
	}
}

@media (max-width: 1024px) {
	.ri-header__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		padding: 10px;
	}
	.ri-header__logo { padding: 12px 0; }
	.ri-header__logo img { width: 238px; }
	.ri-nav-toggle { display: block; }
	.ri-nav { display: none; width: 100%; }
	.ri-nav.is-open { display: block; }
	.ri-menu { flex-direction: column; align-items: stretch; }
	/* Elementor applies a 42px VERTICAL gap once the menu stacks; the base
	   horizontal 21px margins must be dropped or items sit flush. */
	.ri-menu > li { margin: 0; }
	.ri-menu > li:not(:last-child) { margin-bottom: 42px; }
	/* Collapsed by default: nav.js's tap handler only preventDefaults the
	   FIRST tap on a parent item (to reveal its children) and lets the
	   SECOND tap navigate normally. If the submenu were always visible here,
	   that first tap would reveal nothing and just eat the click. */
	.ri-menu .sub-menu {
		position: static;
		display: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.ri-menu li.is-open > .sub-menu,
	.ri-menu li:focus-within > .sub-menu {
		display: block;
	}
}

@media (max-width: 767px) {
	.ri-nav.is-open { margin-top: 30px; }
	/* The live CSS applies the 30px to the nested submenu as well as the
	   outer container; only doing the outer one leaves submenus flush. */
	.ri-menu .sub-menu { margin-top: 30px; }
}

/* Gravity Forms ships its own theme-framework blue (#204ce5) via these CSS
   custom properties. Override sitewide, not just on the homepage newsletter
   form, so any Gravity Forms embed anywhere on the site uses the brand blue
   instead of the plugin default. */
.gform_wrapper {
	--gf-color-primary: var(--ri-primary);
	--gf-color-primary-contrast: #FFFFFF;
	--gf-color-primary-darker: #123367;
}

/* ==========================================================================
   Blog / News index (child-theme template-parts/archive.php override)
   ========================================================================== */

.rblog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
	max-width: 1160px;
	margin: 0 auto;
}

.rblog-card {
	background: #F3F3F3;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23,69,143,.04);
}

.rblog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.rblog-card__link:focus-visible {
	outline: 2px solid var(--ri-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

.rblog-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #E1E5EB;
}

.rblog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 250ms var(--ri-ease-out);
}

.rblog-card__link:hover .rblog-card__img,
.rblog-card__link:focus-visible .rblog-card__img {
	transform: scale(1.03);
}

.rblog-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	flex: 1;
}

.rblog-card__date {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	color: #5B6472;
}

.rblog-card__title {
	font-family: "Open Sans", sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ri-text);
	transition: color 150ms ease;
}

.rblog-card__link:hover .rblog-card__title,
.rblog-card__link:focus-visible .rblog-card__title {
	color: var(--ri-secondary-text);
}

.rblog-card__excerpt {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #454C56;
	max-width: 62ch;
	flex: 1;
}

.rblog-card__more {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--ri-secondary-text);
	margin-top: 4px;
}

.rblog-pagination {
	display: flex;
	justify-content: space-between;
	max-width: 1160px;
	margin: 40px auto 0;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
}

.rblog-pagination a {
	color: var(--ri-primary);
	text-decoration: none;
	transition: color 150ms ease;
}

.rblog-pagination a:hover,
.rblog-pagination a:focus-visible {
	color: var(--ri-secondary-text);
}

@media (max-width: 600px) {
	.rblog-grid { grid-template-columns: 1fr; gap: 24px; }
}