/* GIEC PR Pages — front-end styles. Scoped under .giec-pr-page / .giec-pr-theme so
   they only ever affect this plugin's own markup, never the active theme's other content. */

.giec-pr-page { max-width: 100%; box-sizing: border-box; }
.giec-pr-page * { box-sizing: border-box; }

.giec-pr-breadcrumb { font-size: 0.85em; margin: 0 0 1em; opacity: 0.8; }
.giec-pr-breadcrumb a { text-decoration: none; }
.giec-pr-breadcrumb a:hover { text-decoration: underline; }

.giec-pr-hero { margin-bottom: 1em; }
.giec-pr-title { margin: 0 0 0.3em; line-height: 1.2; }

.giec-pr-rating-badge { display: inline-flex; align-items: center; gap: 0.35em; font-size: 1.1em; }
.giec-pr-rating-badge .star { color: #e2a33a; line-height: 1; }
.giec-pr-rating-badge .star-empty { color: #ccc; }
.giec-pr-rating-text { font-size: 0.75em; opacity: 0.75; margin-left: 0.25em; }

.giec-pr-facts { margin: 1.5em 0; padding: 1em 1.25em; border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa; }
.giec-pr-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75em 1.5em; }
.giec-pr-fact { display: flex; flex-direction: column; }
.giec-pr-fact-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.6; }
.giec-pr-fact-value { font-size: 1.02em; font-weight: 600; }
.giec-pr-fact-links { margin: 0.75em 0 0; font-size: 0.85em; }
.giec-pr-fact-links a { margin-right: 1em; }

.giec-pr-article { margin: 1.5em 0; line-height: 1.7; }

