/* Focus English Online — Vocabulary pages
   Shared vocabulary layout, controls, sidebar and responsive styles.
   Requires /css/focus-global.css and class="vocabulary-page" on <body>.
   Usage: <link rel="stylesheet" href="/css/vocabulary.css">
*/

.vocabulary-page .grammar-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:30px;
    align-items:start
}

.vocabulary-page .grammar-primary {
    min-width:0
}

.vocabulary-page h1 {
    font-size:clamp(30px,3.2vw,40px);
    line-height:1.2;
    margin:0
}

.vocabulary-page h2 {
    font-size:25px;
    margin:32px 0 16px
}

.vocabulary-page .intro {
    font-size:18px;
    line-height:1.65;
    color:#333
}

.vocabulary-page .toolbar,.vocabulary-page .panel {
    border:1px solid #ddd;
    padding:20px;
    margin:24px 0;
    background:#fff
}

.vocabulary-page .toolbar {
    background:#fafafa
}

.vocabulary-page label {
    display:block;
    font-weight:700;
    margin-bottom:8px
}

.vocabulary-page input[type=search],.vocabulary-page input[type=text] {
    width:100%;
    padding:12px;
    font:inherit;
    border:1px solid #aeb4bc;
    border-radius:4px;
    font-size:17px
}

.vocabulary-page button {
    cursor:pointer;
    font:inherit
}

.vocabulary-page .btn {
    padding:10px 13px;
    border:1px solid #bbb;
    border-radius:4px;
    background:white;
    color:#222;
    min-height:44px
}

.vocabulary-page .btn[aria-pressed=true],.vocabulary-page .primary {
    background:#b22222;
    color:white;
    border-color:#b22222
}

.vocabulary-page button:focus-visible,.vocabulary-page a:focus-visible,.vocabulary-page input:focus-visible {
    outline:3px solid #1769d2;
    outline-offset:2px
}

.vocabulary-page .controls {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:14px 0
}

.vocabulary-page .meta {
    font-size:14px;
    color:#555
}

.vocabulary-page .table-scroll {
    overflow-x:auto
}

.vocabulary-page table {
    width:100%;
    border-collapse:collapse;
    font-size:16px
}

.vocabulary-page th {
    text-align:left;
    background:#f2f3f4;
    padding:12px;
    border-bottom:2px solid #ddd
}

.vocabulary-page td {
    padding:12px;
    border-bottom:1px solid #e6e6e6;
    vertical-align:middle
}

.vocabulary-page td:first-child {
    font-weight:650
}

.vocabulary-page tbody tr:hover {
    background:#fafafa
}

.vocabulary-page .speak {
    border:1px solid #ddd;
    background:#fff;
    border-radius:4px;
    padding:5px 8px;
    min-height:36px;
    margin-left:5px
}

.vocabulary-page .form-value.hidden-answer {
    display:none
}

.vocabulary-page .reveal {
    display:none
}

body.vocabulary-page.hide-forms .form-value:not(.revealed) {
    display:none!important
}

body.vocabulary-page.hide-forms .reveal {
    display:inline-block!important
}

.vocabulary-page .reveal {
    border:1px solid #aaa;
    border-radius:4px;
    padding:6px 8px;
    background:white
}

.vocabulary-page .anchors {
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin:20px 0
}

.vocabulary-page .anchors a {
    color:#a51e1e
}

.vocabulary-page .flashcard {
    background:#f7f8f9;
    border:1px solid #ddd;
    min-height:160px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    padding:22px;
    margin:16px 0
}

.vocabulary-page .flashword {
    font-size:29px;
    font-weight:700
}

.vocabulary-page .flashanswer {
    font-size:21px;
    color:#a51e1e
}

.vocabulary-page .feedback {
    padding:12px;
    background:#f3f3f3;
    border-left:4px solid #777;
    margin:12px 0
}

.vocabulary-page .feedback.good {
    background:#edf7ee;
    border-color:#23753a
}

.vocabulary-page .feedback.bad {
    background:#fff2ee;
    border-color:#b22222
}

.vocabulary-page .note {
    color:#555;
    font-size:14px;
    line-height:1.6
}

.vocabulary-page .quiz-inputs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}

.vocabulary-page .quiz-inputs label {
    font-size:15px
}

.vocabulary-page .grammar-sidebar .grammar-side-card {
    border:1px solid #e5e5e5;
    padding:18px;
    margin-bottom:16px
}

.vocabulary-page .grammar-sidebar h2 {
    font-size:18px;
    margin:0 0 12px
}

@media(max-width:900px) {
    .vocabulary-page .grammar-layout {
        grid-template-columns:1fr
    }

}

