/* ==========================================================
   STOKE NEWINGTON HISTORY
   LINKS + BUTTONS
   ==========================================================

   PURPOSE
   -------
   1. Underline ordinary inline text links.
   2. Keep navigation, buttons and linked images un-underlined.
   3. Make WordPress block buttons and blog/archive
      "Continue reading" buttons visually consistent.
   4. Add clear hover and keyboard-focus states.

   ========================================================== */


/* ==========================================================
   1. INLINE TEXT LINKS
   ========================================================== */


/* ----------------------------------------------------------
   LINKS IN PARAGRAPHS
   ---------------------------------------------------------- */

p a {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.15em !important;
    text-decoration-skip-ink: auto !important;
}


/* ----------------------------------------------------------
   LINKS IN CONTENT LISTS
   ----------------------------------------------------------

   Restrict list-link styling to content areas so navigation
   menus are not underlined.
   ---------------------------------------------------------- */

main li a,
article li a,
.entry-content li a,
.post-content li a {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.15em !important;
    text-decoration-skip-ink: auto !important;
}


/* ----------------------------------------------------------
   LINKS IN BLOCKQUOTES
   ---------------------------------------------------------- */

blockquote a {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.15em !important;
    text-decoration-skip-ink: auto !important;
}


/* ----------------------------------------------------------
   INLINE LINK HOVER
   ---------------------------------------------------------- */

p a:hover,
main li a:hover,
article li a:hover,
.entry-content li a:hover,
.post-content li a:hover,
blockquote a:hover {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
}


/* ----------------------------------------------------------
   INLINE LINK KEYBOARD FOCUS
   ---------------------------------------------------------- */

p a:focus-visible,
main li a:focus-visible,
article li a:focus-visible,
.entry-content li a:focus-visible,
.post-content li a:focus-visible,
blockquote a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}


/* ==========================================================
   2. EXCLUSIONS
   ========================================================== */


/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */

nav a,
.menu a,
.main-navigation a,
.primary-navigation a,
.site-navigation a {
    text-decoration: none !important;
}


/* ----------------------------------------------------------
   LINKED IMAGES
   ---------------------------------------------------------- */

figure a,
.wp-block-image a {
    text-decoration: none !important;
}


/* ==========================================================
   3. UNIVERSAL BUTTON STYLING
   ==========================================================

   Applies the same treatment to:

   • WordPress Button blocks
   • Blog/archive "Continue reading" buttons

   DEFAULT:
   • White background
   • Dark text
   • Dark border
   • Rounded corners

   HOVER:
   • Dark background
   • White text

   ========================================================== */

.wp-block-button .wp-block-button__link,
.more-link,
.read-more,
a.read-more,
.entry-more a {

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Typography */
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;

    /* Spacing */
    padding: 10px 12px !important;

    /* Shape */
    border: 2px solid #222 !important;
    border-radius: 6px !important;

    /* Colours */
    background: #fff !important;
    color: #222 !important;

    /* Remove normal link treatment */
    text-decoration: none !important;

    /* Prevent theme sizing rules interfering */
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;

    /* Hover transition */
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease !important;
}


/* ----------------------------------------------------------
   BUTTON HOVER
   ---------------------------------------------------------- */

.wp-block-button .wp-block-button__link:hover,
.more-link:hover,
.read-more:hover,
a.read-more:hover,
.entry-more a:hover {
    background: #222 !important;
    color: #fff !important;
    border-color: #222 !important;
    text-decoration: none !important;
}


/* ----------------------------------------------------------
   BUTTON KEYBOARD FOCUS
   ---------------------------------------------------------- */

.wp-block-button .wp-block-button__link:focus-visible,
.more-link:focus-visible,
.read-more:focus-visible,
a.read-more:focus-visible,
.entry-more a:focus-visible {
    outline: 2px solid #222 !important;
    outline-offset: 3px !important;
}


/* ==========================================================
   4. BLOG "CONTINUE READING" ARROW
   ==========================================================

   Hides any icon inserted by the theme and adds a standard
   right arrow so the automatic blog button can match buttons
   created manually in WordPress.

   For manual Button blocks, use this wording:

   Continue reading →

   ========================================================== */


/* Hide theme-generated arrow/icon */
.more-link svg,
.read-more svg,
.entry-more a svg,
.more-link i,
.read-more i,
.entry-more a i {
    display: none !important;
}


/* Add standard arrow */
.more-link::after,
.read-more::after,
a.read-more::after,
.entry-more a::after {
    content: "→" !important;

    margin-left: 5px !important;

    font: inherit !important;
    line-height: 1 !important;

    text-transform: none !important;
    letter-spacing: normal !important;

    position: static !important;
    transform: none !important;
}