/* =============================================================================
   MyCV.ie - shared styles for the guide pages
   -----------------------------------------------------------------------------
   Used by irish-cv-template.html, ats-cv-format.html and
   how-to-write-a-cv-ireland.html. The homepage and cv-review.html keep their own
   inline styles, so nothing here can affect them.

   Tokens match index.html exactly. If the brand colours change there, change
   them here too.
   ============================================================================= */

:root {
    --primary-dark: #0f172a;
    --primary-medium: #1e293b;
    --accent-purple: #8b5cf6;
    --accent-light-purple: #a78bfa;
    --text-dark: #1f1f1f;
    --text-light: #ffffff;
    --text-muted: #64748b;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-subtle: rgba(15, 23, 42, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-dark);
    background: var(--bg-light);
    line-height: 1.7;
}

a { color: var(--accent-purple); }

/* --- Header ------------------------------------------------------------
   Lives in nav.css now, shared with every other page. Link both files. */

/* --- Article ------------------------------------------------------------ */

.wrap { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.breadcrumb {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.page-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-purple);
    margin-bottom: 0.75rem;
}

h1 {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.2;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

.lede {
    font-size: 1.08rem;
    color: var(--primary-medium);
    margin-bottom: 2.25rem;
}

article h2 {
    font-family: 'Fraunces', serif;
    font-size: 1.55rem;
    color: var(--primary-dark);
    margin: 2.75rem 0 0.9rem;
    scroll-margin-top: 1.5rem;
}

article h3 {
    font-size: 1.08rem;
    color: var(--primary-dark);
    margin: 1.75rem 0 0.6rem;
}

article p { color: var(--primary-medium); margin-bottom: 1rem; }

article ul, article ol { margin: 0 0 1.25rem 1.3rem; color: var(--primary-medium); }
article li { margin-bottom: 0.55rem; }

article strong { color: var(--primary-dark); }

/* --- Byline -------------------------------------------------------------
   Sits under the h1 on every guide. Says who wrote the thing before anyone
   has to go looking, which is worth doing for the reader and is also what
   Google wants to see on advice content. */

.byline {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: -0.4rem 0 1.6rem;
}

.byline a { text-decoration: none; font-weight: 600; }
.byline a:hover { text-decoration: underline; }

/* --- Packages block ----------------------------------------------------
   The closing CTA on each guide. A vague "from EUR79" makes someone who has
   just read the whole article go hunting for what they would actually be
   buying, so the three packages are spelled out here instead. */

.packages-block {
    background: var(--primary-dark);
    color: var(--text-light);
    padding: 2.25rem;
    margin: 2.75rem 0;
}

.packages-block h2 {
    font-family: 'Fraunces', serif;
    font-size: 1.45rem;
    color: var(--text-light);
    margin: 0 0 0.6rem;
}

.packages-block > p { color: rgba(255, 255, 255, 0.78); font-size: 0.96rem; margin-bottom: 1.5rem; }

.pack-row {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.95rem;
}

.pack-row:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

.pack-name {
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-light-purple);
    flex: 0 0 6.5rem;
}

.pack-what { flex: 1 1 auto; color: rgba(255, 255, 255, 0.82); }
.pack-price { flex: 0 0 auto; font-weight: 700; color: var(--text-light); white-space: nowrap; }

.packages-block .btn { margin-top: 1.6rem; }
.packages-block small { display: block; margin-top: 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; }

.packages-block.centred { text-align: center; }

@media (max-width: 620px) {
    .packages-block { padding: 1.6rem 1.35rem; }
    .pack-row { flex-wrap: wrap; gap: 0.3rem 0.9rem; }
    .pack-name { flex-basis: 100%; }
    .pack-what { flex: 1 1 60%; font-size: 0.9rem; }
}

/* --- Contents list ------------------------------------------------------ */

.toc {
    background: var(--bg-white);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-purple);
    padding: 1.4rem 1.6rem;
    margin-bottom: 2.5rem;
}

.toc h2 {
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-purple);
    margin: 0 0 0.75rem;
}

.toc ol { margin: 0 0 0 1.1rem; }
.toc li { margin-bottom: 0.35rem; font-size: 0.93rem; }

/* --- Callouts ----------------------------------------------------------- */

.note {
    background: var(--bg-white);
    border-left: 3px solid var(--accent-purple);
    padding: 1.1rem 1.35rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    color: var(--primary-medium);
}

.note p:last-child { margin-bottom: 0; }

/* Side by side "this not that" comparison */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.compare > div {
    background: var(--bg-white);
    border: 1px solid var(--border-subtle);
    padding: 1.1rem 1.25rem;
    font-size: 0.93rem;
    color: var(--primary-medium);
}