@media(max-width:600px) {
    .vocabulary-page .quiz-inputs {
        grid-template-columns:1fr
    }

    .vocabulary-page td,.vocabulary-page th {
        padding:9px 7px;
        font-size:14px
    }

    .vocabulary-page .toolbar,.vocabulary-page .panel {
        padding:15px
    }

}

/* Sidebar: consolidated page-specific styles */
body.vocabulary-page .grammar-sidebar {
    min-width:0
}

body.vocabulary-page .grammar-sidebar .focus-side-search,
body.vocabulary-page .grammar-sidebar .ir-learning-links {
    box-sizing:border-box;
    width:100%;
    margin:0 0 16px;
    padding:18px 17px;
    border:1px solid #e1e1e1;
    border-radius:3px;
    box-shadow:none;
}

body.vocabulary-page .grammar-sidebar .focus-side-search {
    background:#fff
}

body.vocabulary-page .grammar-sidebar .ir-learning-links {
    background:#f7f8f9
}

body.vocabulary-page .grammar-sidebar .focus-side-search h2,
body.vocabulary-page .grammar-sidebar .ir-learning-links h2 {
    margin:0 0 16px;
    padding:0;
    color:#172233;
    font-size:18px;
    font-weight:700;
    line-height:1.35;
}

body.vocabulary-page .grammar-sidebar form.ir-site-search-form {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:6px;
    width:100%;
    margin:0;
    padding:0;
}

body.vocabulary-page .grammar-sidebar form.ir-site-search-form input.ir-search-field {
    display:block;
    flex:1 1 0;
    min-width:0;
    width:0;
    height:48px;
    min-height:48px;
    box-sizing:border-box;
    margin:0;
    padding:10px 11px;
    border:1px solid #aeb7c2;
    border-radius:4px;
    background:#fff;
    font:inherit;
    font-size:16px;
}

body.vocabulary-page .grammar-sidebar form.ir-site-search-form button.ir-search-submit {
    display:block;
    flex:0 0 auto;
    height:48px;
    min-height:48px;
    margin:0;
    padding:0 11px;
    border:1px solid #b22222;
    border-radius:0;
    background:#b22222;
    color:#fff;
    font:inherit;
    font-size:15px;
    line-height:1.2;
    cursor:pointer;
}

body.vocabulary-page .grammar-sidebar form.ir-site-search-form button.ir-search-submit:hover {
    background:#8e1919
}

body.vocabulary-page .grammar-sidebar .ir-learning-links ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0
}

body.vocabulary-page .grammar-sidebar .ir-learning-links li {
    display:block;
    list-style:none;
    margin:0;
    padding:16px 0;
    border:0;
    border-bottom:1px solid #dedede;
}

body.vocabulary-page .grammar-sidebar .ir-learning-links li:first-child {
    padding-top:10px
}

body.vocabulary-page .grammar-sidebar .ir-learning-links li:last-child {
    border-bottom:0
}

body.vocabulary-page .grammar-sidebar .ir-learning-links a.ir-learning-link {
    display:block;
    margin:0;
    padding:0;
    background:transparent;
    color:#333;
    text-decoration:none;
}

body.vocabulary-page .grammar-sidebar .ir-learning-links .ir-learning-title {
    display:block;
    margin:0 0 4px;
    color:#333;
    font-size:15px;
    font-weight:700;
    line-height:1.5;
}

body.vocabulary-page .grammar-sidebar .ir-learning-links .sidebar-link-desc {
    display:block;
    margin:0;
    color:#666;
    font-size:13px;
    font-weight:400;
    line-height:1.5;
}

body.vocabulary-page .grammar-sidebar .ir-learning-links .vocab-sidebar-more {
    display:block;
    margin:24px 0 12px;
    padding:0
}

body.vocabulary-page .grammar-sidebar .ir-learning-links .vocab-sidebar-more a {
    display:inline-block;
    background:transparent;
    color:#b22222;
    font-size:14px;
    text-decoration:none;
}

body.vocabulary-page .grammar-sidebar .ir-learning-links a:hover .ir-learning-title,
body.vocabulary-page .grammar-sidebar .ir-learning-links .vocab-sidebar-more a:hover {
    text-decoration:underline
}

