/*
Theme Name:     2ο ΓΕΛ Ναυπλίου
Theme URI:
Description:    Kadence child theme.
Author:         2ο ΓΕΛ Ναυπλίου
Author URI:
Template:       kadence
Version:        0.1.0
*/

/* ============================================================
   2ο ΓΕΛ Ναυπλίου — finishing styles for the home page.
   Scoped to .home / section classes so nothing else is affected.
   Palette from the approved mockup.
   ============================================================ */
:root {
	--gel-navy: #00306a;
	--gel-navy-2: #184587;
	--gel-orange: #fe932c;
	--gel-orange-ink: #663500;
	--gel-ico-blue: #d7e2ff;
	--gel-ico-orange: #ffdcc3;
	--gel-bg: #f9f9ff;
	--gel-ink: #1a1b20;
	--gel-muted: #434750;
	--gel-line: #c3c6d2;
}

/* Unified page surface: the content sits on Kadence's white .site background,
   which peeked through the small gaps between the full-width sections. Paint it
   the mockup colour so the whole page reads as one continuous surface.
   !important overrides Kadence's more specific `body.content-style-unboxed .site`. */
body .site,
.content-bg { background-color: #f9f9ff !important; }

/* Generic hover lift for cards */
.gel-lift {
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.gel-lift:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 30px rgba(26, 71, 137, .12);
}

/* ---- Section titles ---- */
.gel-sec-title { color: var(--gel-navy); }
.gel-underline {
	height: 4px; width: 80px;
	background: var(--gel-orange);
	border-radius: 9999px;
}

/* ---- Quick-access cards ---- */
.gel-qa-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(6, 1fr); /* default / 6 cards */
}
.gel-qa-grid.gel-qa-n5 { grid-template-columns: repeat(5, 1fr); }
/* 4 cards: keep the same card size as the 5-card layout, centered (not stretched) */
.gel-qa-grid.gel-qa-n4 {
	grid-template-columns: repeat(4, 1fr);
	max-width: 956px;
	margin-left: auto;
	margin-right: auto;
}
.gel-qa-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid var(--gel-line);
	border-radius: 14px;
	padding: 24px 14px; /* proportions matched to the mockup button */
	text-decoration: none;
}
.gel-qa-ico {
	width: 48px; height: 48px;
	margin: 0 0 16px;
	border-radius: 9999px;
	display: flex; align-items: center; justify-content: center;
	background: var(--gel-ico-blue);
	color: var(--gel-navy);
}
.gel-qa-ico.gel-ico-orange {
	background: var(--gel-ico-orange);
	color: #904d00;
}
.gel-qa-ico .material-symbols-outlined { font-size: 28px; line-height: 1; }
.gel-qa-label {
	font-weight: 700;
	font-size: 16px;
	color: var(--gel-navy);
}
@media (max-width: 1024px) {
	.gel-qa-grid, .gel-qa-grid.gel-qa-n4, .gel-qa-grid.gel-qa-n5 { grid-template-columns: repeat(3, 1fr); max-width: none; }
}
@media (max-width: 600px) {
	.gel-qa-grid, .gel-qa-grid.gel-qa-n4, .gel-qa-grid.gel-qa-n5 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

/* ---- Latest news (core Query Loop) ---- */
.gel-news .wp-block-post {
	background: #fff;
	border: 1px solid var(--gel-line);
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	display: flex; flex-direction: column;
	transition: box-shadow .3s ease;
}
.gel-news .wp-block-post:hover { box-shadow: 0 8px 24px rgba(26, 71, 137, .12); }
.gel-news .wp-block-post-featured-image { margin: 0; }
.gel-news .wp-block-post-featured-image img {
	width: 100%; height: 190px; object-fit: cover; display: block;
}
.gel-news .wp-block-post-date {
	padding: 18px 22px 0;
	color: var(--gel-orange-ink);
	font-weight: 700; font-size: 14px;
}
.gel-news .wp-block-post-title { padding: 6px 22px 0; margin: 0; font-size: 21px; line-height: 1.3; }
.gel-news .wp-block-post-title a { color: var(--gel-navy); text-decoration: none; }
.gel-news .wp-block-post-title a:hover { text-decoration: underline; }
.gel-news .wp-block-post-excerpt {
	padding: 10px 22px 22px; /* guaranteed air below the read-more */
	color: var(--gel-muted);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.gel-news .wp-block-post-excerpt__excerpt { display: block; margin: 0; }
.gel-news .wp-block-post-excerpt__more-text {
	margin: 0;
	margin-top: auto;  /* push read-more to the bottom when the card has spare space */
	padding-top: 18px; /* constant air above the link, even on full cards (auto can't eat padding) */
}
.gel-news .wp-block-post-excerpt .wp-block-post-excerpt__more-link {
	color: var(--gel-navy); font-weight: 600; text-decoration: none;
}
.gel-news .wp-block-post-excerpt .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* ---- Self-contained block layouts ----
   Some hosts/optimizers strip WordPress's per-container block-support CSS
   (all `.wp-container-core-*` rules). These replicate the bits the front page
   relies on, so the layout survives regardless of that generated CSS. */
.gel-news .wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 28px;
}
.gel-hero .wp-block-buttons, .gel-paper .wp-block-buttons { gap: 16px; }
.gel-prog-cols.wp-block-columns { gap: 28px; }

/* ---- Programs cards ---- */
.gel-prog-cols .wp-block-column { display: flex; } /* stretch card to equal column height */
.gel-prog-card {
	background: #fff;
	border: 1px solid var(--gel-line);
	border-radius: 18px;
	overflow: hidden;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* the group renders an inner wrapper — carry the flex column down to it so
   margin-top:auto on the link actually has room to push against */
.gel-prog-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}
/* image as a full-width banner header, same size/form as the news featured images */
.gel-prog-img {
	margin: 0;
	height: 190px;
	display: flex; align-items: center; justify-content: center;
}
.gel-prog-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
	display: block;
}
/* letterbox colour = each logo's own background, so the banner reads full-bleed */
.gel-prog-cols .wp-block-column:nth-child(1) .gel-prog-img { background: #2265b3; }
.gel-prog-cols .wp-block-column:nth-child(2) .gel-prog-img { background: #0b3c5d; }
.gel-prog-cols .wp-block-column:nth-child(3) .gel-prog-img { background: #00727a; }
.gel-prog-card h3 { color: var(--gel-navy); margin: 0; padding: 24px 28px 0; }
.gel-prog-card p { color: var(--gel-muted); margin: 12px 0 0; padding: 0 28px; }
.gel-prog-card .gel-more {
	margin: 0; margin-top: auto;   /* push "Περισσότερα →" to the bottom, aligned across cards */
	padding: 18px 28px 26px;
}
.gel-prog-card .gel-more a { color: var(--gel-navy); font-weight: 700; text-decoration: none; }
.gel-prog-card .gel-more a:hover { text-decoration: underline; }

/* ---- Hero ---- */
.gel-hero {
	background-image: linear-gradient(rgba(0, 48, 106, .72), rgba(0, 48, 106, .5)), url("hero_image.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.gel-hero-copy { max-width: 672px; } /* max-w-2xl, like the mockup — natural line breaks match */
.gel-hero-copy h1 {
	color: #fff;
	font-size: 40px;      /* mockup h1 */
	font-weight: 700;     /* mockup h1 */
	line-height: 1.2;     /* mockup h1 */
	letter-spacing: -.02em;
}
@media (max-width: 600px) {
	.gel-hero-copy h1 { font-size: 32px; } /* mockup h1-mobile */
}
.gel-hero-copy p { color: rgba(255, 255, 255, .92); }

/* Orange CTA buttons (hero + «Blog») — colour driven by the accent var so the
   admin colour picker updates them too. */
.gel-btn .wp-block-button__link { background-color: var(--gel-orange); color: var(--gel-orange-ink); }
.gel-btn .wp-block-button__link:hover { color: var(--gel-orange-ink); }

/* Primary CTAs «Το Σχολείο μας» (hero) + «Διάβασε online» (newspaper): orange
   background, navy on hover, white text in both states. !important because
   Kadence drives every button's background from --global-palette-btn-bg
   (palette1 = navy) via global.min.css, which otherwise tints them blue. */
.gel-hero .gel-btn .wp-block-button__link,
.gel-hero .gel-btn .wp-block-button__link:visited,
.gel-paper .gel-btn .wp-block-button__link,
.gel-paper .gel-btn .wp-block-button__link:visited {
	background-color: var(--gel-orange) !important;
	color: #fff !important;
}
.gel-hero .gel-btn .wp-block-button__link:hover,
.gel-hero .gel-btn .wp-block-button__link:focus,
.gel-hero .gel-btn .wp-block-button__link:active,
.gel-paper .gel-btn .wp-block-button__link:hover,
.gel-paper .gel-btn .wp-block-button__link:focus,
.gel-paper .gel-btn .wp-block-button__link:active {
	background-color: var(--gel-navy) !important;
	color: #fff !important;
}

/* Secondary CTAs «Ανακοινώσεις» (hero) + «Κατέβασε PDF» (newspaper), outline:
   white border at rest, orange border on hover. !important beats the inline
   border-color:#ffffff on the a. */
.gel-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.gel-hero .wp-block-button.is-style-outline .wp-block-button__link:focus,
.gel-hero .wp-block-button.is-style-outline .wp-block-button__link:active,
.gel-paper .wp-block-button.is-style-outline .wp-block-button__link:hover,
.gel-paper .wp-block-button.is-style-outline .wp-block-button__link:focus,
.gel-paper .wp-block-button.is-style-outline .wp-block-button__link:active {
	border-color: var(--gel-orange) !important;
}

/* ============================================================
   Header top bar (email + phone)
   ============================================================ */
/* Align header content (logo, nav, top bar) with the 1200px page content.
   The header .site-container has 24px (1.5rem) horizontal edge padding while the
   page content has none, so the container must be 1200 + 2×24 = 1248px for its
   inner 1200px area to line up exactly with the content columns below. */
#masthead .site-container { max-width: 1248px; margin-left: auto; margin-right: auto; }

.site-header-upper-inner-wrap .site-top-header-wrap { background: var(--gel-navy); }
.gel-topbar {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 24px; font-size: 14px;
}
.gel-topbar a { color: #fff; text-decoration: none !important; }
.gel-topbar a:hover { color: var(--gel-orange); text-decoration: none !important; }
/* Primary nav links in navy */
.site-header-main .header-navigation .menu-container > ul > li > a { color: var(--gel-navy); }

/* ============================================================
   Footer (3-column)
   ============================================================ */
/* Kadence runs wpautop on the header/footer HTML modules, leaving an empty <p>
   before our shortcode output — hide it. */
.header-html-inner > p:empty, .footer-html-inner > p:empty { display: none; }

#colophon.site-footer { background: var(--gel-navy); color: #fff; }
#colophon.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
#colophon.site-footer a:hover { color: var(--gel-orange); }
.gel-footer, .gel-footer .gel-fcol { text-align: left; } /* Kadence footer-html centers by default; mockup is left */
.gel-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 48px;
	padding: 20px 0 34px;
}
.gel-footer .gel-fname { font-weight: 800; font-size: 21px; margin-bottom: 14px; }
.gel-footer p { color: rgba(255, 255, 255, .8); line-height: 1.65; margin: 0; }
.gel-footer h4 { color: #fff; font-size: 18px; margin: 0 0 16px; }
.gel-footer ul { list-style: none; margin: 0; padding: 0; }
.gel-footer li { margin-bottom: 12px; color: rgba(255, 255, 255, .85); }
/* contact rows: icon + text on a flex row so text wraps under itself (not the icon),
   and the email keeps its natural width (the old width:22px hit the email span too) */
.gel-fcontact li { display: flex; align-items: flex-start; gap: 8px; }
.gel-fcontact li > span:first-child { flex-shrink: 0; width: 20px; text-align: center; }
.gel-fcontact .gel-email, .gel-fcontact .gel-email a { word-break: break-word; }
.gel-fbar {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding: 20px 0 4px;
	color: rgba(255, 255, 255, .6);
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 24px;
}
.gel-fbar .gel-credit { display: inline-block; margin-top: 6px; opacity: .85; }
.gel-fbar-links {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 22px;
}
.gel-fbar-links li { color: rgba(255, 255, 255, .6); }
#colophon .gel-fbar-links a { color: rgba(255, 255, 255, .6); text-decoration: none; }
#colophon .gel-fbar-links a:hover { color: #fff; }

/* ============================================================
   Bell schedule card (Ώρες λειτουργίας — page 25)
   ============================================================ */
.gel-schedule {
	max-width: 560px;
	margin: 10px auto;
	background: #fff;
	border: 1px solid var(--gel-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(26, 71, 137, .10);
}
.gel-sch-head {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--gel-navy);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 16px 30px;
}
.gel-sch-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 15px 30px;
	border-top: 1px solid var(--gel-line);
}
.gel-sch-row:nth-child(even) { background: #f9f9ff; }
.gel-sch-num {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; height: 46px; padding: 0 10px;
	border-radius: 9999px;
	background: var(--gel-ico-blue);
	color: var(--gel-navy);
	font-weight: 800; font-size: 18px;
}
.gel-sch-time {
	font-weight: 700; font-size: 22px;
	color: var(--gel-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: .5px;
}
@media (max-width: 480px) {
	.gel-sch-head, .gel-sch-row { padding-left: 18px; padding-right: 18px; }
	.gel-sch-time { font-size: 19px; }
}
.gel-sch-download { text-align: center; margin: 24px auto 4px; }
.gel-dl-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--gel-orange); color: #663500;
	font-weight: 700; font-size: 16px;
	padding: 13px 26px; border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(254, 147, 44, .3);
	transition: filter .2s ease, transform .1s ease;
}
.gel-dl-btn:hover { filter: brightness(1.05); color: #663500; }
.gel-dl-btn:active { transform: scale(.98); }
.gel-dl-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Easter-egg tooltip over the designer's name */
.gel-tip { position: relative; cursor: help; white-space: nowrap; border-bottom: 1px dotted rgba(255, 255, 255, .55); }
.gel-tip::after, .gel-tip::before {
	position: absolute;
	left: 50%;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
	z-index: 20;
}
.gel-tip::after {
	content: attr(data-tip);
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(5px);
	width: max-content;
	max-width: 240px;
	white-space: normal;
	text-align: center;
	background: #ffffff;
	color: #1a1b20;
	padding: 9px 13px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.gel-tip::before {
	content: "";
	bottom: calc(100% + 4px);
	transform: translateX(-50%) translateY(5px);
	border: 6px solid transparent;
	border-top-color: #ffffff;
}
.gel-tip:hover::after, .gel-tip:hover::before {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}
@media (max-width: 781px) {
	.gel-footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---- Newspaper CTA ---- */
.gel-paper { background: var(--gel-navy-2); margin-bottom: 72px; } /* lighter navy on top; light gap separates it from the darker footer */
.gel-paper, .gel-paper :where(h2,p,span) { color: #fff; }
.gel-paper .gel-eyebrow {
	color: var(--gel-orange);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: .01em;
	margin-bottom: 6px;
}
.gel-paper-img { margin: 0; }
.gel-paper-img img {
	max-width: 320px;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
	transform: rotate(3deg);
	transition: transform .4s ease;
}
.gel-paper-img img:hover { transform: rotate(0); }