.giec-pr-faq { margin: 2em 0; }
.giec-pr-faq-item { border-bottom: 1px solid #e2e2e2; padding: 0.75em 0; }
.giec-pr-faq-item summary { cursor: pointer; font-weight: 600; }
.giec-pr-faq-item div { margin-top: 0.5em; opacity: 0.9; }

.giec-pr-reviews { margin: 2.5em 0; padding-top: 1.5em; border-top: 1px solid #e2e2e2; }
.giec-pr-reviews-empty { opacity: 0.7; }
.giec-pr-review-list { list-style: none; margin: 1em 0; padding: 0; }
.giec-pr-review { border-bottom: 1px solid #ededed; padding: 0.9em 0; }
.giec-pr-review-stars { color: #e2a33a; letter-spacing: 0.1em; }
.giec-pr-review-author { font-size: 0.8em; opacity: 0.65; margin: 0.25em 0 0; }

.giec-pr-review-form { max-width: 480px; margin-top: 1.5em; padding: 1.25em; border: 1px solid #e2e2e2; border-radius: 8px; }
.giec-pr-review-form h3 { margin-top: 0; }
.giec-pr-review-form label { display: block; font-weight: 600; margin-bottom: 0.3em; font-size: 0.9em; }
.giec-pr-review-form input[type="text"],
.giec-pr-review-form textarea { width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; }

.giec-pr-star-input { display: flex; flex-direction: row-reverse; gap: 0.15em; font-size: 1.6em; margin-bottom: 0.75em; }
.giec-pr-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.giec-pr-star-input label { display: inline-block; cursor: pointer; color: #ccc; margin: 0; }
.giec-pr-star-input label span { pointer-events: none; }
.giec-pr-star-input label:hover,
.giec-pr-star-input label:hover ~ label,
.giec-pr-star-input input:checked ~ label,
.giec-pr-star-input label.giec-pr-star-active { color: #e2a33a; }

.giec-pr-review-submit { padding: 0.6em 1.4em; border: none; border-radius: 4px; background: #1d4ed8; color: #fff; cursor: pointer; font-weight: 600; }
.giec-pr-review-submit:hover { background: #1740b3; }
.giec-pr-review-msg { font-size: 0.9em; min-height: 1.2em; }

@media (max-width: 480px) {
	.giec-pr-facts-grid { grid-template-columns: 1fr; }
}

/* Call-to-action button rendered by the [giec_pr_cta] shortcode. !important on colour and
   underline only, so themes that style every <a> in content can't turn the button back
   into a plain blue link. */
.giec-pr-cta-wrap { display: block; margin: 1.75em 0; }
.giec-pr-cta {
	display: inline-block;
	padding: 0.85em 1.75em;
	border-radius: 6px;
	background: #c60f0f;
	color: #fff !important;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none !important;
	transition: background 0.15s ease;
}
.giec-pr-cta:hover,
.giec-pr-cta:focus { background: #9c0c0c; color: #fff !important; text-decoration: none !important; }


/* ===================================================================
   Brand link colour
   Scoped to the plugin's own blocks so the rest of the site is untouched.
   The CTA keeps its white-on-red treatment via its own !important rules.
   =================================================================== */
.giec-pr-article a,
.giec-pr-breadcrumb a,
.giec-pr-fact-links a,
.giec-pr-faq a { color: #c60f0f; }

.giec-pr-article a:hover,
.giec-pr-article a:focus,
.giec-pr-breadcrumb a:hover,
.giec-pr-breadcrumb a:focus,
.giec-pr-fact-links a:hover,
.giec-pr-fact-links a:focus,
.giec-pr-faq a:hover,
.giec-pr-faq a:focus { color: #9c0c0c; }

/* Underlined in body copy so the links are distinguishable without relying on
   colour alone, which matters for colour-blind readers and WCAG 1.4.1. */
.giec-pr-article a { text-decoration: underline; }
.giec-pr-article a.giec-pr-cta { text-decoration: none !important; }

/* ===================================================================
   Brand heading colour
   The in-content H2s live inside .giec-pr-page. The H1 may not: in
   "Theme prints the heading" mode Elementor renders it outside the
   plugin's wrapper, so the body class added by body_class() is used
   to reach it — scoped to page-title elements rather than every
   heading, so footer and widget headings are left alone.
   =================================================================== */
.giec-pr-page h1,
.giec-pr-page h2,
.giec-pr-page .giec-pr-title,
body.giec-pr-theme h1.entry-title,
body.giec-pr-theme .elementor-page-title,
body.giec-pr-theme .elementor-page-title .elementor-heading-title,
body.giec-pr-theme .page-title { color: #c60f0f; }

/* The FAQ question text is a <summary>, not a heading, but reads as one. */
.giec-pr-faq > h2 { color: #c60f0f; }

/* ===================================================================
   Tables: contain the overflow instead of letting it break the page
   =================================================================== */
.giec-pr-table-wrap {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5em 0;
	/* Right-edge shadow hints that there is more to scroll to. */
	background:
		linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0)),
		linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0));
	background-repeat: no-repeat;
	background-size: 100% 100%, 18px 100%;
	background-position: 0 0, 100% 0;
	background-attachment: local, scroll;
}
.giec-pr-table-wrap:focus-visible { outline: 2px solid #c60f0f; outline-offset: 2px; }
.giec-pr-table-wrap > table { margin: 0; min-width: 480px; }

/* ===================================================================
   Mobile
   =================================================================== */
@media (max-width: 782px) {
	/* Nothing inside a PR page may push the viewport sideways. */
	.giec-pr-page { max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; }
	.giec-pr-page img,
	.giec-pr-page iframe { max-width: 100%; height: auto; }

	/* Long URLs, ANZSCO strings and authority names are the usual culprits. */
	.giec-pr-article a,
	.giec-pr-fact-value,

	/* 16px floor stops iOS Safari zooming the page when a field is focused,
	   and keeps body copy readable without pinch-zoom. */
	.giec-pr-page,
	.giec-pr-article p,
	.giec-pr-article li { font-size: 16px; line-height: 1.65; }


	.giec-pr-article ul,
	.giec-pr-article ol { padding-left: 1.25rem; }

	/* Comfortable tap targets (~44px) for the contents list and breadcrumb. */
	.giec-pr-breadcrumb { font-size: 0.85rem; line-height: 1.9; }

	/* Full-width tap target for the CTA. */
	.giec-pr-cta { display: block; width: 100%; text-align: center; padding: 0.95em 1rem; }

	/* FAQ summaries are the main touch control on these pages. */
	.giec-pr-faq-item > summary { padding: 0.85rem 0; line-height: 1.45; }

	.giec-pr-table-wrap > table { min-width: 420px; font-size: 0.92rem; }
	.giec-pr-table-wrap th,
	.giec-pr-table-wrap td { padding: 0.5rem 0.6rem; }
}

/* ===================================================================
   Reviewed-by / last-updated byline
   =================================================================== */
.giec-pr-byline {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	opacity: 0.85;
}
.giec-pr-byline a { color: #c60f0f; }
.giec-pr-byline-sep { opacity: 0.5; }
@media (max-width: 782px) {
	.giec-pr-byline { font-size: 0.85rem; }
	.giec-pr-byline-sep { display: block; height: 0; overflow: hidden; } /* stack the two parts */
}


/* ===================================================================
   Heading sizes
   These are deliberately high-specificity and marked !important.
   The brand colour above was applying while the font-size was not,
   which means the theme sets heading sizes with a stronger selector
   and simply out-ranked the plugin. Sizing of plugin-rendered content
   belongs to the plugin, so this takes it back.

   clamp() means one rule covers every screen: the middle value scales
   with the viewport, the first and last cap it. No breakpoint needed,
   and no jump at an arbitrary pixel width.
   =================================================================== */
body.giec-pr-theme .giec-pr-page h1,
body.giec-pr-theme .giec-pr-page .giec-pr-title,
body.giec-pr-theme h1.entry-title,
body.giec-pr-theme .elementor-page-title,
body.giec-pr-theme .elementor-page-title .elementor-heading-title {
	font-size: clamp(1.5rem, 3.6vw, 2rem) !important;
	line-height: 1.25 !important;
}

body.giec-pr-theme .giec-pr-page h2,
body.giec-pr-theme .giec-pr-page .giec-pr-article h2,
body.giec-pr-theme .giec-pr-page .giec-pr-faq > h2 {
	font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important;
	line-height: 1.35 !important;
	margin-top: 1.9em;
	margin-bottom: 0.6em;
}

body.giec-pr-theme .giec-pr-page h3,
body.giec-pr-theme .giec-pr-page .giec-pr-article h3 {
	font-size: clamp(1.05rem, 1.7vw, 1.2rem) !important;
	line-height: 1.4 !important;
}

/* Long question-style H2s wrap mid-word on narrow screens without this. */
.giec-pr-page h1,
.giec-pr-page h2,
.giec-pr-page h3 { overflow-wrap: break-word; hyphens: none; }

/* Fallback that does not depend on the body class. body_class() adds
   .giec-pr-theme, but an Elementor Canvas template or an aggressive theme can
   strip body classes — !important still wins there even at lower specificity. */
.giec-pr-page h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important; line-height: 1.35 !important; }
.giec-pr-page h3 { font-size: clamp(1.05rem, 1.7vw, 1.2rem) !important; line-height: 1.4 !important; }
.giec-pr-page .giec-pr-title { font-size: clamp(1.5rem, 3.6vw, 2rem) !important; line-height: 1.25 !important; }