/* Keep the language switch visible in the red header. */
body.vocabulary-page .header-tools a.language-link {
    display:inline-flex;
    visibility:visible;
    opacity:1;
    position:static;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-left:12px;
    padding:9px 12px;
    border:1px solid #fff;
    border-radius:3px;
    background:#fff;
    color:#a51e1e;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

body.vocabulary-page .header-tools a.language-link:hover {
    background:#f4f4f4
}

body.vocabulary-page .grammar-breadcrumb .ir-english-breadcrumb {
    display:inline-block;
    margin-left:20px;
    color:#a51e1e;
    font-weight:700;
    text-decoration:underline;
}

body.vocabulary-page .grammar-sidebar a:focus-visible,
body.vocabulary-page .grammar-sidebar button:focus-visible,
body.vocabulary-page .grammar-sidebar input:focus-visible,
body.vocabulary-page .header-tools a.language-link:focus-visible {
    outline:3px solid #1769d2;
    outline-offset:2px
}

@media(max-width:760px) {
    body.vocabulary-page .header-tools a.language-link {
        padding:7px;
        margin-left:4px;
        font-size:13px
    }

}

/* Plain English language link, matching the Focus header reference. */
body.vocabulary-page .header-tools a.language-link {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:36px!important;
    padding:4px 0!important;
    margin:0 0 0 18px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.4!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}

body.vocabulary-page .header-tools a.language-link:hover {
    background:transparent!important;
    color:#fff!important;
    text-decoration:underline!important;
}

body.vocabulary-page .header-tools a.language-link:focus-visible {
    outline:3px solid #fff!important;
    outline-offset:3px!important;
}

.vocabulary-page .category-row th {
    background:#e9ebed;
    text-align:left;
    font-weight:700;
    padding:13px 12px
}

.vocabulary-page.hide-forms #word-rows .form-value:not(.revealed) {
    display:none
}

.vocabulary-page.hide-forms #word-rows .reveal {
    display:inline-block
}

.vocabulary-page #word-rows .reveal {
    display:none
}

.vocabulary-page #word-rows th[scope=row] {
    font-weight:500
}

.vocabulary-page #word-rows .speak {
    margin-left:8px
}

body.vocabulary-page #word-rows .reveal {
    display:inline-block
}

body.vocabulary-page #word-rows .reveal[hidden],body.vocabulary-page #word-rows .form-value[hidden] {
    display:none!important
}

body.vocabulary-page .flashanswer[hidden] {
    display:none
}

body.vocabulary-page #quiz-next[hidden],body.vocabulary-page #quiz-check[hidden] {
    display:none
}

body.vocabulary-page .flashword {
    font-size:23px
}

body.vocabulary-page .grammar-primary section {
    scroll-margin-top:95px
}

/* Focus vocabulary pronunciation control */
body.vocabulary-page #word-rows button.speak {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    width:38px;
    height:38px;
    min-height:38px;
    padding:6px;
    margin-left:8px;
    border:1px solid #d4dce5;
    border-radius:4px;
    background:#fff;
    color:#1769d2;
    line-height:1
}

body.vocabulary-page #word-rows button.speak:hover {
    background:#eef5ff;
    border-color:#1769d2
}

body.vocabulary-page #word-rows button.speak svg {
    display:block;
    flex:none
}

body.vocabulary-page #flash-speak {
    display:inline-flex;
    align-items:center;
    gap:7px
}

body.vocabulary-page #flash-speak svg {
    color:#1769d2
}


/* Australian English lesson: multiple-choice quiz */
.vocabulary-page.australian-vs-british-page .quiz-choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.vocabulary-page.australian-vs-british-page .quiz-choices button {
  min-height:52px;
  padding:10px 12px;
  text-align:left;
  border:1px solid #bfc4ca;
  border-radius:4px;
  background:#fff;
  color:#222;
}
.vocabulary-page.australian-vs-british-page .quiz-choices button:hover:not(:disabled) {background:#f7f7f7}
.vocabulary-page.australian-vs-british-page .quiz-choices button.correct {border-color:#257a39;background:#eaf6ec}
.vocabulary-page.australian-vs-british-page .quiz-choices button.wrong {border-color:#b22222;background:#fff0ef}
.vocabulary-page.australian-vs-british-page .quiz-choices button:focus-visible {outline:3px solid #1769d2;outline-offset:2px}
.vocabulary-page.australian-vs-british-page .quiz-choices button:disabled {cursor:default}
.vocabulary-page.australian-vs-british-page .table-scroll td {overflow-wrap:anywhere}
.vocabulary-page.australian-vs-british-page .reveal[hidden] {display:none!important}
@media(max-width:600px) {
  .vocabulary-page.australian-vs-british-page .quiz-choices {grid-template-columns:1fr}
}
/* Consistent pronunciation buttons */
.ir-page #word-rows .speak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;

    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;

    margin: 0 12px 0 0;
    padding: 6px;

    background: #fff;
    color: #2676cc;
    border: 1px solid #d7dbe0;
    border-radius: 4px;
    cursor: pointer;
}

.ir-page #word-rows .speak svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ir-page #word-rows .speak:hover {
    background: #f1f6ff;
    border-color: #a9c4e6;
}

.ir-page #word-rows .speak:focus-visible {
    outline: 3px solid #1769d2;
    outline-offset: 2px;
}