.compare .weak { border-top: 3px solid #cbd5e1; }
.compare .strong { border-top: 3px solid var(--accent-purple); }

.compare .label {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.compare .strong .label { color: var(--accent-purple); }

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

/* --- The worked CV layout block ----------------------------------------- */

.cv-mock {
    background: var(--bg-white);
    border: 1px solid var(--border-subtle);
    padding: 2rem 2.25rem;
    margin: 1.75rem 0;
    font-size: 0.93rem;
    color: var(--primary-medium);
}

.cv-mock .cv-block { margin-bottom: 1.6rem; }
.cv-mock .cv-block:last-child { margin-bottom: 0; }

.cv-mock .cv-head {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-purple);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.35rem;
    margin-bottom: 0.7rem;
}

.cv-mock ul { margin: 0.4rem 0 0 1.1rem; }
.cv-mock li { margin-bottom: 0.35rem; }
.cv-mock .cv-meta { color: var(--text-muted); font-size: 0.86rem; }

@media (max-width: 600px) {
    .cv-mock { padding: 1.4rem 1.25rem; }
}

/* --- Inline CTA cards --------------------------------------------------- */

.cta-card {
    background: var(--primary-dark);
    color: var(--text-light);
    padding: 2.25rem 2.25rem;
    margin: 2.75rem 0;
    text-align: center;
}

.cta-card h2 {
    font-family: 'Fraunces', serif;
    font-size: 1.45rem;
    color: var(--text-light);
    margin: 0 0 0.7rem;
}

.cta-card p { color: rgba(255, 255, 255, 0.78); margin-bottom: 1.5rem; font-size: 0.96rem; }
.cta-card .price { color: var(--accent-light-purple); font-weight: 700; }

.btn {
    display: inline-block;
    background: var(--accent-purple);
    color: var(--text-light);
    padding: 1rem 2.2rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn:hover { background: var(--accent-light-purple); transform: translateY(-2px); }

.cta-card small { display: block; margin-top: 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; }

/* Lighter variant for the free review, so the two CTAs on a page do not
   compete visually. */
.cta-card.soft {
    background: var(--bg-white);
    color: var(--primary-medium);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-purple);
    text-align: left;
}

.cta-card.soft h2 { color: var(--primary-dark); }
.cta-card.soft p { color: var(--primary-medium); }
.cta-card.soft .btn { background: var(--primary-dark); }
.cta-card.soft .btn:hover { background: var(--accent-purple); }

/* --- Checklist capture form --------------------------------------------- */

.capture {
    background: var(--bg-white);
    border: 1px solid var(--border-subtle);
    padding: 2rem 2.25rem;
    margin: 2.75rem 0;
}

.capture h2 {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin: 0 0 0.6rem;
}

.capture > p { color: var(--primary-medium); font-size: 0.95rem; margin-bottom: 1.25rem; }

.capture-form .form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.form-input {
    flex: 1 1 180px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-light);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.form-input:focus { outline: 2px solid var(--accent-purple); outline-offset: -2px; }

.form-button {
    flex: 0 0 auto;
    background: var(--accent-purple);
    color: var(--text-light);
    border: none;
    cursor: pointer;
    padding: 0.9rem 1.6rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.25s ease;
}

.form-button:hover:not(:disabled) { background: var(--primary-dark); }
.form-button:disabled { opacity: 0.6; cursor: default; }

.form-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.85rem; }

.form-error { color: #b91c1c; font-size: 0.87rem; margin-top: 0.75rem; display: none; }
.form-error.visible { display: block; }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 560px) {
    .capture { padding: 1.5rem 1.35rem; }
    .capture-form .form-row { flex-direction: column; }
    .form-button { width: 100%; }
}

/* --- Guides index cards -------------------------------------------------- */

.guide-list { display: grid; gap: 1.25rem; margin: 2.25rem 0 0; }

.guide-card {
    display: block;
    background: var(--bg-white);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-purple);
    padding: 1.6rem 1.75rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09);
}

.guide-card h2 {
    font-family: 'Fraunces', serif;
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin: 0 0 0.5rem;
}

.guide-card p { color: var(--primary-medium); font-size: 0.96rem; margin: 0 0 0.9rem; }

.guide-card .read-on {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-purple);
}

.guide-card .covers {
    list-style: none;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.guide-card .covers li { position: relative; padding-left: 1.1rem; margin-bottom: 0.3rem; }
.guide-card .covers li::before { content: '\2022'; position: absolute; left: 0; }

@media (max-width: 560px) {
    .guide-card { padding: 1.35rem 1.25rem; }
}

/* --- Related guides ----------------------------------------------------- */

.related { margin-top: 3rem; border-top: 1px solid var(--border-subtle); padding-top: 1.75rem; }

.related h2 {
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-purple);
    margin: 0 0 0.85rem;
}

.related ul { list-style: none; margin: 0; }
.related li { margin-bottom: 0.5rem; font-size: 0.95rem; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, 0.62);
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.86rem;
}

.site-footer a { color: var(--accent-light-purple); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin-bottom: 0.5rem; }
.site-footer p:last-child { margin-bottom: 0; }