/*
 * Custom overrides for the Valiant theme
 *
 * This file supplements the minified screen.css and should only include
 * declarations that intentionally override or extend the existing theme
 * without altering its structure or colours.  It introduces two custom
 * fonts, locale-aware text directionality and typography for headings,
 * and ensures subscription call‑to‑action buttons have square corners.
 */

/* Load the supplied font files.  WOFF2 is listed first for modern
   browsers with WOFF as a fallback.  Font display is set to swap to
   prevent invisible text during load. */
@font-face {
    font-family: 'VALIANTFONT1-Regular';
    src: url('../fonts/VALIANTFONT1.woff2') format('woff2'),
         url('../fonts/VALIANTFONT1.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VALIANTFONT2-Light';
    src: url('../fonts/VALIANTFONT2.woff2') format('woff2'),
         url('../fonts/VALIANTFONT2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Apply VALIANTFONT1-Regular as the default typeface for all body copy. */
body {
    font-family: 'VALIANTFONT1-Regular', var(--gh-font-body, var(--font-sans)), sans-serif;
    /* Increase the base font size further to improve readability.  The default
       Ghost theme uses 1.6rem on the body; bump this up to 2rem and adjust line-height
       to 1.8 so that paragraphs, lists and other body copy are comfortably large
       without altering the heading sizes. */
    font-size: 2rem;
    line-height: 1.8;
}

/* Use VALIANTFONT2-Light for all headings. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'VALIANTFONT2-Light', var(--gh-font-heading, var(--font-serif)), sans-serif;
    font-weight: 400;
}

/* Locale-specific direction and alignment.  When the site language is Arabic
   (lang="ar") the body flows from right to left and text aligns to the right.
   English (lang="en") remains left-to-right and aligns left.  Additional
   languages inherit default directionality. */
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

html[lang="en"] body {
    direction: ltr;
    text-align: left;
}

/* Ensure subscribe and email call‑to‑action buttons have sharp corners.  We
   target specific classes used by Ghost’s membership portal so other buttons
   remain unaffected. */
.gh-header-input,
.gh-cta-input,
.gh-cta-input span,
.gh-header-input,
/* Override the default pill shape on the header subscription button.  Target the
   member signup call‑to‑action in the header specifically by its data attribute. */
.gh-head-btn.gh-btn.gh-primary-btn[data-portal="signup"],
.gh-head-btn.gh-btn.gh-primary-btn[data-portal="subscribe"] {
    border-radius: 0 !important;
}

/* Hide any secondary navigation link that points to the Ghost portal sign‑up form.  This
   prevents the “Sign up” link from appearing in the footer while leaving other
   secondary navigation items intact. */
.gh-foot-menu [data-portal="signup"],
.gh-foot-menu a[href$="#/portal/signup"] {
    display: none !important;
}

/* Further increase the font size for article content.  The .gh-content and .post-content
   containers hold the bulk of blog post text.  Enlarging these ensures that long
   paragraphs remain comfortable to read on desktop and mobile. */
.gh-content,
.post-content {
    font-size: 2.2rem;
    line-height: 1.8;
}

/* Ensure nested paragraphs and list items inherit the increased size rather than being
   reset by other styles. */
.gh-content p,
.gh-content li,
.post-content p,
.post-content li {
    font-size: inherit;
    line-height: inherit;
}

/* Force all subscription buttons and inputs to have square corners, including the
   hero section button.  Target by attribute selectors so we don’t inadvertently
   affect unrelated buttons. */
.gh-header-input,
.gh-header-input span,
.gh-header-action.gh-header-input,
.gh-header-action.gh-header-input span,
.gh-cta-input,
.gh-cta-input span,
[data-portal="signup"],
[data-portal="subscribe"] {
    border-radius: 0 !important;
}

/* Remove the semi‑transparent overlay applied to header background images.  Ghost’s
   default theme uses a dark overlay on hero images to improve contrast for text.
   Override the pseudo‑element style to make the overlay fully transparent. */
.gh-header.has-background-image:before {
    background-color: transparent !important;
    opacity: 0 !important;
}